Fix #2778 UI : Add Queries tab for table details page. (#2793)

* Fix #2778 UI : Add Queries tab for table details page.

* minor change

* Changing Table Queries text to Queries.

* Addressing comments

* Adding last run by user detail

* Minor UI Changes

* Removed icon

* Changing Query card style.

* Changing Icons

openmetadata-ui/src/main/resources/ui/src/assets/svg/icon-copy.svg

@@ -0,0 +1,3 @@
+<svg width="448" height="512" viewBox="0 0 448 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M336 0C334.016 0 144 0 144 0C110.144 0 80.0003 31.0562 80.0003 64.0004L61.5042 64.4323C27.664 64.4323 0 95.0559 0 128V448C0 480.945 30.1441 512 64.0004 512H304C337.856 512 368 480.945 368 448H384C417.856 448 448 416.945 448 384.001V128.384L336 0ZM304 480.001H64.0004C47.2004 480.001 32.0005 464.306 32.0005 448V128C32.0005 111.696 45.6807 96.528 62.4807 96.528L80.0003 96.0002V384.001C80.0003 416.945 110.144 448 144 448H336C336 464.305 320.8 480.001 304 480.001ZM416.001 384.001C416.001 400.304 400.8 416 384 416H144C127.2 416 112 400.304 112 384.001V64.0004C112 47.6967 127.2 32.0005 144 32.0005H304C303.744 68.8486 304 96.4006 304 96.4006C304 129.649 333.92 160.001 368 160.001C368 160.001 384.993 160.001 416.001 160.001V384.001ZM368 128C350.961 128 336 97.0404 336 80.4322C336 80.4322 336 63.5999 336 32.4961V32.4639L416.001 128H368ZM336 224.289H192C183.168 224.289 176 231.441 176 240.272C176 249.104 183.168 256.256 192 256.256H336C344.832 256.256 352 249.104 352 240.272C352 231.441 344.832 224.289 336 224.289ZM336 304.208H192C183.168 304.208 176 311.36 176 320.191C176 329.024 183.168 336.176 192 336.176H336C344.832 336.176 352 329.024 352 320.191C352 311.36 344.832 304.208 336 304.208Z" fill="#37352F"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/assets/svg/icon-down.svg

@@ -0,0 +1,3 @@
+<svg width="513" height="513" viewBox="0 0 513 513" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M437.021 74.9809C389.011 26.9715 323.897 0 256.001 0C188.105 0 122.99 26.9715 74.9809 74.9809C26.9715 122.99 0 188.105 0 256.001C0 323.897 26.9715 389.011 74.9809 437.021C122.99 485.03 188.105 512.002 256.001 512.002C323.897 512.002 389.011 485.03 437.021 437.021C485.03 389.011 512.002 323.897 512.002 256.001C512.002 188.105 485.03 122.99 437.021 74.9809ZM256.001 480.001C132.487 480.001 32.0009 379.515 32.0009 256.001C32.0009 132.487 132.487 32.0009 256.001 32.0009C379.515 32.0009 480.001 132.487 480.001 256.001C480.001 379.515 379.515 480.001 256.001 480.001V480.001ZM368.635 204.028C371.635 207.029 373.321 211.098 373.321 215.341C373.321 219.585 371.635 223.654 368.635 226.655L267.314 327.975C264.313 330.975 260.244 332.661 256.001 332.661C251.758 332.661 247.688 330.975 244.688 327.975L143.368 226.655C140.397 223.648 138.737 219.588 138.75 215.362C138.763 211.135 140.448 207.085 143.436 204.096C146.425 201.108 150.475 199.423 154.702 199.41C158.928 199.397 162.988 201.057 165.995 204.028L256.001 294.034L346.008 204.028C349.008 201.027 353.078 199.342 357.321 199.342C361.565 199.342 365.634 201.027 368.635 204.028V204.028Z" fill="#37352F"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/assets/svg/icon-up.svg

