ui: feedback part 4 (#11230)

* ui: feedback part 4

* fix: tags component ui issues

* fixed user not showing issue while updating vote

---------

Co-authored-by: karanh37 <karanh37@gmail.com>
Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx

@@ -14,12 +14,12 @@
 import { Card, Col, Row, Skeleton, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { ActivityFilters } from 'components/ActivityFeed/ActivityFeedList/ActivityFeedList.interface';
-import QueryCount from 'components/common/QueryCount/QueryCount.component';
 // css
 import classNames from 'classnames';
 import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { ROUTES } from 'constants/constants';
 import { mockTablePermission } from 'constants/mockTourData.constants';
+import { SearchIndex } from 'enums/search.enum';
 import { isEqual, isNil, isUndefined } from 'lodash';
 import { EntityTags, ExtraInfo } from 'Models';
 import React, {
@@ -31,9 +31,14 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import { searchQuery } from 'rest/searchAPI';
 import { restoreTable } from 'rest/tableAPI';
 import { getEntityId, getEntityName } from 'utils/EntityUtils';
-import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
+import { createQueryFilter } from 'utils/Query/QueryUtils';
+import {
+  FQN_SEPARATOR_CHAR,
+  WILD_CARD_CHAR,
+} from '../../constants/char.constants';
 import { EntityField } from '../../constants/Feeds.constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import { EntityInfo, EntityType, FqnPart } from '../../enums/entity.enum';
@@ -126,6 +131,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
   const [threadType, setThreadType] = useState<ThreadType>(
     ThreadType.Conversation
   );
+  const [queryCount, setQueryCount] = useState(0);
 
   const [elementRef, isInView] = useInfiniteScroll(observerOptions);
 
@@ -178,8 +184,27 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
     }
   }, [tableDetails.id, getEntityPermission, setTablePermissions]);
 
+  const fetchQueryCount = async () => {
+    try {
+      const response = await searchQuery({
+        query: WILD_CARD_CHAR,
+        pageNumber: 0,
+        pageSize: 0,
+        queryFilter: createQueryFilter([], tableDetails.id),
+        searchIndex: SearchIndex.QUERY,
+        includeDeleted: false,
+        trackTotalHits: true,
+        fetchSource: false,
+      });
+      setQueryCount(response.hits.total.value);
+    } catch (error) {
+      setQueryCount(0);
+    }
+  };
+
   useEffect(() => {
     if (tableDetails.id && !isTourPage) {
+      fetchQueryCount();
       fetchResourcePermission();
     }
 
@@ -263,6 +288,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
           tablePermissions.ViewQueries
         ),
         position: 4,
+        count: queryCount,
       },
       {
         name: t('label.profiler-amp-data-quality'),
@@ -310,7 +336,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
         position: 9,
       },
     ],
-    [tablePermissions, dataModel, feedCount]
+    [tablePermissions, dataModel, feedCount, queryCount]
   );
 
   const getFrequentlyJoinedWithTables = (): Array<
@@ -428,10 +454,6 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
     },
     { key: EntityInfo.TYPE, value: `${tableType}`, showLabel: true },
     { value: usage },
