feat: add ActivityStatusChip

src/modules/Dashboard/components/ActivityStatusChip/ActivityStatusChip.const.tsx

@@ -0,0 +1,18 @@
+import { Icons } from 'svgSprite';
+import { ChipOwnProps } from '@mui/material';
+
+import { ActivityAssignmentStatus } from 'api';
+
+export const ActivityStatusColors: Record<ActivityAssignmentStatus, ChipOwnProps['color']> = {
+ active: 'success',
+ inactive: 'warning',
+ hidden: 'warning',
+ deleted: 'error',
+};
+
+export const ActivityStatusIcons: Record<ActivityAssignmentStatus, Icons> = {
+ active: 'check-outlined',
+ inactive: 'cross-outlined',
+ hidden: 'eye-hidden',
+ deleted: 'trash',
+};

src/modules/Dashboard/components/ActivityStatusChip/ActivityStatusChip.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+
+import { ActivityAssignmentStatus } from 'api';
+import { Chip, ChipShape, Svg, Tooltip } from 'shared/components';
+import { StyledFlexTopCenter, variables } from 'shared/styles';
+
+import { ActivityStatusColors, ActivityStatusIcons } from './ActivityStatusChip.const';
+
+export const ActivityStatusChip = ({ status }: { status: ActivityAssignmentStatus }) => {
+ const { t } = useTranslation('app');
+
+ return (
+ <Tooltip tooltipTitle={t(`activityStatus.${status}Tooltip`)} maxWidth="50rem">
+ <StyledFlexTopCenter>
+ <Chip
+ color={ActivityStatusColors[status]}
+ size="small"
+ icon={<Svg aria-hidden id={ActivityStatusIcons[status]} height={18} width={18} />}
+ shape={ChipShape.Rounded}
+ title={t(`activityStatus.${status}`)}
+ sx={status === 'hidden' ? { backgroundColor: variables.palette.orange_light } : undefined}
+ />
+ </StyledFlexTopCenter>
+ </Tooltip>
+ );
+};

src/modules/Dashboard/components/ActivityStatusChip/index.ts

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

src/modules/Dashboard/components/index.ts

@@ -9,3 +9,4 @@ export * from './DashboardTable';
 export * from './ParticipantSnippet';
 export * from './ParticipantTagChip';
 export * from './ParticipantDropdown';
+export * from './ActivityStatusChip';

src/modules/Dashboard/features/Participant/Assignments/ActivityListItem/ActivityListItem.tsx

@@ -3,14 +3,14 @@ import {
  StyledActivityThumbnailImg,
  StyledFlexTopCenter,
 } from 'shared/styles';