@@ -0,0 +1,3 @@
+<svg width="513" height="513" viewBox="0 0 513 513" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M437.021 437.021C389.011 485.03 323.897 512.002 256.001 512.002C188.105 512.002 122.99 485.03 74.9809 437.021C26.9715 389.011 0 323.897 0 256.001C0 188.105 26.9715 122.99 74.9809 74.9809C122.99 26.9714 188.105 0 256.001 0C323.897 0 389.011 26.9714 437.021 74.9809C485.03 122.99 512.002 188.105 512.002 256.001C512.002 323.897 485.03 389.011 437.021 437.021ZM256.001 32.0009C132.487 32.0009 32.0009 132.487 32.0009 256.001C32.0009 379.515 132.487 480.001 256.001 480.001C379.515 480.001 480.001 379.515 480.001 256.001C480.001 132.487 379.515 32.0009 256.001 32.0009V32.0009ZM368.635 307.974C371.635 304.973 373.321 300.904 373.321 296.66C373.321 292.417 371.635 288.347 368.635 285.347L267.314 184.027C264.313 181.027 260.244 179.341 256.001 179.341C251.758 179.341 247.688 181.027 244.688 184.027L143.368 285.347C140.397 288.354 138.737 292.414 138.75 296.64C138.763 300.867 140.448 304.917 143.436 307.905C146.425 310.894 150.475 312.579 154.702 312.592C158.928 312.604 162.988 310.944 165.995 307.974L256.001 217.968L346.008 307.974C349.008 310.974 353.078 312.66 357.321 312.66C361.565 312.66 365.634 310.974 368.635 307.974V307.974Z" fill="#37352F"/>
+</svg>

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

@@ -47,6 +47,7 @@ import SchemaEditor from '../schema-editor/SchemaEditor';
 import SchemaTab from '../SchemaTab/SchemaTab.component';
 import TableProfiler from '../TableProfiler/TableProfiler.component';
 import TableProfilerGraph from '../TableProfiler/TableProfilerGraph.component';
+import TableQueries from '../TableQueries/TableQueries';
 import { DatasetDetailsProps } from './DatasetDetails.interface';
 
 const DatasetDetails: React.FC<DatasetDetailsProps> = ({
@@ -85,6 +86,8 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
   entityLineageHandler,
   isLineageLoading,
   isSampleDataLoading,
+  isQueriesLoading,
+  tableQueries,
 }: DatasetDetailsProps) => {
   const { isAuthDisabled } = useAuth();
   const [isEdit, setIsEdit] = useState(false);
@@ -150,6 +153,17 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
       isProtected: false,
       position: 2,
     },
+    {
+      name: 'Queries',
+      icon: {
+        alt: 'table_queries',
+        name: 'table_queries',
+        title: 'Table Queries',
+        selectedName: '',
+      },
+      isProtected: false,
+      position: 3,
+    },
     {
       name: 'Profiler',
       icon: {
@@ -159,7 +173,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
         selectedName: 'icon-profilercolor',
       },
       isProtected: false,
-      position: 3,
+      position: 4,
     },
     {
       name: 'Lineage',
@@ -170,7 +184,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
         selectedName: 'icon-lineagecolor',
       },
       isProtected: false,
-      position: 4,
+      position: 5,
     },
     {
       name: 'DBT',
@@ -182,7 +196,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
       },
       isProtected: false,
       isHidden: !dataModel?.sql,
-      position: 5,
+      position: 6,
     },
     {
       name: 'Manage',
@@ -195,7 +209,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
       isProtected: true,
       isHidden: deleted,
       protectedState: !owner || hasEditAccess(),
-      position: 6,
+      position: 7,
     },
   ];
 
