Minor: Fix count formatting (#17968)

* Remove the count formatting for single digit count

* Localization changes

* Add and fix existing tests for new changes

* fix TestCaseFeed unit test

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts

@@ -281,7 +281,7 @@ test.describe('Activity feed', () => {
       page.locator(
         '[data-testid="message-container"] .active [data-testid="reply-count"]'
       )
-    ).toContainText('04 Replies');
+    ).toContainText('4 Replies');
 
     // Deleting last 2 comments from the Feed
     const feedReplies = page.locator(
@@ -305,7 +305,7 @@ test.describe('Activity feed', () => {
       page.locator(
         '[data-testid="message-container"] .active [data-testid="reply-count"]'
       )
-    ).toContainText('02 Replies');
+    ).toContainText('2 Replies');
   });
 
   test('Update Description Task on Columns', async ({ page }) => {
@@ -581,7 +581,7 @@ test.describe('Activity feed', () => {
 
     expect(
       page.locator(`${FIRST_FEED_SELECTOR} [data-testid="reply-count"]`)
-    ).toContainText('01 Reply');
+    ).toContainText('1 Reply');
   });
 });
 

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/TestCaseFeed/TestCaseFeed.test.tsx

@@ -30,9 +30,9 @@ describe('Test TestCaseFeed Component', () => {
 
     expect(screen.getByText('TestSummaryGraph')).toBeInTheDocument();
 
-    expect(screen.getByTestId('test-Success-value')).toContainHTML('02');
+    expect(screen.getByTestId('test-Success-value')).toContainHTML('2');
-    expect(screen.getByTestId('test-Aborted-value')).toContainHTML('01');
+    expect(screen.getByTestId('test-Aborted-value')).toContainHTML('1');
-    expect(screen.getByTestId('test-Failed-value')).toContainHTML('01');
+    expect(screen.getByTestId('test-Failed-value')).toContainHTML('1');
   });
 
   it('Should not render TestSummaryGraph if all status is success', async () => {
@@ -40,9 +40,9 @@ describe('Test TestCaseFeed Component', () => {
 
     expect(screen.getByText('label.test-suite-summary:')).toBeInTheDocument();
 
-    expect(screen.getByTestId('test-Success-value')).toContainHTML('04');
+    expect(screen.getByTestId('test-Success-value')).toContainHTML('4');
-    expect(screen.getByTestId('test-Aborted-value')).toContainHTML('00');
+    expect(screen.getByTestId('test-Aborted-value')).toContainHTML('0');
-    expect(screen.getByTestId('test-Failed-value')).toContainHTML('00');
+    expect(screen.getByTestId('test-Failed-value')).toContainHTML('0');
 
     expect(screen.queryByText('TestSummaryGraph')).not.toBeInTheDocument();
   });

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardFooter/FeedCardFooter.tsx

@@ -115,9 +115,7 @@ function FeedCardFooter({
               {postLength <= 1
                 ? t('label.one-reply')
                 : t('label.number-reply-plural', {
-                    number: postLength.toLocaleString(undefined, {
+                    number: postLength,
-                      minimumIntegerDigits: 2,
-                    }),
                   })}
             </Typography.Text>
             {latestReplyTimeStamp && (

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/TestSuiteSummaryWidget/TestSuiteSummaryWidget.component.tsx

@@ -18,7 +18,6 @@ import {
   TestSummary,
 } from '../../../../generated/tests/testCase';
 import { getTestCaseExecutionSummary } from '../../../../rest/testAPI';
-import { formTwoDigitNumber } from '../../../../utils/CommonUtils';
 
 const TestSuiteSummaryWidget = ({
   testSuite,
@@ -49,24 +48,24 @@ const TestSuiteSummaryWidget = ({
   }, [testSuite]);
 
   if (isLoading) {
-    return <Skeleton.Input active />;
+    return <Skeleton.Input active data-tesid="loader" />;
   }
 
   return (
     <div className="d-flex justify-end">
       <div className="profiler-item green" data-testid="test-passed">
         <div className="font-medium" data-testid="test-passed-value">
-          {formTwoDigitNumber(summary?.success ?? 0)}
+          {summary?.success ?? 0}
         </div>
       </div>
       <div className="profiler-item amber" data-testid="test-aborted">
         <div className="font-medium" data-testid="test-aborted-value">
-          {formTwoDigitNumber(summary?.aborted ?? 0)}
+          {summary?.aborted ?? 0}
         </div>
       </div>
       <div className="profiler-item red" data-testid="test-failed">
         <div className="font-medium" data-testid="test-failed-value">
-          {formTwoDigitNumber(summary?.failed ?? 0)}
+          {summary?.failed ?? 0}
         </div>
       </div>
     </div>

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/TestSuiteSummaryWidget/TestSuiteSummaryWidget.test.tsx

@@ -0,0 +1,98 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+import { getTestCaseExecutionSummary } from '../../../../rest/testAPI';
+import TestSuiteSummaryWidget from './TestSuiteSummaryWidget.component';
+
+const mockTestSuite = { id: 'example', type: 'testSuite' };
+
+jest.mock('antd', () => ({
+  ...jest.requireActual('antd'),
+  Skeleton: {
+    Input: jest.fn().mockImplementation(() => <div>Skeleton.Input</div>),
+  },
+}));
+
+jest.mock('../../../../rest/testAPI', () => ({
+  getTestCaseExecutionSummary: jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      success: 5,
+      aborted: 1,
+      failed: 2,
+    })
+  ),
+}));
+
+describe('TestSuiteSummaryWidget', () => {
+  it('should show loader when fetching test suite summary', async () => {
+    await act(async () => {
+      render(<TestSuiteSummaryWidget testSuite={mockTestSuite} />);
+
+      expect(screen.getByText('Skeleton.Input')).toBeInTheDocument();
+
+      expect(screen.queryByTestId('test-passed-value')).toBeNull();
+      expect(screen.queryByTestId('test-aborted-value')).toBeNull();
+      expect(screen.queryByTestId('test-failed-value')).toBeNull();
+    });
+  });
+
+  it('should render correct status counts', async () => {
+    await act(async () => {
+      render(<TestSuiteSummaryWidget testSuite={mockTestSuite} />);
+    });
+
+    expect(screen.getByTestId('test-passed-value')).toHaveTextContent('5');
+    expect(screen.getByTestId('test-aborted-value')).toHaveTextContent('1');
+    expect(screen.getByTestId('test-failed-value')).toHaveTextContent('2');
+  });
+
+  it('should render 0 count if no testSuite is passed in prop', async () => {
+    await act(async () => {
+      render(<TestSuiteSummaryWidget />);
+    });
+
+    expect(screen.getByTestId('test-passed-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-aborted-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-failed-value')).toHaveTextContent('0');
+  });
+
+  it('should render 0 count if no value is returned for respective count', async () => {
+    (getTestCaseExecutionSummary as jest.Mock).mockImplementationOnce(() =>
+      Promise.resolve({})
+    );
+
+    await act(async () => {
+      render(<TestSuiteSummaryWidget testSuite={mockTestSuite} />);
+    });
+
+    expect(screen.getByTestId('test-passed-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-aborted-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-failed-value')).toHaveTextContent('0');
+  });
+
+  it('should render 0 count if getTestCaseExecutionSummary fails', async () => {
+    (getTestCaseExecutionSummary as jest.Mock).mockImplementationOnce(() =>
+      Promise.reject({})
+    );
+
+    await act(async () => {
+      render(<TestSuiteSummaryWidget testSuite={mockTestSuite} />);
+    });
+
+    expect(screen.getByTestId('test-passed-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-aborted-value')).toHaveTextContent('0');
+    expect(screen.getByTestId('test-failed-value')).toHaveTextContent('0');
+  });
+});

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.component.tsx

@@ -37,7 +37,6 @@ import useCustomLocation from '../../../../hooks/useCustomLocation/useCustomLoca
 import { getListTestCaseIncidentStatus } from '../../../../rest/incidentManagerAPI';
 import { getLatestTableProfileByFqn } from '../../../../rest/tableAPI';
 import { getTestCaseExecutionSummary } from '../../../../rest/testAPI';
-import { formTwoDigitNumber } from '../../../../utils/CommonUtils';
 import {
   getCurrentMillis,
   getEpochMillisForPastDays,
@@ -161,7 +160,7 @@ function TableSummary({
           <div
             className="font-semibold text-lg"
             data-testid="test-passed-value">
-            {formTwoDigitNumber(testSuiteSummary?.success ?? 0)}
+            {testSuiteSummary?.success ?? 0}
           </div>
           <div className="text-xs text-grey-muted">{`${t(
             'label.test-plural'
@@ -171,7 +170,7 @@ function TableSummary({
           <div
             className="font-semibold text-lg"
             data-testid="test-aborted-value">
-            {formTwoDigitNumber(testSuiteSummary?.aborted ?? 0)}
+            {testSuiteSummary?.aborted ?? 0}
           </div>
           <div className="text-xs text-grey-muted">{`${t(
             'label.test-plural'
@@ -181,7 +180,7 @@ function TableSummary({
           <div
             className="font-semibold text-lg"
             data-testid="test-failed-value">
-            {formTwoDigitNumber(testSuiteSummary?.failed ?? 0)}
+            {testSuiteSummary?.failed ?? 0}
           </div>
           <div className="text-xs text-grey-muted">{`${t(
             'label.test-plural'

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.test.tsx

@@ -193,9 +193,9 @@ describe('TableSummary component tests', () => {
     expect(testsPassedLabel).toBeInTheDocument();
     expect(testsAbortedLabel).toBeInTheDocument();
     expect(testsFailedLabel).toBeInTheDocument();
-    expect(testsPassedValue.textContent).toBe('00');
+    expect(testsPassedValue.textContent).toBe('0');
-    expect(testsAbortedValue.textContent).toBe('00');
+    expect(testsAbortedValue.textContent).toBe('0');
-    expect(testsFailedValue.textContent).toBe('00');
+    expect(testsFailedValue.textContent).toBe('0');
   });
 
   it('column test case count should appear', async () => {
@@ -221,8 +221,8 @@ describe('TableSummary component tests', () => {
     const testsAbortedValue = screen.getByTestId('test-aborted-value');
     const testsFailedValue = screen.getByTestId('test-failed-value');
 
-    expect(testsPassedValue.textContent).toBe('03');
+    expect(testsPassedValue.textContent).toBe('3');
-    expect(testsAbortedValue.textContent).toBe('01');
+    expect(testsAbortedValue.textContent).toBe('1');
-    expect(testsFailedValue.textContent).toBe('01');
+    expect(testsFailedValue.textContent).toBe('1');
   });
 });

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "OpenMetadata JWT-Token",
     "on-demand": "Auf Abruf",
     "on-lowercase": "auf",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "Öffnen",
     "open-lowercase": "öffnen",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "OpenMetadata JWT Token",
     "on-demand": "On Demand",
     "on-lowercase": "on",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "Open",
     "open-lowercase": "open",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "Token JWT de OpenMetadata",
     "on-demand": "Bajo Demanda",
     "on-lowercase": "en",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "Abrir",
     "open-lowercase": "abrir",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "Jeton JWT OpenMetadata",
     "on-demand": "Sur Demande",
     "on-lowercase": "sur",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "Ouvrir",
     "open-lowercase": "ouvrir",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "OpenMetadata JWT Token",
     "on-demand": "על פי דרישה",
     "on-lowercase": "על",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "פתוח",
     "open-lowercase": "פתוח",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "OpenMetadata JWT Token",
     "on-demand": "On Demand",
     "on-lowercase": "の上の",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "開く",
     "open-lowercase": "開く",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "OpenMetadata JWT-token",
     "on-demand": "Op verzoek",
     "on-lowercase": "op",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "Open",
     "open-lowercase": "open",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "توکن JWT OpenMetadata",
     "on-demand": "درخواست‌شده",
     "on-lowercase": "روی",
-    "one-reply": "01 پاسخ",
+    "one-reply": "1 پاسخ",
     "open": "باز",
     "open-lowercase": "باز",
     "open-metadata": "متادیتای باز",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "Token JWT OpenMetadata",
     "on-demand": "Sob Demanda",
     "on-lowercase": "em",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "Abrir",
     "open-lowercase": "abrir",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "JWT-токен OpenMetadata",
     "on-demand": "По запросу",
     "on-lowercase": "на",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "Открыто",
     "open-lowercase": "открыть",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -800,7 +800,7 @@
     "om-jwt-token": "OpenMetadata JWT 令牌",
     "on-demand": "即时",
     "on-lowercase": "on",
-    "one-reply": "01 Reply",
+    "one-reply": "1 Reply",
     "open": "打开",
     "open-lowercase": "打开",
     "open-metadata": "OpenMetadata",

openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -591,13 +591,6 @@ export const getStatisticsDisplayValue = (
   return formatNumberWithComma(displayValue);
 };
 
-export const formTwoDigitNumber = (number: number) => {
-  return number.toLocaleString('en-US', {
-    minimumIntegerDigits: 2,
-    useGrouping: false,
-  });
-};
-
 export const digitFormatter = (value: number) => {
   // convert 1000 to 1k
   return Intl.NumberFormat('en', {

openmetadata-ui/src/main/resources/ui/src/utils/FeedUtils.tsx

@@ -59,7 +59,6 @@ import {
 } from '../rest/feedsAPI';
 import { searchData } from '../rest/miscAPI';
 import {
-  formTwoDigitNumber,
   getEntityPlaceHolder,
   getPartialNameFromFQN,
   getPartialNameFromTableFQN,
@@ -685,7 +684,7 @@ export const getTestCaseResultCount = (
     <Typography.Text
       className="font-medium text-md"
       data-testid={`test-${status}-value`}>
-      {formTwoDigitNumber(count)}
+      {count}
     </Typography.Text>
   </div>
 );