Fix #2784 UI : Remove Tags API call from entities details page. (#2786)

2025-12-29 08:29:09 +00:00 · 2022-02-16 23:14:31 +05:30 · 2022-02-16 23:14:31 +05:30 · 20594dd607
commit 20594dd607
parent ac59a092ea
13 changed files with 65 additions and 63 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@ -30,6 +30,7 @@ import {
 } from '../../utils/CommonUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { getTagsWithoutTier } from '../../utils/TableUtils';
+import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 import Description from '../common/description/Description';
 import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
@ -49,7 +50,6 @@ const DashboardDetails = ({
  followDashboardHandler,
  unfollowDashboardHandler,
  owner,
-  tagList,
  tier,
  slashedDashboardName,
  activeTab,
@ -90,6 +90,9 @@ const DashboardDetails = ({
    chart: ChartType;
    index: number;
  }>();
+  const [tagList, setTagList] = useState<Array<string>>([]);
+  const [isTagLoading, setIsTagLoading] = useState<boolean>(false);
+
  const hasEditAccess = () => {
    if (owner?.type === 'user') {
      return owner.id === getCurrentUserId();
@ -307,6 +310,17 @@ const DashboardDetails = ({
    }
  };

+  const fetchTags = () => {
+    setIsTagLoading(true);
+    getTagCategories()
+      .then((res) => {
+        setTagList(getTaglist(res.data));
+      })
+      .finally(() => {
+        setIsTagLoading(false);
+      });
+  };
+
  useEffect(() => {
    if (isAuthDisabled && users.length && followers.length) {
      setFollowersData(followers);
@ -332,7 +346,6 @@ const DashboardDetails = ({
            hasEditAccess={hasEditAccess()}
            isFollowing={isFollowing}
            owner={owner}
-            tagList={tagList}
            tags={dashboardTags}
            tagsHandler={onTagUpdate}
            tier={tier || ''}
@ -449,6 +462,7 @@ const DashboardDetails = ({
                              className="tw-group tw-relative tableBody-cell"
                              onClick={() => {
                                if (!editChartTags) {
+                                  fetchTags();
                                  handleEditChartTag(chart, index);
                                }
                              }}>
@ -476,7 +490,12 @@ const DashboardDetails = ({
                                  trigger="click">
                                  <TagsContainer
                                    editable={editChartTags?.index === index}
+                                    isLoading={
+                                      isTagLoading &&
+                                      editChartTags?.index === index
+                                    }
                                    selectedTags={chart.tags as EntityTags[]}
+                                    size="small"
                                    tagList={tagList}
                                    type="label"
                                    onCancel={() => {
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.interface.ts
@ -40,7 +40,6 @@ export interface DashboardDetailsProps {
  charts: Array<ChartType>;
  serviceType: string;
  dashboardUrl: string;
-  tagList: Array<string>;
  users: Array<User>;
  dashboardDetails: Dashboard;
  entityName: string;
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
@ -117,6 +117,7 @@ const EntityTable = ({
  }>();

  const [allTags, setAllTags] = useState<Array<string>>([]);
+  const [isTagLoading, setIsTagLoading] = useState<boolean>(false);

  const getDataTypeString = (dataType: string): string => {
    switch (upperCase(dataType)) {
@ -147,11 +148,16 @@ const EntityTable = ({
  };

  const fetchTags = () => {
-    getTagCategories().then((res) => {
-      if (res.data) {
-        setAllTags(getTaglist(res.data));
-      }
-    });
+    setIsTagLoading(true);
+    getTagCategories()
+      .then((res) => {
+        if (res.data) {
+          setAllTags(getTaglist(res.data));
+        }
+      })
+      .finally(() => {
+        setIsTagLoading(false);
+      });
  };

  const handleEditColumn = (column: Column, index: number): void => {
@ -300,7 +306,6 @@ const EntityTable = ({
  }, [searchText, tableColumns]);

  useEffect(() => {
-    fetchTags();
    toggleAllRowsExpanded(isReadOnly);
  }, []);

@ -431,6 +436,7 @@ const EntityTable = ({
                              onClick={() => {
                                if (!editColumnTag) {
                                  handleEditColumnTag(row.original, row.id);
+                                  fetchTags();
                                }
                              }}>
                              <NonAdminAction
@ -441,7 +447,12 @@ const EntityTable = ({
                                trigger="click">
                                <TagsContainer
                                  editable={editColumnTag?.index === row.id}
+                                  isLoading={
+                                    isTagLoading &&
+                                    editColumnTag?.index === row.id
+                                  }
                                  selectedTags={cell.value || []}
+                                  size="small"
                                  tagList={allTags}
                                  type="label"
                                  onCancel={() => {
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@ -44,7 +44,6 @@ import { PipeLineDetailsProp } from './PipelineDetails.interface';
 const PipelineDetails = ({
  entityName,
  owner,
-  tagList,
  tier,
  slashedPipelineName,
  pipelineTags,
@ -290,7 +289,6 @@ const PipelineDetails = ({
            hasEditAccess={hasEditAccess()}
            isFollowing={isFollowing}
            owner={owner}
-            tagList={tagList}
            tags={pipelineTags}
            tagsHandler={onTagUpdate}
            tier={tier}
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.interface.ts
@ -36,7 +36,6 @@ export interface PipeLineDetailsProp {
  serviceType: string;
  pipelineUrl: string;
  entityName: string;
-  tagList: Array<string>;
  users: Array<User>;
  pipelineDetails: Pipeline;
  activeTab: number;
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
@ -39,7 +39,6 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
  retentionSize,
  schemaText,
  schemaType,
-  tagList,
  topicTags,
  activeTab,
  entityName,
@ -286,7 +285,6 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
          hasEditAccess={hasEditAccess()}
          isFollowing={isFollowing}
          owner={owner}
-          tagList={tagList}
          tags={topicTags}
          tagsHandler={onTagUpdate}
          tier={tier ?? ''}
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.interface.ts
@ -18,7 +18,6 @@ import { TagLabel } from '../../generated/type/tagLabel';
 import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface';

 export interface TopicDetailsProps {
-  tagList: Array<string>;
  version?: string;
  schemaText: string;
  schemaType: string;
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@ -23,6 +23,7 @@ import { getHtmlForNonAdminAction } from '../../../utils/CommonUtils';
 import { getInfoElements } from '../../../utils/EntityUtils';
 import SVGIcons from '../../../utils/SvgUtils';
 import { getFollowerDetail } from '../../../utils/TableUtils';
+import { getTagCategories, getTaglist } from '../../../utils/TagsUtils';
 import TagsContainer from '../../tags-container/tags-container';
 import Tags from '../../tags/tags';
 import Avatar from '../avatar/Avatar';
@ -41,7 +42,6 @@ type Props = {
  tier: TagLabel;
  tags: Array<EntityTags>;
  isTagEditable?: boolean;
-  tagList?: Array<string>;
  owner?: TableDetail['owner'];
  hasEditAccess?: boolean;
  followersList: Array<User>;
@ -63,7 +63,6 @@ const EntityPageInfo = ({
  tier,
  tags,
  isTagEditable = false,
-  tagList = [],
  owner,
  hasEditAccess,
  tagsHandler,
@ -81,6 +80,8 @@ const EntityPageInfo = ({
    tagsHandler?.(selectedTags?.map((tag) => tag.tagFQN));
    setIsEditable(false);
  };
+  const [tagList, setTagList] = useState<Array<string>>([]);
+  const [isTagLoading, setIsTagLoading] = useState<boolean>(false);

  const getSelectedTags = () => {
    return tier?.tagFQN
@ -175,6 +176,16 @@ const EntityPageInfo = ({
      </div>
    );
  };
+  const fetchTags = () => {
+    setIsTagLoading(true);
+    getTagCategories()
+      .then((res) => {
+        setTagList(getTaglist(res.data));
+      })
+      .finally(() => {
+        setIsTagLoading(false);
+      });
+  };

  useEffect(() => {
    setEntityFollowers(followersList);
@ -349,11 +360,16 @@ const EntityPageInfo = ({
            trigger="click">
            <div
              className="tw-inline-block"
-              onClick={() => setIsEditable(true)}>
+              onClick={() => {
+                fetchTags();
+                setIsEditable(true);
+              }}>
              <TagsContainer
                editable={isEditable}
+                isLoading={isTagLoading}
                selectedTags={getSelectedTags()}
                showTags={!isTagEditable}
+                size="small"
                tagList={tagList}
                onCancel={() => {
                  handleTagSelection();
--- a/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.tsx
@ -15,6 +15,7 @@ import classNames from 'classnames';
 import { isEmpty, isNull } from 'lodash';
 import { EntityTags } from 'Models';
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
+import { withLoader } from '../../hoc/withLoader';
 import { Button } from '../buttons/Button/Button';
 import DropDownList from '../dropdown/DropDownList';
 import Tags from '../tags/tags';
@ -255,4 +256,4 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
  );
 };

-export default TagsContainer;
+export default withLoader<TagsContainerProps>(TagsContainer);
--- a/openmetadata-ui/src/main/resources/ui/src/hoc/withLoader.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/hoc/withLoader.tsx
@ -22,7 +22,11 @@ export interface ComponentProps<T> {
 export function withLoader<T>(Component: ComponentType<T>) {
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const WithLoader = (props: T & PropsWithChildren<ComponentProps<any>>) => {
-    return props.isLoading ? <Loader /> : <Component {...(props as T)} />;
+    return props.isLoading ? (
+      <Loader size={props.size} />
+    ) : (
+      <Component {...(props as T)} />
+    );
  };

  WithLoader.displayName =
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
@ -72,7 +72,6 @@ import {
  getTagsWithoutTier,
  getTierTags,
 } from '../../utils/TableUtils';
-import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 type ChartType = {
  displayName: string;
 } & Chart;
@ -81,7 +80,6 @@ const DashboardDetailsPage = () => {
  const USERId = getCurrentUserId();
  const history = useHistory();
  const showToast = useToastContext();
-  const [tagList, setTagList] = useState<Array<string>>([]);
  const { dashboardFQN, tab } = useParams() as Record<string, string>;
  const [dashboardDetails, setDashboardDetails] = useState<Dashboard>(
    {} as Dashboard
@ -148,14 +146,6 @@ const DashboardDetailsPage = () => {
    ) as unknown as Promise<AxiosResponse>;
  };

-  const fetchTags = () => {
-    getTagCategories().then((res) => {
-      if (res.data) {
-        setTagList(getTaglist(res.data));
-      }
-    });
-  };
-
  const fetchCharts = async (charts: Dashboard['charts']) => {
    let chartsData: ChartType[] = [];
    let promiseArr: Array<AxiosPromise> = [];
@ -499,10 +489,6 @@ const DashboardDetailsPage = () => {
    fetchDashboardDetail(dashboardFQN);
  }, [dashboardFQN]);

-  useEffect(() => {
-    fetchTags();
-  }, []);
-
  return (
    <>
      {isLoading ? (
@ -539,7 +525,6 @@ const DashboardDetailsPage = () => {
          setActiveTabHandler={activeTabHandler}
          settingsUpdateHandler={settingsUpdateHandler}
          slashedDashboardName={slashedDashboardName}
-          tagList={tagList}
          tagUpdateHandler={onTagUpdate}
          tier={tier as TagLabel}
          unfollowDashboardHandler={unfollowDashboard}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
@ -74,13 +74,12 @@ import {
  getTagsWithoutTier,
  getTierTags,
 } from '../../utils/TableUtils';
-import { getTagCategories, getTaglist } from '../../utils/TagsUtils';

 const PipelineDetailsPage = () => {
  const USERId = getCurrentUserId();
  const history = useHistory();
  const showToast = useToastContext();
-  const [tagList, setTagList] = useState<Array<string>>([]);
+
  const { pipelineFQN, tab } = useParams() as Record<string, string>;
  const [pipelineDetails, setPipelineDetails] = useState<Pipeline>(
    {} as Pipeline
@ -149,14 +148,6 @@ const PipelineDetailsPage = () => {
    ) as unknown as Promise<AxiosResponse>;
  };

-  const fetchTags = () => {
-    getTagCategories().then((res) => {
-      if (res.data) {
-        setTagList(getTaglist(res.data));
-      }
-    });
-  };
-
  const getLineageData = () => {
    setIsLineageLoading(true);
    getLineageByFQN(pipelineFQN, EntityType.PIPELINE)
@ -441,10 +432,6 @@ const PipelineDetailsPage = () => {
    fetchPipelineDetail(pipelineFQN);
  }, [pipelineFQN]);

-  useEffect(() => {
-    fetchTags();
-  }, []);
-
  return (
    <>
      {isLoading ? (
@ -478,7 +465,6 @@ const PipelineDetailsPage = () => {
          setActiveTabHandler={activeTabHandler}
          settingsUpdateHandler={settingsUpdateHandler}
          slashedPipelineName={slashedPipelineName}
-          tagList={tagList}
          tagUpdateHandler={onTagUpdate}
          taskUpdateHandler={onTaskUpdate}
          tasks={tasks}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
@ -50,7 +50,6 @@ import {
  getTagsWithoutTier,
  getTierTags,
 } from '../../utils/TableUtils';
-import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 import {
  getCurrentTopicTab,
  topicDetailsTabs,
@ -61,7 +60,6 @@ const TopicDetailsPage: FunctionComponent = () => {
  const showToast = useToastContext();
  const history = useHistory();

-  const [tagList, setTagList] = useState<Array<string>>([]);
  const { topicFQN, tab } = useParams() as Record<string, string>;
  const [topicDetails, setTopicDetails] = useState<Topic>({} as Topic);
  const [topicId, setTopicId] = useState<string>('');
@ -116,12 +114,6 @@ const TopicDetailsPage: FunctionComponent = () => {
    ) as unknown as Promise<AxiosResponse>;
  };

-  const fetchTags = () => {
-    getTagCategories().then((res) => {
-      setTagList(getTaglist(res.data));
-    });
-  };
-
  const fetchTopicDetail = (topicFQN: string) => {
    setLoading(true);
    getTopicByFqn(topicFQN, ['owner', 'followers', 'tags'])
@ -307,10 +299,6 @@ const TopicDetailsPage: FunctionComponent = () => {
    fetchTopicDetail(topicFQN);
  }, [topicFQN]);

-  useEffect(() => {
-    fetchTags();
-  }, []);
-
  return (
    <>
      {isLoading ? (
@ -339,7 +327,6 @@ const TopicDetailsPage: FunctionComponent = () => {
          setActiveTabHandler={activeTabHandler}
          settingsUpdateHandler={settingsUpdateHandler}
          slashedTopicName={slashedTopicName}
-          tagList={tagList}
          tagUpdateHandler={onTagUpdate}
          tier={tier as TagLabel}
          topicDetails={topicDetails}