fix(docgen): update error state messaging (#3807)

* fix(content-explorer): Migrated Date (#3800)

* fix(docgen): update copy on error state

* fix(docgen): update styles

* fix(docgen): update test selector

---------

Co-authored-by: greg-in-a-box <103291617+greg-in-a-box@users.noreply.github.com>

i18n/en-US.properties

@@ -413,13 +413,11 @@ be.docGenSidebar.docGenTags = Doc Gen Tags
 # No tags available
 be.docGenSidebar.emptyTags = This document has no tags
 # Error message when tags could not be loaded
-be.docGenSidebar.errorTags = We couldn't load the tags
+be.docGenSidebar.errorTags = Looks like your recent changes to the Doc Gen template are yet to be processed.
 # Image tags section header
 be.docGenSidebar.imageTags = Image tags
-# Label for the refresh button
-be.docGenSidebar.refreshButton = Refresh
-# Prompt to refresh the list after an error
-be.docGenSidebar.refreshPrompt = Please refresh the list.
+# Label for the Process document button
+be.docGenSidebar.refreshButton = Process document
 # Text tags section header
 be.docGenSidebar.textTags = Text tags
 # Label for download action.

src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss

@@ -79,4 +79,8 @@
         margin-top: tokens.$space-15;
         margin-bottom: tokens.$space-4;
     }
+
+    &--message {
+        text-align: center;
+    }
 }

src/elements/content-sidebar/DocGenSidebar/Error.tsx

@@ -12,11 +12,8 @@ type Props = {
 const Error = ({ onClick }: Props) => (
     <div className="bcs-DocGen-error-state" data-testid="docgen-sidebar-error">
         <RefreshIcon className="bcs-DocGen-error-state--icon" />
-        <div>
+        <p className="bcs-DocGen-error-state--message">
             <FormattedMessage {...messages.errorCouldNotLoad} />
-        </div>
-        <p>
-            <FormattedMessage {...messages.errorRefreshList} />
         </p>
         <Button onClick={onClick}>
             <FormattedMessage {...messages.errorRefreshButton} />

src/elements/content-sidebar/DocGenSidebar/messages.tsx

@@ -23,18 +23,13 @@ const messages = defineMessages({
     },
     errorCouldNotLoad: {
         id: 'be.docGenSidebar.errorTags',
-        defaultMessage: "We couldn't load the tags",
+        defaultMessage: 'Looks like your recent changes to the Doc Gen template are yet to be processed.',
         description: 'Error message when tags could not be loaded',
     },
-    errorRefreshList: {
-        id: 'be.docGenSidebar.refreshPrompt',
-        defaultMessage: 'Please refresh the list.',
-        description: 'Prompt to refresh the list after an error',
-    },
     errorRefreshButton: {
         id: 'be.docGenSidebar.refreshButton',
-        defaultMessage: 'Refresh',
-        description: 'Label for the refresh button',
+        defaultMessage: 'Process document',
+        description: 'Label for the Process document button',
     },
 });
 

src/elements/content-sidebar/__tests__/DocGenSidebar.test.tsx

@@ -85,7 +85,7 @@ describe('elements/content-sidebar/DocGenSidebar', () => {
         const errorState = await screen.findByTestId('docgen-sidebar-error');
         expect(errorState).toBeInTheDocument();
 
-        const refreshButton = screen.getByRole('button', { name: 'Refresh' });
+        const refreshButton = screen.getByRole('button', { name: 'Process document' });
         fireEvent.click(refreshButton);
 
         await waitFor(() => expect(errorTagsMock).toBeCalledTimes(2));
@@ -96,7 +96,9 @@ describe('elements/content-sidebar/DocGenSidebar', () => {
             getDocGenTags: noDataMock,
         });
 
-        const emptyState = await screen.findByText("We couldn't load the tags");
+        const emptyState = await screen.findByText(
+            'Looks like your recent changes to the Doc Gen template are yet to be processed.',
+        );
         expect(emptyState).toBeInTheDocument();
     });
 });