Merge pull request #29390 from backstage/rugvip/newer

core-components: fix AlertDisplay messaging

.changeset/funny-lizards-clean.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed the messaging in the `AlertDisplay` where it was claiming that there were older messages available rather than newer.

packages/core-components/report-alpha.api.md

@@ -55,8 +55,8 @@ export const coreComponentsTranslationRef: TranslationRef<
     readonly 'oauthRequestDialog.rejectAll': 'Reject All';
     readonly 'supportButton.title': 'Support';
     readonly 'supportButton.close': 'Close';
-    readonly 'alertDisplay.message_one': '({{ count }} older message)';
-    readonly 'alertDisplay.message_other': '({{ count }} older messages)';
+    readonly 'alertDisplay.message_one': '({{ count }} newer message)';
+    readonly 'alertDisplay.message_other': '({{ count }} newer messages)';
     readonly 'autoLogout.stillTherePrompt.title': 'Logging out due to inactivity';
     readonly 'autoLogout.stillTherePrompt.buttonText': "Yes! Don't log me out";
     readonly 'proxiedSignInPage.title': 'You do not appear to be signed in. Please try reloading the browser page.';

packages/core-components/src/components/AlertDisplay/AlertDisplay.test.tsx

@@ -92,7 +92,7 @@ describe('<AlertDisplay />', () => {
         </TestApiProvider>,
       );
 
-      expect(screen.getByText('(2 older messages)')).toBeInTheDocument();
+      expect(screen.getByText('(2 newer messages)')).toBeInTheDocument();
     });
   });
 
@@ -189,19 +189,19 @@ describe('<AlertDisplay />', () => {
         jest.advanceTimersByTime(1000);
       });
       expect(queryByText('transient message one')).toBeInTheDocument();
-      expect(queryByText('(1 older message)')).toBeInTheDocument();
+      expect(queryByText('(1 newer message)')).toBeInTheDocument();
       act(() => {
         jest.advanceTimersByTime(1000);
       });
       expect(queryByText('transient message one')).toBeInTheDocument();
-      expect(queryByText('(2 older messages)')).toBeInTheDocument();
+      expect(queryByText('(2 newer messages)')).toBeInTheDocument();
 
       // Validate removing messages
       act(() => {
         jest.advanceTimersByTime(5000);
       });
       expect(queryByText('transient message two')).toBeInTheDocument();
-      expect(queryByText('(1 older message)')).toBeInTheDocument();
+      expect(queryByText('(1 newer message)')).toBeInTheDocument();
 
       act(() => {
         jest.advanceTimersByTime(5000);
@@ -231,12 +231,12 @@ describe('<AlertDisplay />', () => {
       // 1s in, message 1 still shown, message 2 added in background
       act(() => jest.advanceTimersByTime(1000));
       expect(queryByText('transient message one')).toBeInTheDocument();
-      expect(queryByText('(1 older message)')).toBeInTheDocument();
+      expect(queryByText('(1 newer message)')).toBeInTheDocument();
 
       // 2s in, message 2 now shown, message 3 added
       act(() => jest.advanceTimersByTime(1000));
       expect(queryByText('transient message two')).toBeInTheDocument();
-      expect(queryByText('(1 older message)')).toBeInTheDocument();
+      expect(queryByText('(1 newer message)')).toBeInTheDocument();
 
       // 3.5s in, message 3 now shown
       act(() => jest.advanceTimersByTime(1500));
@@ -264,7 +264,7 @@ describe('<AlertDisplay />', () => {
       // 1s in, message 1 still shown, message 2 added in background
       act(() => jest.advanceTimersByTime(1000));
       expect(queryByText('transient message one')).toBeInTheDocument();
-      expect(queryByText('(1 older message)')).toBeInTheDocument();
+      expect(queryByText('(1 newer message)')).toBeInTheDocument();
 
       // manually remove message 1
       fireEvent.click(screen.getByTestId('error-button-close'));
@@ -273,7 +273,7 @@ describe('<AlertDisplay />', () => {
       // 2s in, message 2 now shown, message 3 added
       act(() => jest.advanceTimersByTime(1000));
       expect(queryByText('transient message two')).toBeInTheDocument();
-      expect(queryByText('(1 older message)')).toBeInTheDocument();
+      expect(queryByText('(1 newer message)')).toBeInTheDocument();
 
       // 3s in, message 3 now shown
       act(() => jest.advanceTimersByTime(1500));
@@ -330,19 +330,19 @@ describe('<AlertDisplay />', () => {
         jest.advanceTimersByTime(1000);
       });
       expect(queryByText('transient message one')).toBeInTheDocument();
-      expect(queryByText('(1 older message)')).toBeInTheDocument();
+      expect(queryByText('(1 newer message)')).toBeInTheDocument();
       act(() => {
         jest.advanceTimersByTime(1000);
       });
       expect(queryByText('transient message one')).toBeInTheDocument();
-      expect(queryByText('(2 older messages)')).toBeInTheDocument();
+      expect(queryByText('(2 newer messages)')).toBeInTheDocument();
 
       // Validate removing messages
       act(() => {
         jest.advanceTimersByTime(5000);
       });
       expect(queryByText('permanent message')).toBeInTheDocument();
-      expect(queryByText('(1 older message)')).toBeInTheDocument();
+      expect(queryByText('(1 newer message)')).toBeInTheDocument();
 
       fireEvent.click(screen.getByTestId('error-button-close'));
       expect(queryByText('transient message three')).toBeInTheDocument();

packages/core-components/src/translation.ts

@@ -106,8 +106,8 @@ export const coreComponentsTranslationRef = createTranslationRef({
       },
     },
     alertDisplay: {
-      message_one: '({{ count }} older message)',
-      message_other: '({{ count }} older messages)',
+      message_one: '({{ count }} newer message)',
+      message_other: '({{ count }} newer messages)',
     },
     autoLogout: {
       stillTherePrompt: {