supported pagination of tags in glossary overiew section for tags

open-metadata · Jun 26, 2023 · 25264ed · 25264ed
1 parent 9354569
commit 25264ed
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 126 deletions.
diff --git a/...a-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/...a-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@@ -26,7 +26,7 @@ import { DataAssetsHeader } from 'components/DataAssets/DataAssetsHeader/DataAss
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import TableTags from 'components/TableTags/TableTags.component';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { getDashboardDetailsPath } from 'constants/constants';
 import { compare } from 'fast-json-patch';
 import { TagSource } from 'generated/type/schema';
@@ -598,7 +598,7 @@ const DashboardDetails = ({
  data-testid="entity-right-panel"
  flex="320px">
  <Space className="w-full" direction="vertical" size="large">
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  entityFqn={dashboardDetails.fullyQualifiedName}
  entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
  entityType={EntityType.DASHBOARD}
@@ -613,7 +613,7 @@ const DashboardDetails = ({
  onThreadLinkSelect={onThreadLinkSelect}
  />
 
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  entityFqn={dashboardDetails.fullyQualifiedName}
  entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
  entityType={EntityType.DASHBOARD}

diff --git a/...etadata-ui/src/main/resources/ui/src/components/DataModels/DataModelDetails.component.tsx b/...etadata-ui/src/main/resources/ui/src/components/DataModels/DataModelDetails.component.tsx
@@ -24,7 +24,7 @@ import EntityLineageComponent from 'components/EntityLineage/EntityLineage.compo
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import SchemaEditor from 'components/schema-editor/SchemaEditor';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { getDataModelDetailsPath, getVersionPath } from 'constants/constants';
 import { EntityField } from 'constants/Feeds.constants';
 import { CSMode } from 'enums/codemirror.enum';
@@ -195,7 +195,7 @@ const DataModelDetails = ({
  data-testid="entity-right-panel"
  flex="320px">
  <Space className="w-full" direction="vertical" size="large">
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  entityFqn={dashboardDataModelFQN}
  entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
  entityType={EntityType.DASHBOARD_DATA_MODEL}
@@ -205,7 +205,7 @@ const DataModelDetails = ({
  onSelectionChange={handleTagSelection}
  onThreadLinkSelect={onThreadLinkSelect}
  />
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  entityFqn={dashboardDataModelFQN}
  entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
  entityType={EntityType.DASHBOARD_DATA_MODEL}

diff --git a/...ata-ui/src/main/resources/ui/src/components/InfiniteSelectScroll/InfiniteSelectScroll.tsx b/...ata-ui/src/main/resources/ui/src/components/InfiniteSelectScroll/InfiniteSelectScroll.tsx
@@ -10,8 +10,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Select, Space, Spin, Tooltip, Typography } from 'antd';
+import { Select, Space, Tooltip, Typography } from 'antd';
 import { AxiosError } from 'axios';
+import Loader from 'components/Loader/Loader';
 import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
 import { Paging } from 'generated/type/paging';
 import { debounce } from 'lodash';
@@ -47,9 +48,10 @@ const InfiniteSelectScroll: FC<InfiniteSelectScrollProps> = ({
  setOptions(res.data);
  setPaging(res.paging);
  setSearchValue(value);
- setIsLoading(false);
  } catch (error) {
  showErrorToast(error as AxiosError);
+ } finally {
+ setIsLoading(false);
  }
  },
  [fetchOptions]
@@ -109,22 +111,22 @@ const InfiniteSelectScroll: FC<InfiniteSelectScrollProps> = ({
  }
  };
 
+ const dropdownRender = (menu: React.ReactElement) => (
+ <>
+ {menu}
+ {hasContentLoading ? <Loader size="small" /> : null}
+ </>
+ );
+
  return (
  <Select
  autoFocus
  showSearch
  data-testid="tag-selector"
- dropdownRender={(menu) => (
- <>
- {menu}
- {hasContentLoading ? (
- <Spin size="small" style={{ padding: '0 12px' }} />
- ) : null}
- </>
- )}
+ dropdownRender={dropdownRender}
  filterOption={false}
  mode={mode}
- notFoundContent={isLoading ? <Spin size="small" /> : null}
+ notFoundContent={isLoading ? <Loader size="small" /> : null}
  optionLabelProp="label"
  style={{ width: '100%' }}
  tagRender={tagRender}

diff --git a/...etadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx b/...etadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
@@ -23,7 +23,7 @@ import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { DataAssetsHeader } from 'components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { TagLabel, TagSource } from 'generated/type/schema';
 import { EntityFieldThreadCount } from 'interface/feed.interface';
 import { isEmpty } from 'lodash';
@@ -419,7 +419,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
  data-testid="entity-right-panel"
  flex="320px">
  <Space className="w-full" direction="vertical" size="large">
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  entityFqn={mlModelDetail.fullyQualifiedName}
  entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
  entityType={EntityType.MLMODEL}
@@ -434,7 +434,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
  onThreadLinkSelect={handleThreadLinkSelect}
  />
 
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  entityFqn={mlModelDetail.fullyQualifiedName}
  entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
  entityType={EntityType.MLMODEL}

diff --git a/...ata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/...ata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@@ -29,7 +29,7 @@ import ExecutionsTab from 'components/Execution/Execution.component';
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
 import TableTags from 'components/TableTags/TableTags.component';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import TasksDAGView from 'components/TasksDAGView/TasksDAGView';
 import { EntityField } from 'constants/Feeds.constants';
 import { compare } from 'fast-json-patch';
@@ -593,7 +593,7 @@ const PipelineDetails = ({
  data-testid="entity-right-panel"
  flex="320px">
  <Space className="w-full" direction="vertical" size="large">
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  entityFqn={pipelineFQN}
  entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
  entityType={EntityType.PIPELINE}
@@ -608,7 +608,7 @@ const PipelineDetails = ({
  onThreadLinkSelect={onThreadLinkSelect}
  />
 
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  entityFqn={pipelineFQN}
  entityThreadLink={getEntityThreadLink(entityFieldThreadCount)}
  entityType={EntityType.PIPELINE}

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx
@@ -13,7 +13,7 @@
 
 import { Button, Tooltip } from 'antd';
 import classNames from 'classnames';
-import TagsContainerInfiniteScroll from 'components/Tag/TagsContainerInfiniteScroll/TagsContainerInfiniteScroll';
+import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { DE_ACTIVE_COLOR } from 'constants/constants';
 import { EntityField } from 'constants/Feeds.constants';
 import { EntityType } from 'enums/entity.enum';
@@ -100,7 +100,7 @@ const TableTags = <T extends TableUnion>({
  <div
  className={classNames('d-flex justify-content flex-col items-start')}
  data-testid="tags-wrapper">
- <TagsContainerInfiniteScroll
+ <TagsContainerV2
  showBottomEditButton
  permission={hasTagEditAccess && !isReadOnly}
  selectedTags={tags}
@@ -147,7 +147,7 @@ const TableTags = <T extends TableUnion>({
  </div>
  )}
  </>
- </TagsContainerInfiniteScroll>
+ </TagsContainerV2>
  </div>
  </div>
  );

diff --git a/.../TagsContainerInfiniteScroll.interface.ts → ...sContainerV2/TagsContainerV2.interface.ts b/.../TagsContainerInfiniteScroll.interface.ts → ...sContainerV2/TagsContainerV2.interface.ts
@@ -16,7 +16,7 @@ import { TagSource } from 'generated/type/tagLabel';
 import { EntityTags } from 'Models';
 import { ReactElement } from 'react';
 
-export type TagsContainerInfiniteScrollProps = {
+export type TagsContainerV2Props = {
  permission: boolean;
  selectedTags: EntityTags[];
  entityType?: string;

diff --git a/...iteScroll/TagsContainerInfiniteScroll.tsx → ...s/Tag/TagsContainerV2/TagsContainerV2.tsx b/...iteScroll/TagsContainerInfiniteScroll.tsx → ...s/Tag/TagsContainerV2/TagsContainerV2.tsx
@@ -15,7 +15,6 @@ import { Button, Col, Form, Row, Space, Tooltip, Typography } from 'antd';
 import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import { AxiosError } from 'axios';
 import { TableTagsProps } from 'components/TableTags/TableTags.interface';
-import Tags from 'components/Tag/Tags/tags';
 import { DE_ACTIVE_COLOR, PAGE_SIZE } from 'constants/constants';
 import { TAG_CONSTANT, TAG_START_WITH } from 'constants/Tag.constants';
 import { EntityType } from 'enums/entity.enum';
@@ -44,10 +43,11 @@ import {
 import { ReactComponent as IconComments } from '../../../assets/svg/comment.svg';
 import { ReactComponent as IconRequest } from '../../../assets/svg/request-icon.svg';
 import TagSelectForm from '../TagsSelectForm/TagsSelectForm.component';
+import TagsV1 from '../TagsV1/TagsV1.component';
 import TagsViewer from '../TagsViewer/tags-viewer';
-import { TagsContainerInfiniteScrollProps } from './TagsContainerInfiniteScroll.interface';
+import { TagsContainerV2Props } from './TagsContainerV2.interface';
 
-const TagsContainerInfiniteScroll = ({
+const TagsContainerV2 = ({
  permission,
  selectedTags,
  entityType,
@@ -60,7 +60,7 @@ const TagsContainerInfiniteScroll = ({
  onSelectionChange,
  onThreadLinkSelect,
  children,
-}: TagsContainerInfiniteScrollProps) => {
+}: TagsContainerV2Props) => {
  const history = useHistory();
  const [form] = Form.useForm();
  const { t } = useTranslation();
@@ -79,7 +79,7 @@ const TagsContainerInfiniteScroll = ({
  );
 
  const selectedTagsInternal = useMemo(
- () => tags?.[tagType].map(({ tagFQN }) => tagFQN as string),
+ () => tags?.[tagType].map(({ tagFQN }) => tagFQN),
  [tags, tagType]
  );
 
@@ -204,12 +204,7 @@ const TagsContainerInfiniteScroll = ({
  () =>
  showAddTagButton ? (
  <span onClick={handleAddClick}>
- <Tags
- className="tw-font-semibold tw-text-primary"
- startWith={TAG_START_WITH.PLUS}
- tag={TAG_CONSTANT}
- type="border"
- />
+ <TagsV1 startWith={TAG_START_WITH.PLUS} tag={TAG_CONSTANT} />
  </span>
  ) : null,
  [showAddTagButton]
@@ -293,8 +288,7 @@ const TagsContainerInfiniteScroll = ({
  size="small"
  type="text"
  onClick={() =>
- onThreadLinkSelect &&
- onThreadLinkSelect(
+ onThreadLinkSelect?.(
  entityThreadLink ??
  getEntityFeedLink(entityType, entityFqn, 'tags')
  )
@@ -326,7 +320,7 @@ const TagsContainerInfiniteScroll = ({
  const header = useMemo(() => {
  return (
  showHeader && (
- <div className="d-flex justify-between m-b-xs">
+ <div className="d-flex justify-between m-b-xss">
  <div className="d-flex items-center">
  <Typography.Text className="right-panel-label">
  {isGlossaryType
@@ -348,7 +342,7 @@ const TagsContainerInfiniteScroll = ({
  {permission && (
  <Row gutter={8}>
  {tagType === TagSource.Classification && requestTagElement}
- {conversationThreadElement}
+ {onThreadLinkSelect && conversationThreadElement}
  </Row>
  )}
  </div>
@@ -414,4 +408,4 @@ const TagsContainerInfiniteScroll = ({
  );
 };
 
-export default TagsContainerInfiniteScroll;
+export default TagsContainerV2;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx
@@ -20,14 +20,16 @@ import { useHistory } from 'react-router-dom';
 import { getTagDisplay, getTagTooltip } from 'utils/TagsUtils';
 
 import { ReactComponent as IconTag } from 'assets/svg/classification.svg';
+import { TAG_START_WITH } from 'constants/Tag.constants';
 import { reduceColorOpacity } from 'utils/CommonUtils';
 import { ReactComponent as IconPage } from '../../../assets/svg/ic-flat-doc.svg';
+import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-primary.svg';
 import { TagsV1Props } from './TagsV1.interface';
 import './tagsV1.less';
 
 const color = '';
 
-const TagsV1 = ({ tag, showOnlyName = false }: TagsV1Props) => {
+const TagsV1 = ({ tag, startWith, showOnlyName = false }: TagsV1Props) => {
  const history = useHistory();
 
  const isGlossaryTag = useMemo(
@@ -104,7 +106,7 @@ const TagsV1 = ({ tag, showOnlyName = false }: TagsV1Props) => {
  const tagChip = useMemo(
  () => (
  <Tag
- className={classNames('tag-container-style-v1')}
+ className={classNames('tag-chip tag-chip-content')}
  data-testid="tags"
  style={{ backgroundColor: reduceColorOpacity(color, 0.1) }}
  onClick={() => redirectLink()}>
@@ -114,7 +116,24 @@ const TagsV1 = ({ tag, showOnlyName = false }: TagsV1Props) => {
  []
  );
 
- return (
+ const addTagChip = useMemo(
+ () => (
+ <Tag
+ className="tag-chip tag-chip-add-button"
+ icon={<PlusIcon height={16} name="plus" width={16} />}>
+ <Typography.Paragraph
+ className="m-0 text-xs font-medium text-primary"
+ data-testid="add-tag">
+ {getTagDisplay(tagName)}
+ </Typography.Paragraph>
+ </Tag>
+ ),
+ []
+ );
+
+ return startWith === TAG_START_WITH.PLUS ? (
+ addTagChip
+ ) : (
  <Tooltip
  className="cursor-pointer"
  mouseEnterDelay={1.5}

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.interface.ts
@@ -11,9 +11,11 @@
  * limitations under the License.
  */
 
+import { TAG_START_WITH } from 'constants/Tag.constants';
 import { TagLabel } from '../../../generated/type/tagLabel';
 
 export type TagsV1Props = {
  tag: TagLabel;
+ startWith: TAG_START_WITH;
  showOnlyName?: boolean;
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/tagsV1.less b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/tagsV1.less
@@ -13,20 +13,28 @@
 
 @import url('../../../styles/variables.less');
 
-.tag-container-style-v1 {
+.tag-chip {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
- cursor: pointer;
  justify-content: center;
+ border-radius: 4px;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.tag-chip-content {
  margin: 0 5px 4px 0;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.03);
- border-radius: 4px;
- overflow: hidden;
+}
+
+.tag-chip-add-button {
+ padding: 3px 8px;
+ background: @white;
 }
 
 .tag-color-bar {