-import { ActivityFlowThumbnail } from 'modules/Dashboard/components';
+import { ActivityFlowThumbnail, ActivityStatusChip } from 'modules/Dashboard/components';
 import { FlowChip } from 'shared/components';
 
 import { ActivityListItemProps } from './ActivityListItem.types';
 import { StyledActivityListItem, StyledActivityName } from './ActivityListItem.styles';
 
 export const ActivityListItem = ({
- activityOrFlow: { isFlow, images, name },
+ activityOrFlow: { isFlow, images, name, status },
  onClick,
  children,
 }: ActivityListItemProps) => (
@@ -25,6 +25,7 @@ export const ActivityListItem = ({
  </StyledActivityThumbnailContainer>
  <StyledActivityName>{name}</StyledActivityName>
  {isFlow && <FlowChip size="small" />}
+ <ActivityStatusChip status={status} />
  </StyledFlexTopCenter>
 
  <StyledFlexTopCenter sx={{ gap: 0.8, ml: 'auto' }}>{children}</StyledFlexTopCenter>

src/resources/app-en.json

@@ -124,6 +124,16 @@
  "activitySettings": "Activity Settings",
  "activitySplashscreen": "Splash Screen",
  "activitySplashScreenDescription": "An image that is displayed to a respondent before the activity.",
+ "activityStatus": {
+ "active": "Active",
+ "inactive": "Inactive",
+ "hidden": "Hidden",
+ "deleted": "Unavailable",
+ "activeTooltip": "At least one Participant is assigned to complete this Activity or Flow.",
+ "inactiveTooltip": "No Participants are assigned to complete this Activity or Flow.",
+ "hiddenTooltip": "This Activity or Flow is hidden in the Activity Builder and cannot be assigned.",
+ "deletedTooltip": "This Activity or Flow has been deleted and cannot be assigned."
+ },
  "activityUnavailableAtTime": "Activity is unavailable at this time",
  "addActivity": "Add Activity",
  "addBlankActivity": "Add Blank Activity",

src/resources/app-fr.json

@@ -124,6 +124,16 @@
  "activitySettings": "Paramètres de l'activité",
  "activitySplashscreen": "Écran d'accueil",
  "activitySplashScreenDescription": "Une image qui est affichée à un utilisateur avant l'activité.",
+ "activityStatus": {
+ "active": "Actif",
+ "inactive": "Inactif",
+ "hidden": "Caché",
+ "deleted": "Indisponible",
+ "activeTooltip": "Au moins un participant est assigné pour compléter cette activité ou ce flux.",
+ "inactiveTooltip": "Aucun participant n'est assigné pour compléter cette activité ou ce flux.",
+ "hiddenTooltip": "Cette activité ou ce flux est caché dans le créateur d'activités et ne peut pas être assigné.",
+ "deletedTooltip": "Cette activité ou ce flux a été supprimé et ne peut pas être assigné."
+ },
  "activityUnavailableAtTime": "L'activité n'est pas disponible pour le moment",
  "addActivity": "Ajouter une activité",
  "addBlankActivity": "Ajouter une activité vide",

src/shared/styles/theme.utils.ts

@@ -37,6 +37,16 @@ export const getChipStyleOverrides = ({
  backgroundColor: isFilled ? variables.palette.primary_container : undefined,
  },
  };
+ case 'success':
+ return {
+ color: variables.palette.on_surface_variant,
+ [key]: variables.palette.green_light,
+
+ '&[tabindex="0"]:hover': {
+ borderColor: variables.palette.green,
+ backgroundColor: isFilled ? variables.palette.green : undefined,
+ },
+ };
  case 'warning':
  return {
  color: variables.palette.on_surface_variant,

src/shared/styles/variables/palette.ts

@@ -49,6 +49,8 @@ export const palette = {
  neutral60: '#909194',
  neutral90: '#e2e2e5',
  yellow_light: '#f5e6b3',
+ green_light: '#b7d7d3',
+ orange_light: '#f4d5b6',
 
  black: '#000',
  white: '#fff',

src/svgSprite.ts

@@ -1406,6 +1406,21 @@ const icons = {
  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 8.25V2.25C11.25 2.0375 11.3219 1.85937 11.4656 1.71562C11.6094 1.57187 11.7875 1.5 12 1.5H16.5C16.7125 1.5 16.8906 1.57187 17.0344 1.71562C17.1781 1.85937 17.25 2.0375 17.25 2.25V6C17.25 6.2125 17.1781 6.39063 17.0344 6.53438C16.8906 6.67813 16.7125 6.75 16.5 6.75H12.75L11.25 8.25ZM4.63125 9.61875C5.21875 10.2063 5.925 10.5 6.75 10.5C7.575 10.5 8.28125 10.2063 8.86875 9.61875C9.45625 9.03125 9.75 8.325 9.75 7.5C9.75 6.675 9.45625 5.96875 8.86875 5.38125C8.28125 4.79375 7.575 4.5 6.75 4.5C5.925 4.5 5.21875 4.79375 4.63125 5.38125C4.04375 5.96875 3.75 6.675 3.75 7.5C3.75 8.325 4.04375 9.03125 4.63125 9.61875ZM0.75 14.4V16.5H12.75V14.4C12.75 13.9875 12.6438 13.6 12.4312 13.2375C12.2188 12.875 11.925 12.6 11.55 12.4125C10.9125 12.0875 10.1938 11.8125 9.39375 11.5875C8.59375 11.3625 7.7125 11.25 6.75 11.25C5.7875 11.25 4.90625 11.3625 4.10625 11.5875C3.30625 11.8125 2.5875 12.0875 1.95 12.4125C1.575 12.6 1.28125 12.875 1.06875 13.2375C0.85625 13.6 0.75 13.9875 0.75 14.4ZM11.25 14.4V15H2.25V14.4C2.25 14.2625 2.28438 14.1375 2.35313 14.025C2.42188 13.9125 2.5125 13.825 2.625 13.7625C3.075 13.5375 3.65313 13.3125 4.35938 13.0875C5.06563 12.8625 5.8625 12.75 6.75 12.75C7.6375 12.75 8.43437 12.8625 9.14062 13.0875C9.84688 13.3125 10.425 13.5375 10.875 13.7625C10.9875 13.825 11.0781 13.9125 11.1469 14.025C11.2156 14.1375 11.25 14.2625 11.25 14.4ZM7.80938 8.55938C7.51563 8.85313 7.1625 9 6.75 9C6.3375 9 5.98438 8.85313 5.69063 8.55938C5.39687 8.26563 5.25 7.9125 5.25 7.5C5.25 7.0875 5.39687 6.73438 5.69063 6.44063C5.98438 6.14687 6.3375 6 6.75 6C7.1625 6 7.51563 6.14687 7.80938 6.44063C8.10313 6.73438 8.25 7.0875 8.25 7.5C8.25 7.9125 8.10313 8.26563 7.80938 8.55938Z"/>
  </symbol>
  `,
+ 'check-outlined': `
+ <symbol viewBox="0 0 18 18" id="svg-check-outlined">
+ <path d="M11.04 6.5925L7.8225 9.8175L6.585 8.58C6.51777 8.50149 6.43503 8.43772 6.34198 8.39271C6.24893 8.34769 6.14758 8.32239 6.04429 8.3184C5.941 8.31441 5.83801 8.33182 5.74176 8.36952C5.64552 8.40723 5.55811 8.46442 5.48502 8.53751C5.41192 8.6106 5.35473 8.69801 5.31703 8.79426C5.27932 8.8905 5.26192 8.9935 5.2659 9.09679C5.26989 9.20008 5.29519 9.30143 5.34021 9.39448C5.38523 9.48753 5.44899 9.57026 5.5275 9.6375L7.29 11.4075C7.36008 11.477 7.4432 11.532 7.53457 11.5693C7.62595 11.6067 7.7238 11.6256 7.8225 11.625C8.01926 11.6242 8.20781 11.5461 8.3475 11.4075L12.0975 7.6575C12.1678 7.58778 12.2236 7.50483 12.2617 7.41343C12.2998 7.32204 12.3194 7.22401 12.3194 7.125C12.3194 7.02599 12.2998 6.92796 12.2617 6.83657C12.2236 6.74517 12.1678 6.66222 12.0975 6.5925C11.957 6.45281 11.7669 6.37441 11.5688 6.37441C11.3706 6.37441 11.1805 6.45281 11.04 6.5925ZM9 1.5C7.51664 1.5 6.0666 1.93987 4.83323 2.76398C3.59986 3.58809 2.63856 4.75943 2.07091 6.12987C1.50325 7.50032 1.35472 9.00832 1.64411 10.4632C1.9335 11.918 2.64781 13.2544 3.6967 14.3033C4.7456 15.3522 6.08197 16.0665 7.53683 16.3559C8.99168 16.6453 10.4997 16.4968 11.8701 15.9291C13.2406 15.3614 14.4119 14.4001 15.236 13.1668C16.0601 11.9334 16.5 10.4834 16.5 9C16.5 8.01509 16.306 7.03982 15.9291 6.12987C15.5522 5.21993 14.9997 4.39314 14.3033 3.6967C13.6069 3.00026 12.7801 2.44781 11.8701 2.0709C10.9602 1.69399 9.98492 1.5 9 1.5ZM9 15C7.81332 15 6.65328 14.6481 5.66658 13.9888C4.67989 13.3295 3.91085 12.3925 3.45673 11.2961C3.0026 10.1997 2.88378 8.99334 3.11529 7.82946C3.3468 6.66557 3.91825 5.59647 4.75736 4.75736C5.59648 3.91824 6.66558 3.3468 7.82946 3.11529C8.99335 2.88378 10.1997 3.0026 11.2961 3.45672C12.3925 3.91085 13.3295 4.67988 13.9888 5.66658C14.6481 6.65327 15 7.81331 15 9C15 10.5913 14.3679 12.1174 13.2426 13.2426C12.1174 14.3679 10.5913 15 9 15Z"/>
+ </symbol>
+ `,
+ 'eye-hidden': `
+ <symbol viewBox="0 0 18 18" id="svg-eye-hidden">
+ <path d="M8.20416 4.55916C8.46723 4.51884 8.73302 4.49878 8.99916 4.49916C11.3842 4.49916 13.6267 6.21666 14.9317 8.99916C14.7321 9.42261 14.5067 9.83338 14.2567 10.2292C14.1773 10.352 14.1356 10.4954 14.1367 10.6417C14.1383 10.8053 14.1935 10.964 14.2938 11.0934C14.394 11.2228 14.5338 11.3158 14.6919 11.3583C14.85 11.4008 15.0176 11.3904 15.1693 11.3287C15.3209 11.267 15.4481 11.1574 15.5317 11.0167C15.8811 10.4676 16.1846 9.89065 16.4392 9.29166C16.4794 9.19808 16.5002 9.09728 16.5002 8.99541C16.5002 8.89355 16.4794 8.79275 16.4392 8.69916C14.9242 5.18166 12.0742 2.99916 8.99916 2.99916C8.64716 2.99739 8.29573 3.02751 7.94916 3.08916C7.85067 3.10591 7.75644 3.14188 7.67185 3.19504C7.58727 3.24821 7.51398 3.31751 7.45618 3.39899C7.39837 3.48047 7.35718 3.57254 7.33496 3.66994C7.31274 3.76735 7.30992 3.86817 7.32666 3.96666C7.34341 4.06515 7.37938 4.15938 7.43255 4.24397C7.4857 4.32856 7.55501 4.40184 7.63649 4.45965C7.71797 4.51745 7.81004 4.55864 7.90744 4.58086C8.00485 4.60309 8.10567 4.60591 8.20416 4.58916V4.55916ZM2.78166 1.71666C2.71173 1.64673 2.62872 1.59126 2.53735 1.55342C2.44598 1.51557 2.34806 1.49609 2.24916 1.49609C2.15027 1.49609 2.05234 1.51557 1.96098 1.55342C1.86961 1.59126 1.78659 1.64673 1.71666 1.71666C1.57543 1.85789 1.49609 2.04944 1.49609 2.24916C1.49609 2.44889 1.57543 2.64043 1.71666 2.78166L4.04166 5.09916C2.98084 6.12031 2.13656 7.34465 1.55916 8.69916C1.51786 8.79379 1.49655 8.89592 1.49655 8.99916C1.49655 9.10241 1.51786 9.20454 1.55916 9.29916C3.07416 12.8167 5.92416 14.9992 8.99916 14.9992C10.347 14.9899 11.663 14.5885 12.7867 13.8442L15.2167 16.2817C15.2864 16.352 15.3693 16.4078 15.4607 16.4458C15.5521 16.4839 15.6502 16.5035 15.7492 16.5035C15.8482 16.5035 15.9462 16.4839 16.0376 16.4458C16.129 16.4078 16.2119 16.352 16.2817 16.2817C16.352 16.2119 16.4078 16.129 16.4458 16.0376C16.4839 15.9462 16.5035 15.8482 16.5035 15.7492C16.5035 15.6502 16.4839 15.5521 16.4458 15.4607C16.4078 15.3693 16.352 15.2864 16.2817 15.2167L2.78166 1.71666ZM7.55166 8.60916L9.38916 10.4467C9.2624 10.483 9.13102 10.5007 8.99916 10.4992C8.60134 10.4992 8.21981 10.3411 7.9385 10.0598C7.6572 9.77852 7.49916 9.39699 7.49916 8.99916C7.49763 8.8673 7.51531 8.73592 7.55166 8.60916ZM8.99916 13.4992C6.61416 13.4992 4.37166 11.7817 3.07416 8.99916C3.55873 7.92947 4.24647 6.9641 5.09916 6.15666L6.42666 7.49916C6.11485 8.06826 5.99597 8.72312 6.08786 9.3655C6.17975 10.0079 6.47745 10.6032 6.93631 11.062C7.39516 11.5209 7.99044 11.8186 8.63282 11.9105C9.2752 12.0024 9.93006 11.8835 10.4992 11.5717L11.6917 12.7492C10.875 13.2298 9.94673 13.4884 8.99916 13.4992Z"/>
+ </symbol>
+ `,
+ 'cross-outlined': `
+ <symbol viewBox="0 0 18 18" id="svg-cross-outlined">
+ <path d="M11.7829 6.21591C11.7131 6.14562 11.6302 6.08982 11.5388 6.05174C11.4474 6.01367 11.3494 5.99406 11.2504 5.99406C11.1514 5.99406 11.0533 6.01367 10.9619 6.05174C10.8705 6.08982 10.7876 6.14562 10.7179 6.21591L9.00036 7.94091L7.28286 6.21591C7.14164 6.07468 6.95009 5.99534 6.75036 5.99534C6.55064 5.99534 6.35909 6.07468 6.21786 6.21591C6.07664 6.35714 5.9973 6.54869 5.9973 6.74841C5.9973 6.94814 6.07664 7.13968 6.21786 7.28091L7.94286 8.99841L6.21786 10.7159C6.14757 10.7856 6.09177 10.8686 6.0537 10.96C6.01562 11.0514 5.99602 11.1494 5.99602 11.2484C5.99602 11.3474 6.01562 11.4454 6.0537 11.5368C6.09177 11.6282 6.14757 11.7112 6.21786 11.7809C6.28759 11.8512 6.37054 11.907 6.46193 11.9451C6.55333 11.9832 6.65136 12.0028 6.75036 12.0028C6.84937 12.0028 6.9474 11.9832 7.0388 11.9451C7.13019 11.907 7.21314 11.8512 7.28286 11.7809L9.00036 10.0559L10.7179 11.7809C10.7876 11.8512 10.8705 11.907 10.9619 11.9451C11.0533 11.9832 11.1514 12.0028 11.2504 12.0028C11.3494 12.0028 11.4474 11.9832 11.5388 11.9451C11.6302 11.907 11.7131 11.8512 11.7829 11.7809C11.8532 11.7112 11.909 11.6282 11.947 11.5368C11.9851 11.4454 12.0047 11.3474 12.0047 11.2484C12.0047 11.1494 11.9851 11.0514 11.947 10.96C11.909 10.8686 11.8532 10.7856 11.7829 10.7159L10.0579 8.99841L11.7829 7.28091C11.8532 7.21119 11.909 7.12824 11.947 7.03684C11.9851 6.94545 12.0047 6.84742 12.0047 6.74841C12.0047 6.6494 11.9851 6.55137 11.947 6.45998C11.909 6.36858 11.8532 6.28563 11.7829 6.21591ZM14.3029 3.69591C13.611 2.97958 12.7834 2.40822 11.8684 2.01515C10.9534 1.62208 9.96922 1.41519 8.97337 1.40653C7.97753 1.39788 6.98993 1.58764 6.06821 1.96475C5.14649 2.34186 4.3091 2.89875 3.6049 3.60295C2.90071 4.30714 2.34381 5.14453 1.9667 6.06626C1.5896 6.98798 1.39983 7.97558 1.40849 8.97142C1.41714 9.96727 1.62404 10.9514 2.0171 11.8664C2.41017 12.7815 2.98154 13.6091 3.69786 14.3009C4.38972 15.0172 5.2173 15.5886 6.13233 15.9817C7.04736 16.3747 8.03151 16.5816 9.02736 16.5903C10.0232 16.5989 11.0108 16.4092 11.9325 16.0321C12.8542 15.655 13.6916 15.0981 14.3958 14.3939C15.1 13.6897 15.6569 12.8523 16.034 11.9306C16.4111 11.0088 16.6009 10.0212 16.5922 9.0254C16.5836 8.02956 16.3767 7.04541 15.9836 6.13038C15.5906 5.21535 15.0192 4.38776 14.3029 3.69591ZM13.2454 13.2434C12.2644 14.2255 10.9733 14.837 9.59196 14.9739C8.21065 15.1108 6.82462 14.7645 5.67001 13.994C4.51539 13.2235 3.66363 12.0766 3.25984 10.7485C2.85606 9.42048 2.92522 7.99352 3.45555 6.71075C3.98588 5.42798 4.94457 4.36877 6.16828 3.71358C7.392 3.05839 8.80502 2.84776 10.1666 3.11757C11.5282 3.38737 12.7541 4.12093 13.6355 5.19326C14.5169 6.26558 14.9993 7.61034 15.0004 8.99841C15.003 9.78688 14.8493 10.568 14.5481 11.2967C14.2468 12.0254 13.804 12.687 13.2454 13.2434Z"/>
+ </symbol>
+ `,
 };
 
 export type Icons = keyof typeof icons;