From b909f0fd66e859bc2631643b026ebd8b115ba652 Mon Sep 17 00:00:00 2001
From: Dmitriy Lazarev <w@kich.dev>
Date: Fri, 16 Jun 2023 11:33:30 +0400
Subject: [PATCH 1/2] Update workflows overview, add external links and
 description

Signed-off-by: Dmitriy Lazarev <w@kich.dev>
---
 .../components/workflow/WorkflowsOverview.tsx |  19 ++-
 .../components/workflow/WorkflowsTable.tsx    | 148 ++++++++++++++----
 2 files changed, 132 insertions(+), 35 deletions(-)

diff --git a/plugins/parodos/src/components/workflow/WorkflowsOverview.tsx b/plugins/parodos/src/components/workflow/WorkflowsOverview.tsx
index 67351253..079d3fcf 100644
--- a/plugins/parodos/src/components/workflow/WorkflowsOverview.tsx
+++ b/plugins/parodos/src/components/workflow/WorkflowsOverview.tsx
@@ -10,7 +10,7 @@ import {
 import * as urls from '../../urls';
 import { ParodosPage } from '../ParodosPage';
 import Star from '@material-ui/icons/StarOutline';
-import { Button, Grid, makeStyles } from '@material-ui/core';
+import { Button, Grid, Link, makeStyles, Typography } from '@material-ui/core';
 import { useStore } from '../../stores/workflowStore/workflowStore';
 import { pluginRoutePrefix } from '../ParodosPage/navigationMap';
 import { WorkflowsTable } from './WorkflowsTable';
@@ -28,7 +28,8 @@ const useStyles = makeStyles(theme => ({
     marginLeft: 'auto',
   },
   newProjectButton: {
-    alignSelf: 'flex-end',
+    marginLeft: 'auto',
+    marginRight: 0,
   },
   tableContainer: {
     marginTop: '2em',
@@ -36,6 +37,13 @@ const useStyles = makeStyles(theme => ({
   addProjectButton: {
     marginRight: theme.spacing(1),
   },
+  mtaReportLinkItem: {
+    alignSelf: 'flex-end',
+  },
+  mtaReportLink: {
+    fontSize: '0.75rem',
+    padding: `${theme.spacing(1.5)}px 0`,
+  },
   selectContainer: {
     '& div[class^="MuiFormControl-root"]': {
       maxWidth: '100%',
@@ -111,6 +119,13 @@ export function WorkflowsOverview(): JSX.Element {
             margin="none"
           />
         </Grid>
+        <Grid item xs={5} md={3} lg={2} className={classes.mtaReportLinkItem}>
+          <Link target="_blank" href="#">
+            <Typography className={classes.mtaReportLink}>
+              View MTA assessment report
+            </Typography>
+          </Link>
+        </Grid>
         <Grid item className={classes.newProjectButton}>
           <LinkButton
             variant="contained"
diff --git a/plugins/parodos/src/components/workflow/WorkflowsTable.tsx b/plugins/parodos/src/components/workflow/WorkflowsTable.tsx
index 9c110d13..a325c134 100644
--- a/plugins/parodos/src/components/workflow/WorkflowsTable.tsx
+++ b/plugins/parodos/src/components/workflow/WorkflowsTable.tsx
@@ -1,10 +1,25 @@
 import React, { useRef, useState } from 'react';
-import { LinkButton, Table, TableColumn } from '@backstage/core-components';
+import {
+  LinkButton,
+  Table,
+  TableColumn,
+  StatusRunning,
+  StatusOK,
+  StatusError,
+  StatusWarning,
+  StatusAborted,
+  SubvalueCell,
+} from '@backstage/core-components';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import FilterListIcon from '@material-ui/icons/FilterList';
+import LaunchIcon from '@material-ui/icons/Launch';
 import { pluginRoutePrefix } from '../ParodosPage/navigationMap';
 import { ProjectWorkflow } from '../../models/workflowTaskSchema';
 import { useStore } from '../../stores/workflowStore/workflowStore';
 import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
   ClickAwayListener,
   Grow,
   IconButton,
@@ -15,6 +30,7 @@ import {
   Popper,
   TableCell,
   Typography,
+  Link,
 } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
@@ -32,29 +48,39 @@ const useStyles = makeStyles(theme => ({
     borderRadius: '50%',
     marginRight: '8px',
   },
-  runningStatus: {
-    backgroundColor: theme.palette.info.main,
+  workflowDescriptionContainer: {
+    background: 'inherit',
+    padding: '0',
+    boxShadow: 'none',
+  },
+  workflowDescriptionSummary: {
+    flexDirection: 'row-reverse',
+    padding: '0',
   },
-  completedStatus: {
-    backgroundColor: theme.palette.success.main,
+  workflowDescriptionSummaryContent: {
+    flexDirection: 'column',
   },
-  failedStatus: {
-    backgroundColor: theme.palette.error.main,
+  expandIcon: {
+    marginRight: theme.spacing(2),
+    padding: '0',
   },
-  pendingStatus: {
-    backgroundColor: theme.palette.warning.main,
+  urlIcon: {
+    color: theme.palette.primary.dark,
   },
-  abortedStatus: {
-    backgroundColor: theme.palette.grey[500],
+  workflowDescriptionDetails: {
+    flexDirection: 'column',
+    marginLeft: theme.spacing(3),
+    gap: theme.spacing(0.5),
   },
 }));
 
 interface WorkflowTableData {
   id: string;
   name: string;
+  description?: string;
   type: string;
   processingType: 'SEQUENTIAL' | 'PARALLEL';
-  status: string;
+  StatusComponent: () => JSX.Element;
   author: string;
   startDate: string;
   endDate: string;
@@ -69,6 +95,14 @@ const columns: TableColumn<WorkflowTableData>[] = [
   { title: '', field: 'view', width: '5%' },
 ];
 
+const statuses: ProjectWorkflow['workStatus'][] = [
+  'IN_PROGRESS',
+  'COMPLETED',
+  'FAILED',
+  'PENDING',
+  'REJECTED',
+];
+
 const statusMap: Record<ProjectWorkflow['workStatus'], string> = {
   IN_PROGRESS: 'Running',
   COMPLETED: 'Completed',
@@ -77,12 +111,15 @@ const statusMap: Record<ProjectWorkflow['workStatus'], string> = {
   REJECTED: 'Aborted',
 };
 
-const statusColorMap: Record<ProjectWorkflow['workStatus'], string> = {
-  IN_PROGRESS: 'runningStatus',
-  COMPLETED: 'completedStatus',
-  FAILED: 'failedStatus',
-  PENDING: 'pendingStatus',
-  REJECTED: 'abortedStatus',
+const StatusComponents: Record<
+  ProjectWorkflow['workStatus'],
+  () => JSX.Element
+> = {
+  IN_PROGRESS: () => <StatusRunning>Running</StatusRunning>,
+  COMPLETED: () => <StatusOK>Completed</StatusOK>,
+  FAILED: () => <StatusError>Failed</StatusError>,
+  PENDING: () => <StatusWarning>Pending</StatusWarning>,
+  REJECTED: () => <StatusAborted>Aborted</StatusAborted>,
 };
 
 const formatDate = new Intl.DateTimeFormat('en', {
@@ -139,10 +176,10 @@ export const WorkflowsTable: React.FC<{
       return {
         id: workflow.workFlowExecutionId,
         name: workflow.workFlowName,
+        description: 'Description of workflow',
         type: definition?.type,
         processingType: definition?.processingType,
-        status: statusMap[workflow.workStatus],
-        statusColor: statusColorMap[workflow.workStatus],
+        StatusComponent: StatusComponents[workflow.workStatus],
         author: workflow.executeBy,
         startDate: formatDate.format(Date.parse(workflow.startDate)),
         endDate: workflow.endDate
@@ -192,11 +229,7 @@ export const WorkflowsTable: React.FC<{
                       onKeyDown={handleListKeyDown}
                     >
                       <MenuItem onClick={handleChangeFilter}>All</MenuItem>
-                      {(
-                        Object.keys(
-                          statusMap,
-                        ) as ProjectWorkflow['workStatus'][]
-                      ).map(status => (
+                      {statuses.map(status => (
                         <MenuItem
                           key={status}
                           onClick={e => handleChangeFilter(e, status)}
@@ -217,8 +250,62 @@ export const WorkflowsTable: React.FC<{
       columns={columns}
       data={data}
       components={{
-        Cell: ({ columnDef, rowData }) => {
-          if (columnDef.field === 'view') {
+        Cell: ({ columnDef, rowData: { StatusComponent, ...rowData } }) => {
+          if (columnDef.field === 'name') {
+            return (
+              <TableCell>
+                <Accordion className={classes.workflowDescriptionContainer}>
+                  <AccordionSummary
+                    className={classes.workflowDescriptionSummary}
+                    classes={{
+                      content: classes.workflowDescriptionSummaryContent,
+                    }}
+                    IconButtonProps={{ className: classes.expandIcon }}
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="workflow-description-content"
+                    id="workflow-description-header"
+                  >
+                    <SubvalueCell
+                      value={rowData.name}
+                      subvalue={rowData.description}
+                    />
+                  </AccordionSummary>
+                  <AccordionDetails
+                    className={classes.workflowDescriptionDetails}
+                  >
+                    <Link target="_blank" href="#">
+                      MTA assessment report{' '}
+                      <LaunchIcon
+                        fontSize="inherit"
+                        className={classes.urlIcon}
+                      />
+                    </Link>
+                    <Link target="_blank" href="#">
+                      Jira ticket{' '}
+                      <LaunchIcon
+                        fontSize="inherit"
+                        className={classes.urlIcon}
+                      />
+                    </Link>
+                    <Link target="_blank" href="#">
+                      VCS branch{' '}
+                      <LaunchIcon
+                        fontSize="inherit"
+                        className={classes.urlIcon}
+                      />
+                    </Link>
+                    <Link target="_blank" href="#">
+                      Deployment{' '}
+                      <LaunchIcon
+                        fontSize="inherit"
+                        className={classes.urlIcon}
+                      />
+                    </Link>
+                  </AccordionDetails>
+                </Accordion>
+              </TableCell>
+            );
+          } else if (columnDef.field === 'view') {
             return (
               <TableCell>
                 <LinkButton
@@ -232,12 +319,7 @@ export const WorkflowsTable: React.FC<{
           } else if (columnDef.field === 'status') {
             return (
               <TableCell data-testid={`${rowData.id} '${rowData.status}'`}>
-                <div
-                  className={`${classes.filterIcon} ${
-                    classes[rowData.statusColor as keyof typeof classes]
-                  }`}
-                />
-                {rowData.status}
+                <StatusComponent />
               </TableCell>
             );
           }

From 43598b78a61d60092b9d72407d7cdf693ab25958 Mon Sep 17 00:00:00 2001
From: Dmitriy Lazarev <w@kich.dev>
Date: Fri, 16 Jun 2023 16:18:36 +0400
Subject: [PATCH 2/2] Update
 plugins/parodos/src/components/workflow/WorkflowsOverview.tsx

Co-authored-by: Paul <paul.cowan@cutting.scot>
---
 plugins/parodos/src/components/workflow/WorkflowsOverview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/parodos/src/components/workflow/WorkflowsOverview.tsx b/plugins/parodos/src/components/workflow/WorkflowsOverview.tsx
index 079d3fcf..fc791f20 100644
--- a/plugins/parodos/src/components/workflow/WorkflowsOverview.tsx
+++ b/plugins/parodos/src/components/workflow/WorkflowsOverview.tsx
@@ -120,7 +120,7 @@ export function WorkflowsOverview(): JSX.Element {
           />
         </Grid>
         <Grid item xs={5} md={3} lg={2} className={classes.mtaReportLinkItem}>
-          <Link target="_blank" href="#">
+          <Link target="_blank" href="#" rel="noopener noreferrer">
             <Typography className={classes.mtaReportLink}>
               View MTA assessment report
             </Typography>