diff --git a/common/ActionStatusSummary.ts b/common/ActionStatusSummary.ts index d8f698567..df8f973e9 100644 --- a/common/ActionStatusSummary.ts +++ b/common/ActionStatusSummary.ts @@ -36,16 +36,17 @@ 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 = ( @@ -53,14 +54,20 @@ export const getStatusColorForAction = ( 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); }; diff --git a/components/actions/ActionCard.tsx b/components/actions/ActionCard.tsx index 7651e9303..42ce47249 100644 --- a/components/actions/ActionCard.tsx +++ b/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'; diff --git a/components/actions/ActionsTable.js b/components/actions/ActionsTable.js index 1e12d31cd..58f689487 100644 --- a/components/actions/ActionsTable.js +++ b/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 ( - - ); + const statusSummary = getStatusSummary(plan, action.statusSummary); + const actionWithStatusSummary = Object.assign({}, action, { statusSummary }); + return ; }; function ActionsTable(props) { const { t } = useTranslation(); diff --git a/components/common/StatusBadge.tsx b/components/common/StatusBadge.tsx index dba60fe2c..bb2659d93 100644 --- a/components/common/StatusBadge.tsx +++ b/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) => { }; 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 (
-
{statusName ?? statusSummary.label}
+
{statusName ?? statusSummary?.label}
); }; diff --git a/components/dashboard/ImpactGroupActionList.js b/components/dashboard/ImpactGroupActionList.js index be8ab4048..f75fc0e00 100644 --- a/components/dashboard/ImpactGroupActionList.js +++ b/components/dashboard/ImpactGroupActionList.js @@ -18,13 +18,9 @@ const ActionName = styled.span` const Status = (props) => { const { action, plan } = props; - - return ( - - ); + const statusSummary = getStatusSummary(plan, action.statusSummary); + const actionWithStatusSummary = Objects.assign({}, action, { statusSummary }); + return ; }; const ImpactGroupActionList = (props) => { diff --git a/components/dashboard/cells/StatusCell.tsx b/components/dashboard/cells/StatusCell.tsx index f2d40fba1..8255897dd 100644 --- a/components/dashboard/cells/StatusCell.tsx +++ b/components/dashboard/cells/StatusCell.tsx @@ -25,7 +25,7 @@ const StatusCell = ({ action, plan }: Props) => { return (