fix: hide abort run when now running tests (#902)

* fix: hide abort run when now running tests * fix: handle undefined executions * fix: use Paragraph * fix: lint line * fix: update edit label based on entity --------- Co-authored-by: mortadarefd <m.mortada@refdapp.com>
kubeshop · Nov 16, 2023 · 4cee851 · 4cee851
1 parent 8a08675
commit 4cee851
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 20 deletions.
diff --git a/packages/web/src/components/organisms/EntityDetails/EntityDetailsHeader.tsx b/packages/web/src/components/organisms/EntityDetails/EntityDetailsHeader.tsx
@@ -1,4 +1,4 @@
-import {FC} from 'react';
+import {FC, useMemo} from 'react';
 
 import {Select, Space} from 'antd';
 
@@ -11,6 +11,7 @@ import {Button, Text} from '@custom-antd';
 
 import useExecutorIcon from '@hooks/useExecutorIcon';
 
+import {Entity} from '@models/entity';
 import {Option as OptionType} from '@models/form';
 
 import {DotsDropdown, LabelsList, notificationCall} from '@molecules';
@@ -34,6 +35,7 @@ const filterOptions: OptionType[] = [
 ];
 
 interface EntityDetailsHeaderProps {
+  entity: Entity;
   isRunning?: boolean;
   onRun: () => void;
   onBack: () => void;
@@ -58,6 +60,9 @@ const EntityDetailsHeader: FC<EntityDetailsHeaderProps> = ({
   const {entity, details} = useEntityDetailsPick('entity', 'details');
   const [daysFilterValue, setDaysFilterValue] = useEntityDetailsField('daysFilterValue');
   const testIcon = useExecutorIcon(details);
+
+  const {executions} = useEntityDetailsPick('executions');
+
   const isTestSuiteEmpty = entity === 'test-suites' && !details.steps?.length;
 
   const [abortAllExecutions] = useAbortAllExecutions();
@@ -66,6 +71,17 @@ const EntityDetailsHeader: FC<EntityDetailsHeaderProps> = ({
       notificationCall('failed', `Something went wrong during ${entity} execution abortion`);
     });
   };
+  const entityOptionsMenu = useMemo(
+    () =>
+      [
+        {key: 1, label: <span onClick={onEditTest}>Edit {entity === 'tests' ? 'Test' : 'Test Suite'}</span>},
+        executions?.totals?.running && {
+          key: 2,
+          label: <span onClick={onAbortAllExecutionsClick}>Abort all executions</span>,
+        },
+      ].filter(Boolean),
+    [executions?.totals?.running]
+  );
 
   return (
     <PageHeader
@@ -95,10 +111,7 @@ const EntityDetailsHeader: FC<EntityDetailsHeaderProps> = ({
         />,
         <DotsDropdown
           key="entity-options"
-          items={[
-            {key: 1, label: <span onClick={onEditTest}>Edit Test</span>},
-            {key: 2, label: <span onClick={onAbortAllExecutionsClick}>Abort all executions</span>},
-          ]}
+          items={entityOptionsMenu}
           wrapperStyle={{backgroundColor: Colors.slate800}}
           disabled={outOfSync}
         />,

diff --git a/packages/web/src/components/organisms/PageBlueprint/PageBlueprint.styled.tsx b/packages/web/src/components/organisms/PageBlueprint/PageBlueprint.styled.tsx
@@ -1,4 +1,5 @@
 import {PageHeader as AntdPageHeader} from 'antd';
+import Paragraph from 'antd/lib/typography/Paragraph';
 
 import styled from 'styled-components';
 
@@ -37,16 +38,20 @@ export const StyledPageHeader = styled(AntdPageHeader)`
     .ant-page-header-heading-left,
     .ant-page-header-heading-extra {
       margin: 0;
-
-      div {
-        flex-wrap: wrap;
-      }
     }
   }
 `;
 
-export const PageTitle = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
+export const PageTitle = styled(Paragraph)`
+  min-width: 0;
+  flex: 1;
+
+  &.ant-typography,
+  .ant-typography p {
+    margin-bottom: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
 `;
diff --git a/packages/web/src/components/organisms/PageBlueprint/PageHeader.tsx b/packages/web/src/components/organisms/PageBlueprint/PageHeader.tsx
@@ -24,9 +24,11 @@ const PageHeader: FC<PageHeaderProps> = ({title, pageTitleAddon, description, lo
           {title} <LoadingOutlined />
         </>
       ) : (
-        <PageTitle>
-          {title} {pageTitleAddon}
-        </PageTitle>
+        <>
+          <PageTitle ellipsis={{tooltip: title}}>
+            {title} {pageTitleAddon}
+          </PageTitle>
+        </>
       )
     }
   >

diff --git a/packages/web/src/components/pages/TestSuites/TestSuiteDetails/TestSuiteDetails.tsx b/packages/web/src/components/pages/TestSuites/TestSuiteDetails/TestSuiteDetails.tsx
@@ -33,7 +33,7 @@ const TestSuiteDetails: FC<TestSuiteDetailsProps> = ({tab}) => {
         execId={execId}
         useGetExecutionDetails={useGetTestSuiteExecutionByIdQuery}
       >
-        <TestSuiteDetailsContent tab={tab} settingsTab={settingsTab} />
+        <TestSuiteDetailsContent entity="test-suites" tab={tab} settingsTab={settingsTab} />
       </ExecutionDetailsLayer>
     </EntityDetailsLayer>
   );

diff --git a/packages/web/src/components/pages/TestSuites/TestSuiteDetails/TestSuiteDetailsContent.tsx b/packages/web/src/components/pages/TestSuites/TestSuiteDetails/TestSuiteDetailsContent.tsx
@@ -8,6 +8,8 @@ import useRunEntity from '@hooks/useRunEntity';
 import {SystemAccess, useSystemAccess} from '@hooks/useSystemAccess';
 import useTrackTimeAnalytics from '@hooks/useTrackTimeAnalytics';
 
+import {Entity} from '@models/entity';
+
 import {CLICommands, SummaryGrid} from '@molecules';
 
 import {PageWrapper} from '@organisms';
@@ -26,11 +28,12 @@ import TestSuiteExecutionDrawer from './TestSuiteExecution/TestSuiteExecutionDra
 import TestSuiteSettings from './TestSuiteSettings';
 
 interface TestSuiteDetailsContentProps {
+  entity: Entity;
   tab?: string;
   settingsTab?: string;
 }
 
-const TestSuiteDetailsContent: FC<TestSuiteDetailsContentProps> = ({tab, settingsTab}) => {
+const TestSuiteDetailsContent: FC<TestSuiteDetailsContentProps> = ({entity, tab, settingsTab}) => {
   const {id, details, error, metrics} = useEntityDetailsPick('id', 'details', 'error', 'metrics');
   const [isRunning, run] = useRunEntity('test-suites', details);
   const isAgentAvailable = useSystemAccess(SystemAccess.agent);
@@ -59,6 +62,7 @@ const TestSuiteDetailsContent: FC<TestSuiteDetailsContentProps> = ({tab, setting
         <PageMetadata title={details?.name} description={details?.description} />
 
         <EntityDetailsHeader
+          entity={entity}
           isRunning={isRunning}
           outOfSync={details.readOnly}
           isAgentAvailable={isAgentAvailable}

diff --git a/packages/web/src/components/pages/Tests/TestDetails/TestDetails.tsx b/packages/web/src/components/pages/Tests/TestDetails/TestDetails.tsx
@@ -33,7 +33,7 @@ const TestDetails: FC<TestDetailsProps> = ({tab}) => {
         execId={execId}
         useGetExecutionDetails={useGetTestExecutionByIdQuery}
       >
-        <TestDetailsContent tab={tab} settingsTab={settingsTab} />
+        <TestDetailsContent entity="tests" tab={tab} settingsTab={settingsTab} />
       </ExecutionDetailsLayer>
     </EntityDetailsLayer>
   );

diff --git a/packages/web/src/components/pages/Tests/TestDetails/TestDetailsContent.tsx b/packages/web/src/components/pages/Tests/TestDetails/TestDetailsContent.tsx
@@ -10,6 +10,8 @@ import useRunEntity from '@hooks/useRunEntity';
 import {SystemAccess, useSystemAccess} from '@hooks/useSystemAccess';
 import useTrackTimeAnalytics from '@hooks/useTrackTimeAnalytics';
 
+import {Entity} from '@models/entity';
+
 import {CLICommands, SummaryGrid} from '@molecules';
 
 import {PageWrapper} from '@organisms';
@@ -28,11 +30,12 @@ import TestExecutionDrawer from './TestExecution/TestExecutionDrawer';
 import TestSettings from './TestSettings';
 
 interface TestDetailsContentProps {
+  entity: Entity;
   tab?: string;
   settingsTab?: string;
 }
 
-const TestDetailsContent: FC<TestDetailsContentProps> = ({tab, settingsTab}) => {
+const TestDetailsContent: FC<TestDetailsContentProps> = ({entity, tab, settingsTab}) => {
   const {id, details, error, metrics} = useEntityDetailsPick('id', 'details', 'error', 'metrics');
   const [isRunning, run] = useRunEntity('tests', details);
   const isAgentAvailable = useSystemAccess(SystemAccess.agent);
@@ -61,6 +64,7 @@ const TestDetailsContent: FC<TestDetailsContentProps> = ({tab, settingsTab}) =>
         <PageMetadata title={details?.name} description={details?.description} />
 
         <EntityDetailsHeader
+          entity={entity}
           isRunning={isRunning}
           outOfSync={details.readOnly}
           isAgentAvailable={isAgentAvailable}