Use action.color in dashboard status column too if available

Make the coloring a bit more consistent.

common/ActionStatusSummary.ts

@@ -36,31 +36,38 @@ const getCacheKey = (
 
 export const getStatusSummary = memoize(_getStatusSummary, getCacheKey);
 
-export const getStatusColor = (color: string, theme: Theme) => {
+export const getThemeColor = (color: string, theme: Theme) => {
   return theme.graphColors[color];
 };
 
-interface ActionWithStatusSummary {
+export interface ActionWithStatusSummary {
   statusSummary?: {
     color?: string;
     identifier?: ActionStatusSummaryIdentifier;
+    label?: string;
   };
-  color?: string;
+  color?: string | null;
 }
 
 export const getStatusColorForAction = (
   action: ActionWithStatusSummary,
   plan: PlanContextType,
   theme: Theme
 ) => {
-  const c = action?.color;
-  if (c != null) {
-    return getStatusColor(c, theme);
+  const { color } = action;
+  if (color != null) {
+    return getThemeColor(color, theme);
   }
-  const s = action?.statusSummary;
-  if (s == null || (s?.identifier == null && s?.color == null)) {
+  const { statusSummary } = action;
+  if (statusSummary == null) {
+    return null;
+  }
+  if (statusSummary.color != null) {
+    return getThemeColor(statusSummary.color, theme);
+  }
+  if (statusSummary == null || statusSummary.identifier == null) {
     throw new Error('Action data is missing statusSummary');
   }
-  const statusSummary = s?.color == null ? getStatusSummary(plan, s) : s;
-  return getStatusColor(statusSummary.color, theme);
+  const statusSummaryWithColor = getStatusSummary(plan, statusSummary);
+  return getThemeColor(statusSummaryWithColor.color, theme);
 };

components/actions/ActionCard.tsx

@@ -6,10 +6,7 @@ import styled from 'styled-components';
 import { gql } from '@apollo/client';
 
 import { cleanActionStatus } from 'common/preprocess';
-import {
-  getStatusColor,
-  getStatusColorForAction,
-} from 'common/ActionStatusSummary';
+import { getStatusColorForAction } from 'common/ActionStatusSummary';
 import { ActionLink } from 'common/links';
 import { useTheme } from 'common/theme';
 import { getActionTermContext, useTranslation } from 'common/i18n';

components/actions/ActionsTable.js

@@ -54,13 +54,9 @@ const ACTION_ROW_FRAGMENT = gql`
 const Status = (props) => {
   const { action, plan } = props;
   const checkedStatus = cleanActionStatus(action, plan.actionStatuses);
-
-  return (
-    <StatusBadge
-      plan={plan}
-      statusSummary={getStatusSummary(plan, action.statusSummary)}
-    />
-  );
+  const statusSummary = getStatusSummary(plan, action.statusSummary);
+  const actionWithStatusSummary = Object.assign({}, action, { statusSummary });
+  return <StatusBadge plan={plan} action={actionWithStatusSummary} />;
 };
 function ActionsTable(props) {
   const { t } = useTranslation();

components/common/StatusBadge.tsx

@@ -6,6 +6,7 @@ import type { PlanContextType } from 'context/plan';
 import type { ActionStatusSummary } from 'common/__generated__/graphql';
 
 import {
+  ActionWithStatusSummary,
   MinimalActionStatusSummary,
   getStatusColorForAction,
 } from 'common/ActionStatusSummary';
@@ -40,19 +41,20 @@ const StatusBar = (props: PropsWithChildren<StatusBarProps>) => {
 };
 
 interface StatusBadgeProps {
-  statusSummary: ActionStatusSummary;
+  action: ActionWithStatusSummary;
   statusName?: string;
   plan: PlanContextType;
 }
 
 const StatusBadge = (props: StatusBadgeProps) => {
-  const { statusSummary, statusName, plan } = props;
+  const { action, statusName, plan } = props;
+  const { statusSummary } = action;
   const theme = useTheme();
-  const statusColor = getStatusColorForAction({ statusSummary }, plan, theme);
+  const statusColor = getStatusColorForAction(action, plan, theme);
   return (
     <StatusBar statusColor={statusColor} theme={theme}>
       <div className="color-bar" />
-      <div className="label">{statusName ?? statusSummary.label}</div>
+      <div className="label">{statusName ?? statusSummary?.label ?? ''}</div>
     </StatusBar>
   );
 };

components/dashboard/ImpactGroupActionList.js

@@ -18,13 +18,9 @@ const ActionName = styled.span`
 
 const Status = (props) => {
   const { action, plan } = props;
-
-  return (
-    <StatusBadge
-      plan={plan}
-      statusSummary={getStatusSummary(plan, action.statusSummary)}
-    />
-  );
+  const statusSummary = getStatusSummary(plan, action.statusSummary);
+  const actionWithStatusSummary = Objects.assign({}, action, { statusSummary });
+  return <StatusBadge plan={plan} action={actionWithStatusSummary} />;
 };
 
 const ImpactGroupActionList = (props) => {

components/dashboard/cells/StatusCell.tsx

@@ -25,7 +25,7 @@ const StatusCell = ({ action, plan }: Props) => {
   return (
     <StatusDisplay>
       <StatusBadge
-        statusSummary={action.statusSummary}
+        action={action}
         plan={plan}
         statusName={
           action.mergedWith