✨ Added Workflow visual component to grid + sidesheet (#1128)

* Added workflow visual component to grid + sidesheet
* Removed old checklist status column. Added new one using domain name

libs/pipingapp/src/lib/config/tableConfig.tsx

@@ -1,5 +1,9 @@
 import { ColDef, GridConfig, ICellRendererProps } from '@equinor/workspace-fusion/grid';
-import { Pipetest } from '@cc-components/pipingshared';
+import {
+  Pipetest,
+  PipetestWorkflowStep,
+  mapWorkflowStepsToStep,
+} from '@cc-components/pipingshared';
 import { FilterState } from '@equinor/workspace-fusion/filter';
 import {
   defaultGridOptions,
@@ -11,6 +15,7 @@ import {
   DescriptionCell,
   LinkCell,
   StatusCircle,
+  WorkflowVisual,
   domainNames,
   pipetestStatusColormap,
   useHttpClient,
@@ -85,23 +90,19 @@ const columnDefinitions: [ColDef<Pipetest>, ...ColDef<Pipetest>[]] = [
     valueGetter: (element) => element.data?.location,
   },
   {
-    headerName: domainNames.mcStatus,
-    colId: 'mechanicalCompletionStatus',
-    valueGetter: (element) => element.data?.mechanicalCompletionStatus,
-    cellRenderer: (props: ICellRendererProps<Pipetest, string | null>) => {
+    headerName: domainNames.checklistStatus,
+    colId: 'workflow',
+    valueGetter: (element) => element.data?.workflow,
+    cellRenderer: (props: ICellRendererProps<Pipetest, PipetestWorkflowStep[]>) => {
       if (!props.value) return;
-      return (
-        <StatusCircle
-          content={props.value}
-          statusColor={pipetestStatusColormap[props.value as BaseStatus]}
-        />
-      );
+
+      return <WorkflowVisual workflowSteps={mapWorkflowStepsToStep(props.value)} />;
     },
   },
   {
-    headerName: domainNames.checklistStatus,
-    colId: 'formStatus',
-    valueGetter: (element) => element.data?.formStatus,
+    headerName: domainNames.mcStatus,
+    colId: 'mechanicalCompletionStatus',
+    valueGetter: (element) => element.data?.mechanicalCompletionStatus,
     cellRenderer: (props: ICellRendererProps<Pipetest, string | null>) => {
       if (!props.value) return;
       return (

libs/pipingshared/src/lib/index.ts

@@ -1 +1,2 @@
 export * from './types';
+export * from './utils';

libs/pipingshared/src/lib/types/pipetest.ts

@@ -34,6 +34,7 @@ export type Pipetest = {
   heatTraceCableNos: string[];
   commissioningPackageUrl?: string;
   mechanicalCompletionUrl?: string;
+  workflow: PipetestWorkflowStep[]
 };
 
 export type Checklist = {
@@ -59,3 +60,10 @@ export type InsulationTag = {
   description: string;
   status: string;
 };
+
+export type PipetestWorkflowStep = {
+  stepTag: string;
+  stepName: string;
+  stepValue: string;
+  status: string;
+};

libs/pipingshared/src/lib/utils/index.ts

@@ -0,0 +1 @@
+export * from './workflowHelpers';

libs/pipingshared/src/lib/utils/workflowHelpers.ts

@@ -0,0 +1,16 @@
+import { BaseStatus, workflowStatusColorMap, workflowStatusTextColorMap, WorkflowStep } from "@cc-components/shared";
+import { PipetestWorkflowStep } from "../types";
+
+
+export const mapWorkflowStepsToStep = (workflowSteps: PipetestWorkflowStep[]): WorkflowStep[] => {
+    return workflowSteps.map((step) => {
+        return {
+            color: workflowStatusColorMap[step.status as BaseStatus],
+            textColor: workflowStatusTextColorMap[step.status as BaseStatus],
+            circleText: step.stepValue,
+            popoverText: `${step.stepName}, ${step.status}`,
+            status: step.status,
+            isActive: step.status !== 'IN',
+        };
+    });
+};

libs/pipingsidesheet/src/lib/ui-sidesheet/PipingSidesheet.tsx

@@ -1,4 +1,4 @@
-import { Pipetest } from '@cc-components/pipingshared';
+import { mapWorkflowStepsToStep, Pipetest } from '@cc-components/pipingshared';
 import { useState } from 'react';
 import { Tabs } from '@equinor/eds-core-react';
 import styled from 'styled-components';
@@ -10,6 +10,7 @@ import {
   BaseStatus,
   LinkCell,
   StatusCircle,
+  WorkflowVisual,
   hasProperty,
   pipetestStatusColormap,
 } from '@cc-components/shared';
@@ -120,16 +121,7 @@ const PipingSidesheetContent = (props: Required<PipingProps>) => {
         <BannerItem title="Current step" value={item.checklistStep} />
         <BannerItem
           title="Checklist status"
-          value={
-            item.formStatus ? (
-              <StatusCircle
-                content={item.formStatus}
-                statusColor={pipetestStatusColormap[item.formStatus as BaseStatus]}
-              />
-            ) : (
-              'N/A'
-            )
-          }
+          value={<WorkflowVisual workflowSteps={mapWorkflowStepsToStep(item.workflow)} />}
         />
         <BannerItem
           title="Comm Pkg"
@@ -211,11 +203,10 @@ const PipingSidesheetContent = (props: Required<PipingProps>) => {
   );
 };
 
-
 export const PipingSidesheet = (props: PipingProps) => {
   const { id, item, close } = props;
 
-  const { data, isLoading, error } = useGetPipetest(id, item)
+  const { data, isLoading, error } = useGetPipetest(id, item);
 
   if (isLoading) {
     return <SidesheetSkeleton close={close} />;
@@ -225,5 +216,5 @@ export const PipingSidesheet = (props: PipingProps) => {
     return <div>Failed to get Pipetest with id: {id}</div>;
   }
 
-  return (<PipingSidesheetContent id={id} item={data} close={close} />);
+  return <PipingSidesheetContent id={id} item={data} close={close} />;
 };

libs/shared/src/packages/index.ts

@@ -17,3 +17,4 @@ export * from './cc-api';
 export * from './root-app-wrapper';
 export * from './fusion-framework';
 export * from './utils-domain';
+export * from './workflow-visual';

libs/shared/src/packages/mapping/src/lib/index.ts

@@ -9,3 +9,4 @@ export {
   orderedProCoSysStatuses,
 } from './procosys';
 export { pipetestAndHeatTraceColorMap } from './pipetestAndHeatTraceColor';
+export { workflowStatusColorMap, workflowStatusTextColorMap } from './workflowStatusColorMap';

libs/shared/src/packages/mapping/src/lib/workflowStatusColorMap.ts

@@ -0,0 +1,19 @@
+import { tokens } from '@equinor/eds-tokens';
+import { WorkflowStepStatus } from '@cc-components/shared';
+
+export const workflowStatusColorMap: Record<WorkflowStepStatus, string> = {
+  OS: tokens.colors.ui.background__medium.hex,
+  PB: '#ffc107',
+  PA: '#ff4081',
+  OK: '#00c853',
+  IN: tokens.colors.text.static_icons__primary_white.hex,
+} as const;
+
+
+export const workflowStatusTextColorMap: Record<WorkflowStepStatus, string> = {
+  OS: tokens.colors.text.static_icons__default.hex,
+  PB: tokens.colors.text.static_icons__default.hex,
+  PA: tokens.colors.text.static_icons__primary_white.hex,
+  OK: tokens.colors.text.static_icons__primary_white.hex,
+  IN: tokens.colors.ui.background__medium.hex
+} as const; 

libs/shared/src/packages/types/src/lib/index.ts

@@ -3,3 +3,4 @@ export * from './pcsFollowUpStatus';
 export * from './pcsStatus';
 export { type PackageStatus } from './packageStatus';
 export { type BaseStatus } from './baseStatus';
+export { type WorkflowStepStatus } from './workflowStepStatus';

libs/shared/src/packages/types/src/lib/workflowStepStatus.ts

@@ -0,0 +1 @@
+export type WorkflowStepStatus = 'OS' | 'OK' | 'PA' | 'PB' | 'IN';

libs/shared/src/packages/workflow-visual/index.ts

@@ -0,0 +1 @@
+export * from './src';

libs/shared/src/packages/workflow-visual/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

libs/shared/src/packages/workflow-visual/src/lib/WorkflowDot.tsx

@@ -0,0 +1,49 @@
+import { tokens } from '@equinor/eds-tokens';
+import { Tooltip } from '@equinor/eds-core-react';
+import { useRef } from 'react';
+import styled from 'styled-components';
+
+import { WorkflowStep } from './workflowStep';
+
+interface WorkflowDotProps {
+  step: WorkflowStep;
+}
+
+export const WorkflowDot = (props: WorkflowDotProps) => {
+  const { color, textColor, isActive, circleText, popoverText } = props.step;
+
+  return (
+    <StepCircleWrapper>
+      <Tooltip title={popoverText}>
+        <StepCircle color={color} textColor={textColor} isActive={isActive}>
+          {circleText}
+        </StepCircle>
+      </Tooltip>
+    </StepCircleWrapper>
+  );
+};
+
+type StepCircleProps = {
+  color: string;
+  textColor: string;
+  isActive: boolean;
+};
+
+const StepCircleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StepCircle = styled.div<StepCircleProps>`
+  height: 16px;
+  width: 16px;
+  border-radius: 17px;
+  font-size: 11px;
+  color: ${(p) => `${p.textColor}`};
+  line-height: 18px;
+  text-align: center;
+  background: ${(p) => p.color};
+  outline: ${(p) =>
+    !p.isActive ? `1px dashed ${tokens.colors.ui.background__medium.hex}` : null};
+  cursor: ${(p) => (!p.isActive ? 'not-allowed' : 'pointer')};
+`;

libs/shared/src/packages/workflow-visual/src/lib/WorkflowVisual.tsx

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { WorkflowDot } from './WorkflowDot';
+import { WorkflowStep } from './workflowStep';
+
+export interface WorkflowVisualProps {
+  workflowSteps: WorkflowStep[];
+}
+
+export const WorkflowVisual = (props: WorkflowVisualProps) => {
+  const { workflowSteps } = props;
+  return (
+    <>
+      <WorkflowStepContainer>
+        {workflowSteps.map((x) => {
+          return (
+            <WorkflowStep>
+              <WorkflowDot step={x} />
+            </WorkflowStep>
+          );
+        })}
+      </WorkflowStepContainer>
+    </>
+  );
+};
+
+const WorkflowStepContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const WorkflowStep = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 2px;
+`;

libs/shared/src/packages/workflow-visual/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './WorkflowVisual';
+export * from './workflowStep';

libs/shared/src/packages/workflow-visual/src/lib/workflowStep.ts

@@ -0,0 +1,8 @@
+export type WorkflowStep = {
+    color: string;
+    textColor: string;
+    circleText: string;
+    popoverText: string;
+    status: string;
+    isActive: boolean;
+}