fix(orchestrator): fix responsiveness of the WorkflowPage (#554)

Signed-off-by: Lior Soffer <liorsoffer1@gmail.com>

Author: LiorSoffer

workspaces/orchestrator/.changeset/flat-shirts-beg.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+fixing responsiveness of the WorkflowPage

…/WorkflowPage/WorkflowPageTabContent.tsx …rc/components/WorkflowPage/RunButton.tsxworkspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPageTabContent.tsx renamed to workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/RunButton.tsx workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPageTabContent.tsx renamed to workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/RunButton.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useRouteRef, useRouteRefParams } from '@backstage/core-plugin-api';
@@ -30,11 +30,7 @@ import {
 import { usePermissionArrayDecision } from '../../hooks/usePermissionArray';
 import { executeWorkflowRouteRef, workflowRouteRef } from '../../routes';
 
-interface Props {
-  children: ReactNode;
-}
-
-export const WorkflowPageTabContent = ({ children }: Props) => {
+export const RunButton = () => {
   const { workflowId } = useRouteRefParams(workflowRouteRef);
   const navigate = useNavigate();
   const executeWorkflowLink = useRouteRef(executeWorkflowRouteRef);
@@ -49,35 +45,26 @@ export const WorkflowPageTabContent = ({ children }: Props) => {
     ]);
 
   return (
-    <Grid
-      container
-      spacing={2}
-      direction="column"
-      wrap="nowrap"
-      justifyContent="flex-end"
-    >
-      <Grid item container justifyContent="flex-end">
-        <Grid item>
-          {loadingPermission ? (
-            <Skeleton variant="text" width="5rem" />
-          ) : (
-            <Tooltip
-              title="user not authorized to execute workflow"
-              disableHoverListener={canRun}
+    <Grid item container justifyContent="flex-end" xs={12} spacing={2}>
+      <Grid item>
+        {loadingPermission ? (
+          <Skeleton variant="text" width="5rem" />
+        ) : (
+          <Tooltip
+            title="user not authorized to execute workflow"
+            disableHoverListener={canRun}
+          >
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleExecute}
+              disabled={!canRun}
             >
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={handleExecute}
-                disabled={!canRun}
-              >
-                Run
-              </Button>
-            </Tooltip>
-          )}
-        </Grid>
+              Run
+            </Button>
+          </Tooltip>
+        )}
       </Grid>
-      {children}
     </Grid>
   );
 };

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowDetailsTabContent.tsx

@@ -45,7 +45,7 @@ export const WorkflowDetailsTabContent = ({
   });
 
   return (
-    <>
+    <Grid container item direction="column" xs={12} spacing={2}>
       {errorWorkflowOverview && (
         <Grid item>
           <ResponseErrorPanel error={errorWorkflowOverview} />
@@ -70,6 +70,6 @@ export const WorkflowDetailsTabContent = ({
           </InfoCard>
         </Grid>
       )}
-    </>
+    </Grid>
   );
 };

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPage.tsx

@@ -26,8 +26,8 @@ import { orchestratorApiRef } from '../../api';
 import { workflowRouteRef, workflowRunsRoutePath } from '../../routes';
 import { BaseOrchestratorPage } from '../BaseOrchestratorPage';
 import { WorkflowRunsTabContent } from '../WorkflowRunsTabContent';
+import { RunButton } from './RunButton';
 import { WorkflowDetailsTabContent } from './WorkflowDetailsTabContent';
-import { WorkflowPageTabContent } from './WorkflowPageTabContent';
 
 export const WorkflowPage = () => {
   const { workflowId } = useRouteRefParams(workflowRouteRef);
@@ -50,20 +50,20 @@ export const WorkflowPage = () => {
     >
       <TabbedLayout>
         <TabbedLayout.Route path="/" title="Workflow details">
-          <WorkflowPageTabContent>
+          <Grid container spacing={2}>
+            <RunButton />
             <WorkflowDetailsTabContent
               loading={loadingWorkflowOverview}
               workflowOverviewDTO={workflowOverviewDTO?.data}
               errorWorkflowOverview={errorWorkflowOverview}
             />
-          </WorkflowPageTabContent>
+          </Grid>
         </TabbedLayout.Route>
         <TabbedLayout.Route path={workflowRunsRoutePath} title="Workflow runs">
-          <WorkflowPageTabContent>
-            <Grid item>
-              <WorkflowRunsTabContent />
-            </Grid>
-          </WorkflowPageTabContent>
+          <Grid container spacing={2}>
+            <RunButton />
+            <WorkflowRunsTabContent />
+          </Grid>
         </TabbedLayout.Route>
       </TabbedLayout>
     </BaseOrchestratorPage>

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowRunsTabContent.tsx

@@ -301,8 +301,8 @@ export const WorkflowRunsTabContent = () => {
   return error ? (
     <ErrorPanel error={error} />
   ) : (
-    <Grid container item justifyContent="flex-end" spacing={1}>
-      <Grid item xs={2}>
+    <Grid container item xs={12} spacing={2}>
+      <Grid item>
         <Selector
           label="Status"
           items={statuses}
@@ -322,7 +322,7 @@ export const WorkflowRunsTabContent = () => {
           selected={startedSelectorValue}
         />
       </Grid>
-      <Grid item xs={10}>
+      <Grid item xs style={{ flexGrow: 1 }}>
         <InfoCard
           noPadding
           title={

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowsTabContent.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, { useCallback } from 'react';
 
 import {
@@ -51,7 +52,7 @@ export const WorkflowsTabContent = () => {
       {loading ? <Progress /> : null}
       {error ? <ResponseErrorPanel error={error} /> : null}
       {isReady ? (
-        <Grid container direction="column">
+        <Grid container direction="column" xs={12}>
           <Grid item>
             <WorkflowsTable items={value ?? []} />
           </Grid>