Enhancement: Emphasize workflow name

nitinmadelyn · Jul 24, 2023 · 925a9e6 · 925a9e6
1 parent 77d0d31
commit 925a9e6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/...es/SettingsPage/pages/ReviewWorkflows/components/WorkflowAttributes/WorkflowAttributes.js b/...es/SettingsPage/pages/ReviewWorkflows/components/WorkflowAttributes/WorkflowAttributes.js
@@ -144,11 +144,16 @@ export function WorkflowAttributes({
                           {
                             id: 'Settings.review-workflows.workflow.contentTypes.assigned.notice',
                             defaultMessage:
-                              '{label} {name, select, undefined {} other {<i>(assigned to {name} workflow)</i>}}',
+                              '{label} {name, select, undefined {} other {<i>(assigned to <em>{name}</em> workflow)</i>}}',
                           },
                           {
                             label: child.label,
                             name: assignedWorkflowName,
+                            em: (...children) => (
+                              <Typography as="em" fontWeight="bold">
+                                {children}
+                              </Typography>
+                            ),
                             i: (...children) => (
                               <ContentTypeTakeNotice>{children}</ContentTypeTakeNotice>
                             ),

diff --git a/...Page/pages/ReviewWorkflows/components/WorkflowAttributes/tests/WorkflowAttributes.test.js b/...Page/pages/ReviewWorkflows/components/WorkflowAttributes/tests/WorkflowAttributes.test.js
@@ -85,6 +85,14 @@ const ComponentFixture = (props) => {
   );
 };
 
+const withMarkup = (query) => (text) =>
+  query((content, node) => {
+    const hasText = (node) => node.textContent === text;
+    const childrenDontHaveText = Array.from(node.children).every((child) => !hasText(child));
+
+    return hasText(node) && childrenDontHaveText;
+  });
+
 const setup = (props) => ({
   ...render(<ComponentFixture {...props} />),
   user: userEvent.setup(),
@@ -184,11 +192,12 @@ describe('Admin | Settings | Review Workflow | WorkflowAttributes', () => {
     const { getByRole, queryByText, user } = setup();
 
     const contentTypesSelect = getByRole('combobox', { name: /associated to/i });
+    const queryByTextWithMarkup = withMarkup(queryByText);
 
     await user.click(contentTypesSelect);
 
     await waitFor(() => {
-      expect(queryByText(/\(assigned to default workflow\)/i)).not.toBeInTheDocument();
+      expect(queryByTextWithMarkup('(assigned to Default workflow)')).not.toBeInTheDocument();
     });
   });
 
@@ -198,11 +207,12 @@ describe('Admin | Settings | Review Workflow | WorkflowAttributes', () => {
     });
 
     const contentTypesSelect = getByRole('combobox', { name: /associated to/i });
+    const getByTextWithMarkup = withMarkup(getByText);
 
     await user.click(contentTypesSelect);
 
     await waitFor(() => {
-      expect(getByText(/\(assigned to default workflow\)/i)).toBeInTheDocument();
+      expect(getByTextWithMarkup('(assigned to Default workflow)')).toBeInTheDocument();
     });
   });
 
@@ -212,11 +222,12 @@ describe('Admin | Settings | Review Workflow | WorkflowAttributes', () => {
     });
 
     const contentTypesSelect = getByRole('combobox', { name: /associated to/i });
+    const getByTextWithMarkup = withMarkup(getByText);
 
     await user.click(contentTypesSelect);
 
     await waitFor(() => {
-      expect(getByText(/\(assigned to default workflow\)/i)).toBeInTheDocument();
+      expect(getByTextWithMarkup('(assigned to Default workflow)')).toBeInTheDocument();
     });
   });
 });