Hide redundant action status visualisation

components/actions/ActionPhase.js

@@ -73,7 +73,9 @@ function Phase(props) {
   const theme = useTheme();
 
   let blockColor = theme.themeColors.light;
-  const color = getStatusColorForAction(action, plan, theme);
+  const color = statusSummary
+    ? getStatusColorForAction(action, plan, theme)
+    : theme.graphColors.grey050;
 
   let labelClass = 'disabled';
 
@@ -85,7 +87,7 @@ function Phase(props) {
   } else if (active) {
     blockColor = color;
     labelClass = 'active';
-  } else if (statusSummary.isCompleted) {
+  } else if (statusSummary?.isCompleted) {
     blockColor = color;
     labelClass = 'disabled';
   }
@@ -115,9 +117,10 @@ function ActionPhase(props) {
   }
   // Override phase name in special case statuses
   const inactive = ['cancelled', 'merged', 'postponed', 'completed'].includes(
-    status.identifier
+    status?.identifier
   );
-  if (inactive) {
+
+  if (status && inactive) {
     activePhaseName =
       status.identifier === ActionStatusSummaryIdentifier.Merged
         ? `${t('actions:action-status-merged', getActionTermContext(plan))}`
@@ -141,7 +144,7 @@ function ActionPhase(props) {
           />
         ))}
       </ul>
-      {!compact && status.identifier !== 'UNDEFINED' && (
+      {!compact && !!status && status.identifier !== 'UNDEFINED' && (
         <>
           <strong>{status.label}</strong>
           {reason && (
@@ -158,7 +161,8 @@ function ActionPhase(props) {
 }
 
 ActionPhase.propTypes = {
-  status: PropTypes.shape().isRequired,
+  /** If status is undefined, status colors and labels will be hidden */
+  status: PropTypes.shape(),
   activePhase: PropTypes.shape(),
   reason: PropTypes.string,
   phases: PropTypes.arrayOf(

components/dashboard/ActionStatusTable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useState, createContext } from 'react';
 import { Table, Button } from 'reactstrap';
 import styled from 'styled-components';
 
@@ -16,6 +16,21 @@ import {
 import { PlanContextFragment } from 'common/__generated__/graphql';
 import { COLUMN_CONFIG } from './dashboard.constants';
 
+type TActionTableContext = {
+  plan?: PlanContextFragment;
+  planViewUrl?: string | null;
+  /** Custom configuration for cell components */
+  config: {
+    hasPhaseAndStatusColumns?: boolean;
+  };
+};
+
+export const ActionTableContext = createContext<TActionTableContext>({
+  plan: undefined,
+  planViewUrl: undefined,
+  config: {},
+});
+
 const TableWrapper = styled.div`
   width: 100%;
   display: flex;
@@ -163,6 +178,12 @@ const preprocessForSorting = (
   }
 };
 
+const hasPhaseAndStatusColumns = (columns: ColumnConfig[]) =>
+  !!(
+    columns.find((c) => c.__typename === 'ImplementationPhaseColumnBlock') &&
+    columns.find((c) => c.__typename === 'StatusColumnBlock')
+  );
+
 interface Props {
   actions: ActionListAction[];
   orgs: ActionListOrganization[];
@@ -232,7 +253,15 @@ const ActionStatusTable = (props: Props) => {
     : columns;
 
   return (
-    <>
+    <ActionTableContext.Provider
+      value={{
+        plan,
+        planViewUrl,
+        config: {
+          hasPhaseAndStatusColumns: hasPhaseAndStatusColumns(filteredColumns),
+        },
+      }}
+    >
       <ToolBar>
         <ResetSorting>
           {sort.key && (
@@ -294,7 +323,7 @@ const ActionStatusTable = (props: Props) => {
           </tbody>
         </DashTable>
       </TableWrapper>
-    </>
+    </ActionTableContext.Provider>
   );
 };
 

components/dashboard/ActionTableTooltips.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
 import dayjs from 'common/dayjs';
 import {
@@ -11,6 +11,7 @@ import { ActionListAction } from './dashboard.types';
 import { PlanContextFragment } from 'common/__generated__/graphql';
 import { getTaskCounts } from './cells/TasksStatusCell';
 import { useTheme } from 'common/theme';
+import { ActionTableContext } from './ActionStatusTable';
 
 const TooltipTitle = styled.p`
   font-weight: ${(props) => props.theme.fontWeightBold};
@@ -126,14 +127,18 @@ export const TasksTooltipContent = ({ action, plan }: TooltipWithPlanProps) => {
 // TODO: Should we split implementation phase and status?
 export const ImplementationPhaseTooltipContent = ({
   action,
-  plan,
 }: TooltipWithPlanProps) => {
   const { t } = useTranslation(['common', 'actions']);
+  const { plan, config } = useContext(ActionTableContext);
 
   const activePhase = action.implementationPhase;
   const merged = action.mergedWith;
   const status = action.statusSummary;
 
+  if (!plan) {
+    return null;
+  }
+
   const getMergedName = (mergedWith, planId) => {
     if (mergedWith.plan.id !== planId) {
       return `${mergedWith.plan.shortName} ${mergedWith.identifier}`;
@@ -145,6 +150,7 @@ export const ImplementationPhaseTooltipContent = ({
   const statusDisplay = (
     <StatusLabel $color={status?.color}>{status.label}</StatusLabel>
   );
+
   // If action is merged, display merged status
   if (merged) {
     return (
@@ -156,15 +162,20 @@ export const ImplementationPhaseTooltipContent = ({
       </TooltipTitle>
     );
   }
+
   // If action has no active phase or it's cancelled, or plan has no implementation phases : display only status
   if (!activePhase || status?.identifier === 'cancelled') {
     return statusDisplay;
   }
 
   return (
     <div>
-      {statusDisplay}
-      <Divider />
+      {!config.hasPhaseAndStatusColumns && (
+        <>
+          {statusDisplay}
+          <Divider />
+        </>
+      )}
       <TooltipTitle>{t('actions:action-implementation-phase')}:</TooltipTitle>
       <PhasesTooltipList>
         {plan.actionImplementationPhases.map((phase) => (

components/dashboard/cells/ImplementationPhaseCell.tsx

@@ -2,6 +2,8 @@ import { ActionListAction } from '../dashboard.types';
 import styled from 'styled-components';
 import { PlanContextFragment } from 'common/__generated__/graphql';
 import ActionPhase from 'components/actions/ActionPhase';
+import { useContext } from 'react';
+import { ActionTableContext } from '../ActionStatusTable';
 
 interface Props {
   action: ActionListAction;
@@ -13,18 +15,28 @@ const StatusDisplay = styled.div`
   height: 100%;
 `;
 
-const ImplementationPhaseCell = ({ action, plan }: Props) => (
-  <StatusDisplay>
-    <ActionPhase
-      action={action}
-      status={action.statusSummary}
-      activePhase={action.implementationPhase}
-      reason={action.manualStatusReason}
-      mergedWith={action.mergedWith?.identifier}
-      phases={plan.actionImplementationPhases}
-      compact
-    />
-  </StatusDisplay>
-);
+const ImplementationPhaseCell = ({ action }: Props) => {
+  const { plan, config } = useContext(ActionTableContext);
+
+  if (!plan) {
+    return null;
+  }
+
+  return (
+    <StatusDisplay>
+      <ActionPhase
+        action={action}
+        status={
+          config.hasPhaseAndStatusColumns ? undefined : action.statusSummary
+        }
+        activePhase={action.implementationPhase}
+        reason={action.manualStatusReason}
+        mergedWith={action.mergedWith?.identifier}
+        phases={plan.actionImplementationPhases}
+        compact
+      />
+    </StatusDisplay>
+  );
+};
 
 export default ImplementationPhaseCell;