Fix #3727 Usage queries tab UI issues (#3737)

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

@@ -11,7 +11,12 @@
  *  limitations under the License.
  */
 
-import { findByText, getByTestId, render } from '@testing-library/react';
+import {
+  findByText,
+  getByTestId,
+  queryByTestId,
+  render,
+} from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import QueryCard from './QueryCard';
@@ -54,4 +59,28 @@ describe('Test QueryCard Component', () => {
     expect(query).toBeInTheDocument();
     expect(copyQueryButton).toBeInTheDocument();
   });
+
+  it('Should not render header if user is undefined', async () => {
+    const { container } = render(
+      <QueryCard query={{ ...mockQueryData, user: undefined }} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const queryHeader = queryByTestId(container, 'query-header');
+
+    expect(queryHeader).not.toBeInTheDocument();
+  });
+
+  it('Should not render header if duration is undefined', async () => {
+    const { container } = render(
+      <QueryCard query={{ ...mockQueryData, duration: undefined }} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const queryHeader = queryByTestId(container, 'query-header');
+
+    expect(queryHeader).not.toBeInTheDocument();
+  });
 });

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

@@ -12,6 +12,7 @@
  */
 
 import classNames from 'classnames';
+import { isUndefined } from 'lodash';
 import React, { FC, HTMLAttributes, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { getUserPath } from '../../constants/constants';
@@ -31,40 +32,42 @@ const QueryCard: FC<QueryCardProp> = ({ className, query }) => {
       <div
         className="tw-cursor-pointer"
         onClick={() => setExpanded((pre) => !pre)}>
-        <div
+        {!isUndefined(query.user) && !isUndefined(query.duration) ? (
-          className="tw-flex tw-py-1 tw-justify-between"
+          <div
-          data-testid="query-header">
+            className="tw-flex tw-py-1 tw-justify-between"
-          <p>
+            data-testid="query-header">
-            Last run by{' '}
+            <p>
-            <Link
+              Last run by{' '}
-              className="button-comp"
+              <Link
-              to={getUserPath(query.user?.name as string)}>
+                className="button-comp"
-              <button className="tw-font-medium tw-text-grey-body ">
+                to={getUserPath(query.user?.name as string)}>
-                {query.user?.displayName ?? query.user?.name}
+                <button className="tw-font-medium tw-text-grey-body ">
-              </button>{' '}
+                  {query.user?.displayName ?? query.user?.name}
-            </Link>
+                </button>{' '}
-            and took{' '}
+              </Link>
-            <span className="tw-font-medium">{query.duration} seconds</span>
+              and took{' '}
-          </p>
+              <span className="tw-font-medium">{query.duration} seconds</span>
+            </p>
 
-          <button className="tw-pr-px">
+            <button className="tw-pr-px">
-            {expanded ? (
+              {expanded ? (
-              <SVGIcons
+                <SVGIcons
-                alt="arrow-up"
+                  alt="arrow-up"
-                className="tw-mr-4"
+                  className="tw-mr-4"
-                icon={Icons.ICON_UP}
+                  icon={Icons.ICON_UP}
-                width="16px"
+                  width="16px"
-              />
+                />
-            ) : (
+              ) : (
-              <SVGIcons
+                <SVGIcons
-                alt="arrow-down"
+                  alt="arrow-down"
-                className="tw-mr-4"
+                  className="tw-mr-4"
-                icon={Icons.ICON_DOWN}
+                  icon={Icons.ICON_DOWN}
-                width="16px"
+                  width="16px"
-              />
+                />
-            )}
+              )}
-          </button>
+            </button>
-        </div>
+          </div>
+        ) : null}
       </div>
       <div className="tw-border tw-border-main tw-rounded-md tw-p-px">
         <div

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

@@ -891,6 +891,10 @@ body .profiler-graph .recharts-active-dot circle {
   height: auto !important;
 }
 
+.CodeMirror-wrap pre.CodeMirror-line {
+  padding-right: 40px;
+}
+
 .entity-feed-list {
   grid-template-columns: 200px auto 200px;
 }