Number display formatting (#1556)

* number display formatting

* - add tests

front/src/modules/ui/content-display/components/MoneyDisplay.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { formatNumber } from '~/utils/formatNumber';
+import { formatNumber } from '~/utils/format/number';
 
 const StyledTextInputDisplay = styled.div`
   overflow: hidden;

front/src/modules/ui/content-display/components/NumberDisplay.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import { formatNumber } from '~/utils/format/number';
+
+const StyledNumberDisplay = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;
+
+type OwnProps = {
+  value: string;
+};
+
+export function NumberDisplay({ value }: OwnProps) {
+  return (
+    <StyledNumberDisplay>
+      {value && formatNumber(Number(value))}
+    </StyledNumberDisplay>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { TextDisplay } from '@/ui/content-display/components/TextDisplay';
+import { NumberDisplay } from '@/ui/content-display/components/NumberDisplay';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext';
@@ -34,7 +34,7 @@ export function GenericEditableNumberField() {
       <EditableField
         IconLabel={currentEditableFieldDefinition.Icon}
         editModeContent={<GenericEditableNumberFieldEditMode />}
-        displayModeContent={<TextDisplay text={fieldValue} />}
+        displayModeContent={<NumberDisplay value={fieldValue} />}
         isDisplayModeContentEmpty={!fieldValue}
       />
     </RecoilScope>

front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { TextDisplay } from '@/ui/content-display/components/TextDisplay';
+import { NumberDisplay } from '@/ui/content-display/components/NumberDisplay';
 import type { ViewFieldNumberMetadata } from '@/ui/editable-field/types/ViewField';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
@@ -36,7 +36,7 @@ export function GenericEditableNumberCell({
           columnDefinition={columnDefinition}
         />
       }
-      nonEditModeContent={<TextDisplay text={fieldValue} />}
+      nonEditModeContent={<NumberDisplay value={fieldValue} />}
     ></EditableCell>
   );
 }

front/src/utils/format/__tests__/number.test.ts

@@ -0,0 +1,17 @@
+import { formatNumber } from '../number';
+
+// This tests the en-US locale by default
+describe('formatNumber', () => {
+  it(`Should format 123 correctly`, () => {
+    expect(formatNumber(123)).toEqual('123');
+  });
+  it(`Should format decimal numbers correctly`, () => {
+    expect(formatNumber(123.92)).toEqual('123.92');
+  });
+  it(`Should format large numbers correctly`, () => {
+    expect(formatNumber(1234567)).toEqual('1,234,567');
+  });
+  it(`Should format large numbers with a decimal point correctly`, () => {
+    expect(formatNumber(7654321.89)).toEqual('7,654,321.89');
+  });
+});

front/src/utils/format/number.ts

@@ -0,0 +1,3 @@
+export function formatNumber(value: number): string {
+  return value.toLocaleString();
+}

front/src/utils/formatNumber.ts

@@ -1,4 +0,0 @@
-export function formatNumber(value: number) {
-  // Formats the value to a string and add commas to it ex: 50,000 | 500,000
-  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}