-    {
-      key: EntityInfo.QUERIES,
-      value: <QueryCount tableId={tableDetails.id} />,
-    },
     {
       key: EntityInfo.COLUMNS,
       localizationKey: 'column-plural',

openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetailsRightPanel/GlossaryDetailsRightPanel.component.tsx

@@ -98,7 +98,7 @@ const GlossaryDetailsRightPanel = ({
         <Col span="24">
           <div className="d-flex items-center m-b-xss">
             <Typography.Text
-              className="glossary-subheading"
+              className="right-panel-label"
               data-testid="glossary-owner-name">
               {t('label.owner')}
             </Typography.Text>
@@ -145,9 +145,14 @@ const GlossaryDetailsRightPanel = ({
           )}
         </Col>
         <Col span="24">
-          <div className="d-flex items-center m-b-xss">
+          <div
+            className={`d-flex items-center ${
+              selectedData.reviewers && selectedData.reviewers.length > 0
+                ? 'm-b-xss'
+                : ''
+            }`}>
             <Typography.Text
-              className="glossary-subheading"
+              className="right-panel-label"
               data-testid="glossary-reviewer-heading-name">
               {t('label.reviewer-plural')}
             </Typography.Text>

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/GlossaryTermReferences.tsx

@@ -87,7 +87,7 @@ const GlossaryTermReferences = ({
           className="w-full"
           data-testid={`section-${t('label.reference-plural')}`}>
           <div className="flex-center">
-            <Typography.Text className="glossary-subheading">
+            <Typography.Text className="right-panel-label">
               {t('label.reference-plural')}
             </Typography.Text>
             {references.length > 0 && permissions.EditAll && (

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/GlossaryTermSynonyms.tsx

@@ -93,7 +93,7 @@ const GlossaryTermSynonyms = ({
   return (
     <div className="flex flex-col m-r-xs" data-testid="synonyms-container">
       <div className="d-flex items-center">
-        <Typography.Text className="glossary-subheading">
+        <Typography.Text className="right-panel-label">
           {t('label.synonym-plural')}
         </Typography.Text>
         {permissions.EditAll && synonyms.length > 0 && (

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/RelatedTerms.tsx

@@ -137,7 +137,7 @@ const RelatedTerms = ({
   return (
     <div className="flex flex-col gap-3" data-testid="related-term-container">
       <div className="d-flex items-center">
-        <Typography.Text className="glossary-subheading">
+        <Typography.Text className="right-panel-label">
           {t('label.related-term-plural')}
         </Typography.Text>
         {permissions.EditAll && selectedOption.length > 0 && (

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx

@@ -90,15 +90,7 @@ const WhatsNewAlert = () => {
               <Button
                 className="flex-center"
                 data-testid="close-whats-new-alert"
-                icon={
-                  <CloseIcon
-                    className="tw-self-start"
-                    color="#fff"
-                    height={12}
-                    width={12}
-                  />
-                }
-                size="small"
+                icon={<CloseIcon color="#fff" height={12} width={12} />}
                 type="text"
                 onClick={handleCancel}
               />

openmetadata-ui/src/main/resources/ui/src/components/TableQueries/QueryCard.tsx

@@ -15,7 +15,9 @@ import { Button, Card, Col, Row, Space, Typography } from 'antd';
 import classNames from 'classnames';
 import { getTableTabPath, getUserPath, PIPE_SYMBOL } from 'constants/constants';
 import { QUERY_DATE_FORMAT, QUERY_LINE_HEIGHT } from 'constants/Query.constant';
+import { useClipboard } from 'hooks/useClipBoard';
 import { isUndefined, split } from 'lodash';
+import { Duration } from 'luxon';
 import Qs from 'qs';
 import React, { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,16 +29,12 @@ import { CSMode } from '../../enums/codemirror.enum';
 import SchemaEditor from '../schema-editor/SchemaEditor';
 import QueryCardExtraOption from './QueryCardExtraOption/QueryCardExtraOption.component';
 import QueryUsedByOtherTable from './QueryUsedByOtherTable/QueryUsedByOtherTable.component';
+import './table-queries.style.less';
 import { QueryCardProp } from './TableQueries.interface';
 import { ReactComponent as ExitFullScreen } from '/assets/svg/exit-full-screen.svg';
 import { ReactComponent as FullScreen } from '/assets/svg/full-screen.svg';
 import { ReactComponent as CopyIcon } from '/assets/svg/icon-copy.svg';
 
-// css import
-import { useClipboard } from 'hooks/useClipBoard';
-import { Duration } from 'luxon';
-import './table-queries.style.less';
-
 const { Text } = Typography;
 
 const QueryCard: FC<QueryCardProp> = ({

openmetadata-ui/src/main/resources/ui/src/components/TableQueries/TableQueries.tsx

@@ -146,7 +146,7 @@ const TableQueries: FC<TableQueriesProp> = ({
     try {
       await updateQueryVote(id || '', data);
       const response = await getQueryById(id || '', {
-        fields: 'owner,votes,tags,queryUsedIn',
+        fields: 'owner,votes,tags,queryUsedIn,users',
       });
       setSelectedQuery(response);
       setTableQueries((pre) => {

openmetadata-ui/src/main/resources/ui/src/components/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx

@@ -88,9 +88,9 @@ const TableQueryRightPanel = ({
       ) : (
         <Row className="m-y-md p-x-md" gutter={[16, 40]}>
           <Col span={24}>
-            <Space className="relative" direction="vertical">
+            <Space className="relative" direction="vertical" size={4}>
               <Space align="center" className="w-full" size={0}>
-                <Typography.Text className="m-b-xs tw-text-base font-medium">
+                <Typography.Text className="right-panel-label">
                   {t('label.owner')}
                 </Typography.Text>
 
@@ -135,9 +135,9 @@ const TableQueryRightPanel = ({
             </Space>
           </Col>
           <Col span={24}>
-            <Space direction="vertical">
+            <Space direction="vertical" size={4}>
               <Space align="center" size={0}>
-                <Typography.Text className="m-b-xs tw-text-base font-medium">
+                <Typography.Text className="right-panel-label">
                   {t('label.description')}
                 </Typography.Text>
 
@@ -171,9 +171,9 @@ const TableQueryRightPanel = ({
             />
           </Col>
           <Col span={24}>
-            <Space className="m-b-md" direction="vertical">
+            <Space className="m-b-md" direction="vertical" size={4}>
               <Typography.Text
-                className="m-b-xs tw-text-base font-medium"
+                className="right-panel-label"
                 data-testid="users">
                 {t('label.used-by')}
               </Typography.Text>

openmetadata-ui/src/main/resources/ui/src/components/TableQueries/table-queries.style.less

@@ -36,7 +36,7 @@
   }
 }
 .query-card-container.selected {
-  border: 1px solid @info-color;
+  border-left: 3px solid @info-color;
 }
 
 .query-right-panel {

openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx

@@ -116,6 +116,7 @@ const Tags: FunctionComponent<TagProps> = ({
             display: 'inline-block',
             whiteSpace: 'normal',
             wordBreak: 'break-all',
+            color: 'inherit',
           }}>
           {getTagDisplay(tagName)}
         </Typography.Paragraph>

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx

@@ -180,9 +180,9 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
       {showTags && !editable && (
         <Space wrap align="center" size={4}>
           {showAddTagButton && (
-            <span className="tw-text-primary" onClick={onAddButtonClick}>
+            <span onClick={onAddButtonClick}>
               <Tags
-                className="tw-font-semibold"
+                className="tw-font-semibold tw-text-primary"
                 startWith={TAG_START_WITH.PLUS}
                 tag={TAG_CONSTANT}
                 type="border"

openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.component.tsx

@@ -99,7 +99,7 @@ const TagsInput: React.FC<Props> = ({ tags = [], editable, onTagsUpdate }) => {
   return (
     <div className="tags-input-container" data-testid="tags-input-container">
       <div className="d-flex items-center">
-        <Typography.Text className="glossary-tags-subheading">
+        <Typography.Text className="right-panel-label">
           {t('label.tag-plural')}
         </Typography.Text>
         {editable && tags.length > 0 && (

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -46,6 +46,13 @@
   background-color: @error-light-color;
 }
 
+// used in glossary + query right panel, to keep both consistent
+.right-panel-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: @text-grey-muted;
+}
+
 // Left and Right Panel shadow color
 .panel-shadow-color {
   box-shadow: @panels-shadow-color;

openmetadata-ui/src/main/resources/ui/src/styles/components/glossary.less

@@ -110,12 +110,6 @@
   }
 }
 
-.glossary-subheading {
-  font-size: 14px;
-  font-weight: 500;
-  color: @text-grey-muted;
-}
-
 .glossary-select {
   width: calc(100% - 64px);
 }
@@ -125,6 +119,9 @@
     margin-top: 8px;
     margin-right: 8px;
   }
+  .tags-component-container {
+    margin-top: 8px;
+  }
 }
 
 .glossary-form-label {
@@ -152,9 +149,3 @@
   font-weight: 500;
   color: @text-grey-muted;
 }
-
-.glossary-tags-subheading {
-  font-size: 14px;
-  font-weight: 500;
-  color: @text-grey-muted;
-}