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,6 +32,7 @@ const QueryCard: FC<QueryCardProp> = ({ className, query }) => {
       <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">
@@ -65,6 +67,7 @@ const QueryCard: FC<QueryCardProp> = ({ className, query }) => {
               )}
             </button>
           </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;
 }