Fix #5542 UI : Table Query Card Is Not Expandable (#5543)

* Fix #5542 UI : Table Query Card Is Not Expandable

* Fix unit test

* FIx Unit test

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

@@ -14,7 +14,7 @@
 import classNames from 'classnames';
 import { isEqual, isNil, isUndefined } from 'lodash';
 import { ColumnJoins, EntityTags, ExtraInfo } from 'Models';
-import React, { RefObject, useEffect, useState } from 'react';
+import React, { Fragment, RefObject, useEffect, useState } from 'react';
 import AppState from '../../AppState';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTeamAndUserDetailsPath, ROUTES } from '../../constants/constants';
@@ -682,12 +682,22 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                 <div
                   className="tw-py-4 tw-px-7 tw-grid tw-grid-cols-3 entity-feed-list"
                   id="tablequeries">
-                  <div />
-                  <TableQueries
-                    isLoading={isQueriesLoading}
-                    queries={tableQueries}
-                  />
-                  <div />
+                  {!isUndefined(tableQueries) && tableQueries.length > 0 ? (
+                    <Fragment>
+                      <div />
+                      <TableQueries
+                        isLoading={isQueriesLoading}
+                        queries={tableQueries}
+                      />
+                      <div />
+                    </Fragment>
+                  ) : (
+                    <div
+                      className="tw-mt-4 tw-ml-4 tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8 tw-col-span-3"
+                      data-testid="no-queries">
+                      <span>No queries data available.</span>
+                    </div>
+                  )}
                 </div>
               )}
               {activeTab === 5 && (

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

@@ -296,7 +296,7 @@ describe('Test MyDataDetailsPage page', () => {
         wrapper: MemoryRouter,
       }
     );
-    const tableQueries = await findByTestId(container, 'table-queries');
+    const tableQueries = await findByTestId(container, 'no-queries');
 
     expect(tableQueries).toBeInTheDocument();
   });

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

@@ -12,6 +12,7 @@
  */
 
 import {
+  findByTestId,
   findByText,
   getByTestId,
   queryByTestId,
@@ -55,9 +56,15 @@ describe('Test QueryCard Component', () => {
       /CopyToClipboardButton/i
     );
 
+    const expandButton = await findByTestId(
+      container,
+      'expand-collapse-button'
+    );
+
     expect(queryHeader).toBeInTheDocument();
     expect(query).toBeInTheDocument();
     expect(copyQueryButton).toBeInTheDocument();
+    expect(expandButton).toBeInTheDocument();
   });
 
   it('Should not render header if user is undefined', async () => {

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

@@ -28,54 +28,58 @@ const QueryCard: FC<QueryCardProp> = ({ className, query }) => {
   const [expanded, setExpanded] = useState<boolean>(false);
 
   return (
-    <div className={classNames('tw-bg-white tw-py-3 tw-mb-3', className)}>
-      <div
-        className="tw-cursor-pointer"
-        onClick={() => setExpanded((pre) => !pre)}>
-        {!isUndefined(query.user) && !isUndefined(query.duration) ? (
-          <div
-            className="tw-flex tw-py-1 tw-justify-between"
-            data-testid="query-header">
-            <p>
-              Last run by{' '}
-              <Link
-                className="button-comp"
-                to={getUserPath(query.user?.name as string)}>
-                <button className="tw-font-medium tw-text-grey-body ">
-                  {query.user?.displayName ?? query.user?.name}
-                </button>{' '}
-              </Link>
-              and took{' '}
-              <span className="tw-font-medium">{query.duration} seconds</span>
-            </p>
-
-            <button className="tw-pr-px">
+    <div
+      className={classNames(
+        'tw-bg-white tw-py-3 tw-mb-3 tw-cursor-pointer',
+        className
+      )}
+      onClick={() => setExpanded((pre) => !pre)}>
+      {!isUndefined(query.user) && !isUndefined(query.duration) ? (
+        <div data-testid="query-header">
+          <p>
+            Last run by{' '}
+            <Link
+              className="button-comp"
+              to={getUserPath(query.user?.name as string)}>
+              <button className="tw-font-medium tw-text-grey-body ">
+                {query.user?.displayName ?? query.user?.name}
+              </button>{' '}
+            </Link>
+            and took{' '}
+            <span className="tw-font-medium">{query.duration} seconds</span>
+          </p>
+        </div>
+      ) : null}
+      <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,
+          })}>
+          <span className="tw-absolute tw-right-4 tw-z-9999 tw--mt-0.5 tw-flex">
+            <button data-testid="expand-collapse-button">
               {expanded ? (
                 <SVGIcons
                   alt="arrow-up"
-                  className="tw-mr-4"
+                  className="tw-mr-2"
                   icon={Icons.ICON_UP}
                   width="16px"
                 />
               ) : (
                 <SVGIcons
                   alt="arrow-down"
-                  className="tw-mr-4"
+                  className="tw-mr-2"
                   icon={Icons.ICON_DOWN}
                   width="16px"
                 />
               )}
             </button>
-          </div>
-        ) : null}
-      </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,
-          })}>
-          <span className="tw-absolute tw-right-4 tw-z-9999 tw--mt-0.5">
-            <CopyToClipboardButton copyText={query.query ?? ''} />
+            <span
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}>
+              <CopyToClipboardButton copyText={query.query ?? ''} />
+            </span>
           </span>
 
           <SchemaEditor

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

@@ -140,10 +140,8 @@ describe('Test TableQueries Component', () => {
       }
     );
     const queryCards = queryAllByText(container, /QueryCard/i);
-    const noQueries = await findByTestId(container, 'no-queries');
 
     expect(queryCards).toHaveLength(0);
-    expect(noQueries).toBeInTheDocument();
   });
 
   it('Check if TableQueries component has queries as empty list', async () => {
@@ -154,9 +152,7 @@ describe('Test TableQueries Component', () => {
       }
     );
     const queryCards = queryAllByText(container, /QueryCard/i);
-    const noQueries = await findByTestId(container, 'no-queries');
 
     expect(queryCards).toHaveLength(0);
-    expect(noQueries).toBeInTheDocument();
   });
 });

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

@@ -11,7 +11,6 @@
  *  limitations under the License.
  */
 
-import { isUndefined } from 'lodash';
 import React, { FC, HTMLAttributes } from 'react';
 import { Table } from '../../generated/entity/data/table';
 import { withLoader } from '../../hoc/withLoader';
@@ -21,19 +20,13 @@ interface TableQueriesProp extends HTMLAttributes<HTMLDivElement> {
   queries: Table['tableQueries'];
 }
 
-const TableQueries: FC<TableQueriesProp> = ({ queries, className }) => {
+const TableQueries: FC<TableQueriesProp> = ({ queries = [], className }) => {
   return (
     <div className={className} data-testid="table-queries">
       <div className="tw-my-6" data-testid="queries-container">
-        {!isUndefined(queries) && queries.length > 0 ? (
-          queries.map((query, index) => <QueryCard key={index} query={query} />)
-        ) : (
-          <div
-            className="tw-mt-4 tw-ml-4 tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8"
-            data-testid="no-queries">
-            <span>No queries data available.</span>
-          </div>
-        )}
+        {queries.map((query, index) => (
+          <QueryCard key={index} query={query} />
+        ))}
       </div>
     </div>
   );