fix(orchestrator):[UI] Layout errors with workflow details screen (#403)

LiorSoffer · web-flow · commit 7032c1784872 · 2025-02-17T08:43:48.000+01:00
* fix(orchestrator):[UI] Layout errors with workflow details screen

Signed-off-by: Lior Soffer &lt;liorsoffer1@gmail.com&gt;

* fix spaces

Signed-off-by: Lior Soffer &lt;liorsoffer1@gmail.com&gt;

* fix

Signed-off-by: Lior Soffer &lt;liorsoffer1@gmail.com&gt;

---------

Signed-off-by: Lior Soffer &lt;liorsoffer1@gmail.com&gt;
diff --git a/workspaces/orchestrator/.changeset/popular-months-watch.md b/workspaces/orchestrator/.changeset/popular-months-watch.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+Update the workflow details screen to match the latest Figma design
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage.tsx
@@ -200,6 +200,7 @@ export const WorkflowInstancePage = ({
   const handleAbort = React.useCallback(async () => {
     if (value) {
       setIsAborting(true);
+
       try {
         await orchestratorApi.abortWorkflowInstance(value.instance.id);
         restart();
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowDetailsCard.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowDetailsCard.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 
 import { InfoCard } from '@backstage/core-components';
@@ -33,7 +34,8 @@ import { WorkflowInstanceStatusIndicator } from '../WorkflowInstanceStatusIndica
 const useStyles = makeStyles({
   details: {
     overflowY: 'auto',
-    height: '15rem',
+    minHeight: '10rem',
+    maxHeight: '15rem',
   },
 });
 
@@ -86,16 +88,16 @@ const WorkflowDefinitionDetailsCard = ({
 
   return (
     <InfoCard title="Details" className={classes.details}>
-      <Grid container spacing={3} alignContent="flex-start">
+      <Grid container spacing={7} alignContent="flex-start" wrap="nowrap">
         {details?.map(({ label, value, children }) => (
-          <Grid item md={3} key={label}>
+          <Grid item key={label}>
             {/* AboutField requires the value to be defined as a prop as well */}
             <AboutField label={label} value={value}>
               {loading ? <Skeleton variant="text" /> : children || value}
             </AboutField>
           </Grid>
         ))}
-        <Grid item md={3}>
+        <Grid item md={7}>
           <AboutField
             label="description"
             value={formattedWorkflowOverview?.description}
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowDetailsTabContent.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowDetailsTabContent.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 
-import { InfoCard } from '@backstage/core-components';
+import { InfoCard, ResponseErrorPanel } from '@backstage/core-components';
 
 import { Grid } from '@material-ui/core';
 
@@ -27,14 +28,21 @@ import WorkflowDefinitionDetailsCard from './WorkflowDetailsCard';
 interface Props {
   loading: boolean;
   workflowOverviewDTO: WorkflowOverviewDTO | undefined;
+  errorWorkflowOverview: Error | undefined;
 }
 
 export const WorkflowDetailsTabContent = ({
   loading,
   workflowOverviewDTO,
+  errorWorkflowOverview,
 }: Props) => {
   return (
     <>
+      {errorWorkflowOverview && (
+        <Grid item>
+          <ResponseErrorPanel error={errorWorkflowOverview} />
+        </Grid>
+      )}
       <Grid item>
         <WorkflowDefinitionDetailsCard
           workflowOverview={workflowOverviewDTO}
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPage.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPage.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,13 +20,9 @@ import { useAsync } from 'react-use';
 import { TabbedLayout } from '@backstage/core-components';
 import { useApi, useRouteRefParams } from '@backstage/core-plugin-api';
 
-import {
-  orchestratorWorkflowUsePermission,
-  orchestratorWorkflowUseSpecificPermission,
-} from '@red-hat-developer-hub/backstage-plugin-orchestrator-common';
+import { Grid } from '@material-ui/core';
 
 import { orchestratorApiRef } from '../../api';
-import { usePermissionArrayDecision } from '../../hooks/usePermissionArray';
 import { workflowRouteRef, workflowRunsRoutePath } from '../../routes';
 import { BaseOrchestratorPage } from '../BaseOrchestratorPage';
 import { WorkflowRunsTabContent } from '../WorkflowRunsTabContent';
@@ -37,16 +33,10 @@ export const WorkflowPage = () => {
   const { workflowId } = useRouteRefParams(workflowRouteRef);
   const orchestratorApi = useApi(orchestratorApiRef);
 
-  const { loading: loadingPermission, allowed: canRun } =
-    usePermissionArrayDecision([
-      orchestratorWorkflowUsePermission,
-      orchestratorWorkflowUseSpecificPermission(workflowId),
-    ]);
-
   const {
     value: workflowOverviewDTO,
-    loading,
-    error,
+    loading: loadingWorkflowOverview,
+    error: errorWorkflowOverview,
   } = useAsync(() => {
     return orchestratorApi.getWorkflowOverview(workflowId);
   }, []);
@@ -60,26 +50,19 @@ export const WorkflowPage = () => {
     >
       <TabbedLayout>
         <TabbedLayout.Route path="/" title="Workflow details">
-          <WorkflowPageTabContent
-            error={error}
-            loadingPermission={loadingPermission}
-            loading={loading}
-            canRun={canRun}
-          >
+          <WorkflowPageTabContent>
             <WorkflowDetailsTabContent
-              loading={loading}
+              loading={loadingWorkflowOverview}
               workflowOverviewDTO={workflowOverviewDTO?.data}
+              errorWorkflowOverview={errorWorkflowOverview}
             />
           </WorkflowPageTabContent>
         </TabbedLayout.Route>
         <TabbedLayout.Route path={workflowRunsRoutePath} title="Workflow runs">
-          <WorkflowPageTabContent
-            error={error}
-            loadingPermission={loadingPermission}
-            loading={loading}
-            canRun={canRun}
-          >
-            <WorkflowRunsTabContent />
+          <WorkflowPageTabContent>
+            <Grid item>
+              <WorkflowRunsTabContent />
+            </Grid>
           </WorkflowPageTabContent>
         </TabbedLayout.Route>
       </TabbedLayout>
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPageTabContent.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPageTabContent.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,49 +13,52 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React, { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { ResponseErrorPanel } from '@backstage/core-components';
 import { useRouteRef, useRouteRefParams } from '@backstage/core-plugin-api';
 
 import { Button, Grid, Tooltip } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 
+import {
+  orchestratorWorkflowUsePermission,
+  orchestratorWorkflowUseSpecificPermission,
+} from '@red-hat-developer-hub/backstage-plugin-orchestrator-common';
+
+import { usePermissionArrayDecision } from '../../hooks/usePermissionArray';
 import { executeWorkflowRouteRef, workflowRouteRef } from '../../routes';
 
 interface Props {
-  error: Error | undefined;
-  loadingPermission: boolean;
-  loading: boolean;
-  canRun: boolean;
   children: ReactNode;
 }
 
-export const WorkflowPageTabContent = ({
-  error,
-  loadingPermission,
-  loading,
-  canRun,
-  children,
-}: Props) => {
+export const WorkflowPageTabContent = ({ children }: Props) => {
   const { workflowId } = useRouteRefParams(workflowRouteRef);
   const navigate = useNavigate();
   const executeWorkflowLink = useRouteRef(executeWorkflowRouteRef);
   const handleExecute = () => {
     navigate(executeWorkflowLink({ workflowId }));
   };
 
+  const { loading: loadingPermission, allowed: canRun } =
+    usePermissionArrayDecision([
+      orchestratorWorkflowUsePermission,
+      orchestratorWorkflowUseSpecificPermission(workflowId),
+    ]);
+
   return (
-    <Grid container spacing={2} direction="column" wrap="nowrap">
-      {error && (
-        <Grid item>
-          <ResponseErrorPanel error={error} />
-        </Grid>
-      )}
-      <Grid container item justifyContent="flex-end" spacing={1}>
+    <Grid
+      container
+      spacing={2}
+      direction="column"
+      wrap="nowrap"
+      justifyContent="flex-end"
+    >
+      <Grid item container justifyContent="flex-end">
         <Grid item>
-          {loading || loadingPermission ? (
+          {loadingPermission ? (
             <Skeleton variant="text" width="5rem" />
           ) : (
             <Tooltip
@@ -74,7 +77,7 @@ export const WorkflowPageTabContent = ({
           )}
         </Grid>
       </Grid>
-      <Grid item>{children}</Grid>
+      {children}
     </Grid>
   );
 };
