Improve union type default handling in values schema (#4698)

Closes #4688

Signed-off-by: Cintia Sánchez García <cynthiasg@icloud.com>

Author: cynthia-sg

web/src/layout/package/changelog/Content.test.tsx

@@ -70,13 +70,23 @@ const defaultProps = {
   state: null,
 };
 
+// Fixed date for stable snapshot tests (~1 month after fixture timestamp 1604048487)
+const fixedDate = new Date('2020-11-30T00:00:00Z');
+
 describe('Changelog content ', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
+  beforeAll(() => {
+    vi.useFakeTimers({
+      now: fixedDate,
+      toFake: ['Date'],
+    });
   });
 
-  beforeEach(() => {
-    jest.spyOn(Date, 'now').mockReturnValueOnce(new Date('2019/11/24').getTime());
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
   it('creates snapshot', () => {

web/src/layout/package/changelog/Modal.test.tsx

@@ -21,6 +21,9 @@ vi.mock('react-router-dom', () => ({
 const scrollIntoViewMock = jest.fn();
 window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
+// Fixed date for stable snapshot tests (~1 month after fixture timestamp 1604048487)
+const fixedDate = new Date('2020-11-30T00:00:00Z');
+
 const getMockChangelog = (fixtureId: string): ChangeLog[] => {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/Modal/${fixtureId}.json`) as ChangeLog[];
@@ -58,12 +61,19 @@ const defaultProps = {
 };
 
 describe('ChangelogModal', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
+  beforeAll(() => {
+    vi.useFakeTimers({
+      now: fixedDate,
+      toFake: ['Date'],
+    });
   });
 
-  beforeEach(() => {
-    jest.spyOn(Date, 'now').mockReturnValueOnce(new Date('2019/11/24').getTime());
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
   it('creates snapshot', async () => {

web/src/layout/package/changelog/__snapshots__/Content.test.tsx.snap

@@ -282,5 +282,23 @@ describe('SchemaDefinition', () => {
       expect(screen.getByText('0')).toBeInTheDocument();
       expect(screen.getAllByText('-')).toHaveLength(3);
     });
+
+    it('renders type union (string|integer) with integer default - resolves to integer', () => {
+      const props = getProps('14');
+      render(<SchemaDefinition {...props} {...defaultProps} />);
+
+      const select = screen.getByRole('combobox', { name: 'Type selection' });
+      expect(select).toBeInTheDocument();
+      expect(select).toHaveValue('integer');
+    });
+
+    it('renders type union (string|integer) with string default - resolves to string', () => {
+      const props = getProps('15');
+      render(<SchemaDefinition {...props} {...defaultProps} />);
+
+      const select = screen.getByRole('combobox', { name: 'Type selection' });
+      expect(select).toBeInTheDocument();
+      expect(select).toHaveValue('string');
+    });
   });
 });

web/src/layout/package/changelog/__snapshots__/Modal.test.tsx.snap

@@ -13,6 +13,7 @@ import { JSONSchema } from '../../../jsonschema';
 import { ActiveJSONSchemaValue } from '../../../types';
 import checkIfPropIsRequiredInSchema from '../../../utils/checkIfPropIsRequiredInSchema';
 import detectLinksInText from '../../../utils/detectLinksInText';
+import resolveSchemaTypeFromDefault from '../../../utils/resolveSchemaTypeFromDefault';
 import ButtonCopyToClipboard from '../../common/ButtonCopyToClipboard';
 import styles from './SchemaDefinition.module.css';
 
@@ -114,27 +115,25 @@ const SCHEMA_PROPS_PER_TYPE: KeywordPropsByType = {
   ],
 };
 
+const getInitialType = (def: JSONSchema): string | undefined => {
+  let currentType: string | undefined;
+  if (def.type) {
+    if (isArray(def.type)) {
+      currentType = resolveSchemaTypeFromDefault(def.type as string[], def.default);
+    } else {
+      currentType = def.type;
+    }
+  } else if (def.properties) {
+    currentType = 'object';
+  }
+  return currentType;
+};
+
 const SchemaDefinition = (props: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const def = props.def.options[props.def.active];
 
-  const getInitialType = (): string | undefined => {
-    let currentType: string | undefined;
-    if (def.type) {
-      if (isArray(def.type)) {
-        currentType = def.type[0] as string;
-      } else {
-        currentType = def.type;
-      }
-    } else {
-      if (def.properties) {
-        currentType = 'object';
-      }
-    }
-    return currentType;
-  };
-
-  const [activeType, setActiveType] = useState<string | undefined>(getInitialType());
+  const [activeType, setActiveType] = useState<string | undefined>(() => getInitialType(def));
 
   useEffect(() => {
     // Scrolls content into view when a definition is expanded
@@ -144,8 +143,8 @@ const SchemaDefinition = (props: Props) => {
   }, [props.isExpanded, ref]);
 
   useEffect(() => {
-    setActiveType(getInitialType());
-  }, [props.def.active, props.def.combinationType]);
+    setActiveType(getInitialType(def));
+  }, [def.default, def.type, def.properties, props.def.active, props.def.combinationType]);
 
   const typeDef = activeType ? SCHEMA_PROPS_PER_TYPE[activeType] : null;
 

web/src/layout/package/valuesSchema/SchemaDefinition.test.tsx

@@ -144,5 +144,33 @@ describe('SchemaLine', () => {
         expect(onActivePathChangeMock).toHaveBeenCalledWith('db.host');
       });
     });
+
+    it('renders union type (string|integer) with integer default value', () => {
+      render(
+        <SchemaLine {...getProps('12')} onActivePathChange={onActivePathChangeMock} saveSelectedOption={jest.fn()} />
+      );
+
+      expect(screen.getByText('# CPU request')).toBeInTheDocument();
+      expect(screen.getByText('cpu:')).toBeInTheDocument();
+
+      const defaultValue = screen.getByTestId('defaultValue');
+      expect(defaultValue).toBeInTheDocument();
+      expect(defaultValue).toHaveTextContent('2');
+      expect(defaultValue).toHaveClass('text-danger');
+    });
+
+    it('renders union type (string|integer) with string default value', () => {
+      render(
+        <SchemaLine {...getProps('13')} onActivePathChange={onActivePathChangeMock} saveSelectedOption={jest.fn()} />
+      );
+
+      expect(screen.getByText('# CPU request')).toBeInTheDocument();
+      expect(screen.getByText('cpu:')).toBeInTheDocument();
+
+      const defaultValue = screen.getByTestId('defaultValue');
+      expect(defaultValue).toBeInTheDocument();
+      expect(defaultValue).toHaveTextContent('500m');
+      expect(defaultValue).toHaveClass('text-warning');
+    });
   });
 });

web/src/layout/package/valuesSchema/SchemaDefinition.tsx

@@ -11,6 +11,7 @@ import { ActiveJSONSchemaValue } from '../../../types';
 import checkIfPropIsRequiredInSchema from '../../../utils/checkIfPropIsRequiredInSchema';
 import formatStringForYAML from '../../../utils/formatStringForYAML';
 import getJMESPathForValuesSchema from '../../../utils/getJMESPathForValuesSchema';
+import resolveSchemaTypeFromDefault from '../../../utils/resolveSchemaTypeFromDefault';
 import SchemaDefinition from './SchemaDefinition';
 import styles from './SchemaLine.module.css';
 
@@ -54,8 +55,14 @@ const getValue = (newValue: any): ValueProp => {
     };
   }
 
+  const defaultValue = valueToCheck.default;
+  const typeOptions = isArray(valueToCheck.type) ? valueToCheck.type : [valueToCheck.type];
+  const resolvedType = isArray(valueToCheck.type)
+    ? resolveSchemaTypeFromDefault(typeOptions as string[], defaultValue)
+    : typeOptions[0];
+
   let isLongText;
-  switch (isArray(valueToCheck.type) ? valueToCheck.type[0] : valueToCheck.type) {
+  switch (resolvedType) {
     case 'object':
       return {
         content: <span>{isEmpty(valueToCheck.default) ? '{}' : JSON.stringify(valueToCheck.default)}</span>,
@@ -87,6 +94,7 @@ const getValue = (newValue: any): ValueProp => {
       };
     case 'boolean':
     case 'integer':
+    case 'number':
       return {
         content: <span>{valueToCheck.default!.toString()}</span>,
         className: 'text-danger',

web/src/layout/package/valuesSchema/SchemaLine.test.tsx

@@ -0,0 +1,16 @@
+{
+  "def": {
+    "active": 0,
+    "combinationType": null,
+    "options": [
+      {
+        "type": ["string", "integer"],
+        "title": "CPU request",
+        "description": "CPU request for the container",
+        "default": 2
+      }
+    ],
+    "error": false
+  },
+  "defaultValue": null
+}

web/src/layout/package/valuesSchema/SchemaLine.tsx

@@ -0,0 +1,16 @@
+{
+  "def": {
+    "active": 0,
+    "combinationType": null,
+    "options": [
+      {
+        "type": ["string", "integer"],
+        "title": "CPU request",
+        "description": "CPU request for the container",
+        "default": "500m"
+      }
+    ],
+    "error": false
+  },
+  "defaultValue": null
+}