@@ -471,6 +485,14 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
               </div>
             )}
             {activeTab === 3 && (
+              <div>
+                <TableQueries
+                  isLoading={isQueriesLoading}
+                  queries={tableQueries}
+                />
+              </div>
+            )}
+            {activeTab === 4 && (
               <div>
                 <TableProfiler
                   columns={columns.map((col) => ({
@@ -481,7 +503,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                 />
               </div>
             )}
-            {activeTab === 4 && (
+            {activeTab === 5 && (
               <div
                 className={classNames(
                   location.pathname.includes(ROUTES.TOUR)
@@ -503,7 +525,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                 />
               </div>
             )}
-            {activeTab === 5 && Boolean(dataModel?.sql) && (
+            {activeTab === 6 && Boolean(dataModel?.sql) && (
               <div className="tw-border tw-border-main tw-rounded-md tw-py-4 tw-h-full cm-h-full">
                 <SchemaEditor
                   className="tw-h-full"
@@ -512,7 +534,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                 />
               </div>
             )}
-            {activeTab === 6 && !deleted && (
+            {activeTab === 7 && !deleted && (
               <div>
                 <ManageTab
                   currentTier={tier?.tagFQN}

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.interface.ts

@@ -44,6 +44,7 @@ export interface DatasetDetailsProps {
   owner: DatasetOwner;
   description: string;
   tableProfile: Table['tableProfile'];
+  tableQueries: Table['tableQueries'];
   columns: Table['columns'];
   tier: TagLabel;
   sampleData: TableData;
@@ -54,6 +55,7 @@ export interface DatasetDetailsProps {
   deleted?: boolean;
   isLineageLoading?: boolean;
   isSampleDataLoading?: boolean;
+  isQueriesLoading?: boolean;
   setActiveTabHandler: (value: number) => void;
   followTableHandler: () => void;
   unfollowTableHandler: () => void;

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

@@ -77,6 +77,7 @@ const DatasetDetailsProps = {
   addLineageHandler: jest.fn(),
   removeLineageHandler: jest.fn(),
   entityLineageHandler: jest.fn(),
+  tableQueries: [],
 };
 jest.mock('../ManageTab/ManageTab.component', () => {
   return jest.fn().mockReturnValue(<p>ManageTab</p>);

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

@@ -0,0 +1,130 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import classNames from 'classnames';
+import React, { FC, HTMLAttributes, useState } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { CSMode } from '../../enums/codemirror.enum';
+import { SQLQuery, Table } from '../../generated/entity/data/table';
+import { withLoader } from '../../hoc/withLoader';
+import SVGIcons, { Icons } from '../../utils/SvgUtils';
+import { Button } from '../buttons/Button/Button';
+import SchemaEditor from '../schema-editor/SchemaEditor';
+
+interface TableQueriesProp extends HTMLAttributes<HTMLDivElement> {
+  queries: Table['tableQueries'];
+}
+interface QueryCardProp extends HTMLAttributes<HTMLDivElement> {
+  query: SQLQuery;
+}
+
+const QueryCard: FC<QueryCardProp> = ({ className, query }) => {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const [, setIsCopied] = useState<boolean>(false);
+  const [showCopiedText, setShowCopiedText] = useState<boolean>(false);
+
+  const copiedTextHandler = () => {
+    setShowCopiedText(true);
+    setTimeout(() => {
+      setShowCopiedText(false);
+    }, 1000);
+  };
+
+  return (
+    <div className={classNames('tw-bg-white tw-py-3 tw-mb-3', className)}>
+      <div
+        className="tw-cursor-pointer"
+        onClick={() => setExpanded((pre) => !pre)}>
+        <div className="tw-flex tw-py-1 tw-justify-between">
+          <p>
+            Last run by{' '}
+            <span className="tw-font-medium">
+              {query.user?.displayName ?? query.user?.name}
+            </span>{' '}
+            and took{' '}
+            <span className="tw-font-medium">{query.duration} seconds</span>
+          </p>
+
+          <button>
+            {expanded ? (
+              <SVGIcons
+                alt="copy"
+                className="tw-mr-4"
+                icon={Icons.ICON_UP}
+                width="16px"
+              />
+            ) : (
+              <SVGIcons
+                alt="copy"
+                className="tw-mr-4"
+                icon={Icons.ICON_DOWN}
+                width="16px"
+              />
+            )}
+          </button>
+        </div>
+      </div>
+      <div className="tw-border tw-border-main tw-rounded-md tw-p-px">
+        <div
+          className={classNames('tw-overflow-hidden tw-relative', {
+            'tw-max-h-10': !expanded,
+          })}>
+          <CopyToClipboard
+            text={query.query ?? ''}
+            onCopy={(_text, result) => {
+              setIsCopied(result);
+              if (result) copiedTextHandler();
+            }}>
+            <Button
+              className="tw-h-8 tw-ml-4 tw-absolute tw-right-4 tw-z-9999 tw--mt-px"
+              data-testid="copy-query"
+              size="custom"
+              theme="default"
+              title="Copy"
+              variant="text">
+              {showCopiedText ? (
+                <span className="tw-mr-1 tw-text-success tw-bg-success-lite tw-px-1 tw-rounded-md">
+                  Copied!
+                </span>
+              ) : null}
+              <SVGIcons alt="copy" icon={Icons.COPY} width="16px" />
+            </Button>
+          </CopyToClipboard>
+
+          <SchemaEditor
+            editorClass={classNames('table-query-editor')}
+            mode={{ name: CSMode.SQL }}
+            options={{
+              styleActiveLine: false,
+            }}
+            value={query.query ?? ''}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const TableQueries: FC<TableQueriesProp> = ({ queries, className }) => {
+  return (
+    <div className={className}>
+      <div className="tw-my-6">
+        {queries?.map((query, index) => (
+          <QueryCard key={index} query={query} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default withLoader<TableQueriesProp>(TableQueries);

openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx

@@ -29,6 +29,7 @@ const PopOver: React.FC<PopOverProp> = ({
   title,
   trigger,
   theme = 'dark',
+  sticky = false,
 }): JSX.Element => {
   return (
     <Tooltip
@@ -39,6 +40,7 @@ const PopOver: React.FC<PopOverProp> = ({
       html={html}
       position={position}
       size={size}
+      sticky={sticky}
       theme={theme}
       title={title || ''}
       trigger={trigger}>

openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts

@@ -30,4 +30,5 @@ export type PopOverProp = {
   className?: string;
   delay?: number;
   hideDelay?: number;
+  sticky?: boolean;
 };

openmetadata-ui/src/main/resources/ui/src/components/schema-editor/SchemaEditor.tsx

@@ -39,12 +39,18 @@ const SchemaEditor = ({
     name: CSMode.JAVASCRIPT,
     json: true,
   },
+  options,
+  editorClass,
 }: {
   value: string;
   className?: string;
   mode?: Mode;
+  options?: {
+    [key: string]: string | boolean | Array<string>;
+  };
+  editorClass?: string;
 }) => {
-  const options = {
+  const defaultOptions = {
     tabSize: JSON_TAB_SIZE,
     indentUnit: JSON_TAB_SIZE,
     indentWithTabs: false,
@@ -57,6 +63,7 @@ const SchemaEditor = ({
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
     mode,
     readOnly: true,
+    ...options,
   };
   const [internalValue, setInternalValue] = useState(
     getSchemaEditorValue(value)
@@ -72,7 +79,8 @@ const SchemaEditor = ({
   return (
     <div className={className}>
       <CodeMirror
-        options={options}
+        className={editorClass}
+        options={defaultOptions}
         value={internalValue}
         onBeforeChange={handleEditorInputBeforeChange}
       />

openmetadata-ui/src/main/resources/ui/src/enums/entity.enum.ts

@@ -43,4 +43,5 @@ export enum TabSpecificField {
   DATAMODEL = 'dataModel',
   CHARTS = 'charts',
   TASKS = 'tasks',
+  TABLE_QUERIES = 'tableQueries',
 }

openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx

@@ -78,6 +78,8 @@ const DatasetDetailsPage: FunctionComponent = () => {
   const [isLineageLoading, setIsLineageLoading] = useState<boolean>(false);
   const [isSampleDataLoading, setIsSampleDataLoading] =
     useState<boolean>(false);
+  const [isTableQueriesLoading, setIsTableQueriesLoading] =
+    useState<boolean>(false);
   const USERId = getCurrentUserId();
   const [tableId, setTableId] = useState('');
   const [tier, setTier] = useState<TagLabel>();
@@ -123,6 +125,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
   );
   const [deleted, setDeleted] = useState<boolean>(false);
   const [isError, setIsError] = useState(false);
+  const [tableQueries, setTableQueries] = useState<Table['tableQueries']>([]);
 
   const activeTabHandler = (tabValue: number) => {
     const currentTabIndex = tabValue - 1;
@@ -280,6 +283,28 @@ const DatasetDetailsPage: FunctionComponent = () => {
         break;
       }
 
+      case TabSpecificField.TABLE_QUERIES: {
+        if ((tableQueries?.length ?? 0) > 0) {
+          break;
+        } else {
+          setIsTableQueriesLoading(true);
+          getTableDetailsByFQN(tableFQN, tabField)
+            .then((res: AxiosResponse) => {
+              const { tableQueries } = res.data;
+              setTableQueries(tableQueries);
+            })
+            .catch(() =>
+              showToast({
+                variant: 'error',
+                body: 'Error while getting table queries',
+              })
+            )
+            .finally(() => setIsTableQueriesLoading(false));
+
+          break;
+        }
+      }
+
       default:
         break;
     }
@@ -493,6 +518,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
           followers={followers}
           isLineageLoading={isLineageLoading}
           isNodeLoading={isNodeLoading}
+          isQueriesLoading={isTableQueriesLoading}
           isSampleDataLoading={isSampleDataLoading}
           joins={joins}
           lineageLeafNodes={leafNodes}
@@ -505,6 +531,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
           slashedTableName={slashedTableName}
           tableDetails={tableDetails}
           tableProfile={tableProfile}
+          tableQueries={tableQueries}
           tableTags={tableTags}
           tier={tier as TagLabel}
           unfollowTableHandler={unfollowTable}

openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx

@@ -193,6 +193,7 @@ const TourPage = () => {
             tableProfile={
               mockDatasetData.tableProfile as unknown as Table['tableProfile']
             }
+            tableQueries={[]}
             tableTags={mockDatasetData.tableTags}
             tier={'' as unknown as TagLabel}
             unfollowTableHandler={handleCountChange}

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -887,3 +887,6 @@ body .profiler-graph .recharts-active-dot circle {
   );
   pointer-events: none; /* so the text is still selectable */
 }
+.table-query-editor > .CodeMirror {
+  height: auto !important;
+}

openmetadata-ui/src/main/resources/ui/src/utils/DatasetDetailsUtils.ts

@@ -27,6 +27,11 @@ export const datasetTableTabs = [
     path: 'sample_data',
     field: TabSpecificField.SAMPLE_DATA,
   },
+  {
+    name: 'Queries',
+    path: 'table_queries',
+    field: TabSpecificField.TABLE_QUERIES,
+  },
   {
     name: 'Profiler',
     path: 'profiler',
@@ -53,27 +58,31 @@ export const getCurrentDatasetTab = (tab: string) => {
       currentTab = 2;
 
       break;
-
-    case 'profiler':
+    case 'table_queries':
       currentTab = 3;
 
       break;
 
-    case 'lineage':
+    case 'profiler':
       currentTab = 4;
 
       break;
 
-    case 'dbt':
+    case 'lineage':
       currentTab = 5;
 
       break;
 
-    case 'manage':
+    case 'dbt':
       currentTab = 6;
 
       break;
 
+    case 'manage':
+      currentTab = 7;
+
+      break;
+
     case 'schema':
     default:
       currentTab = 1;

openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -28,7 +28,6 @@ import IconConfigColor from '../assets/svg/config-color.svg';
 import IconConfig from '../assets/svg/config.svg';
 import IconControlMinus from '../assets/svg/control-minus.svg';
 import IconControlPlus from '../assets/svg/control-plus.svg';
-import IconCopy from '../assets/svg/copy.svg';
 import IconDashboardGrey from '../assets/svg/dashboard-grey.svg';
 import IconDashboard from '../assets/svg/dashboard.svg';
 import IconAsstest from '../assets/svg/data-assets.svg';
@@ -81,10 +80,13 @@ import IconUpArrow from '../assets/svg/ic-up-arrow.svg';
 import IconVEllipsis from '../assets/svg/ic-v-ellipsis.svg';
 import IconWorkflows from '../assets/svg/ic-workflows.svg';
 import IconChevronDown from '../assets/svg/icon-chevron-down.svg';
+import IconCopy from '../assets/svg/icon-copy.svg';
+import IconDown from '../assets/svg/icon-down.svg';
 import IconKey from '../assets/svg/icon-key.svg';
 import IconNotNull from '../assets/svg/icon-notnull.svg';
 import IconTour from '../assets/svg/icon-tour.svg';
 import IconUnique from '../assets/svg/icon-unique.svg';
+import IconUp from '../assets/svg/icon-up.svg';
 import IconInfo from '../assets/svg/info.svg';
 import IconIngestion from '../assets/svg/ingestion.svg';
 import IconLineageColor from '../assets/svg/lineage-color.svg';
@@ -239,6 +241,8 @@ export const Icons = {
   ANNOUNCEMENT: 'icon-announcement',
   ANNOUNCEMENT_WHITE: 'icon-announcement-white',
   CHEVRON_DOWN: 'icon-chevron-down',
+  ICON_UP: 'icon-up',
+  ICON_DOWN: 'icon-down',
 };
 
 const SVGIcons: FunctionComponent<Props> = ({
@@ -690,6 +694,14 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.CHEVRON_DOWN:
       IconComponent = IconChevronDown;
 
+      break;
+    case Icons.ICON_DOWN:
+      IconComponent = IconDown;
+
+      break;
+    case Icons.ICON_UP:
+      IconComponent = IconUp;
+
       break;
 
     default: