feat: add i18n to option labels in version comparison (#1477)

src/admin/components/views/Version/RenderFieldsToDiff/fields/Select/index.scss

@@ -0,0 +1,10 @@
+@import '../../../../../../scss/styles.scss';
+
+.select-diff {
+  &__locale-label {
+    margin-right: base(.25);
+    background: var(--theme-elevation-100);
+    padding: base(.25);
+    border-radius: $style-radius-m;
+  }
+}

src/admin/components/views/Version/RenderFieldsToDiff/fields/Select/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
+import { useTranslation } from 'react-i18next';
+import type { i18n as Ii18n } from 'i18next';
+import Label from '../../Label';
+import { diffStyles } from '../styles';
+import { Props } from '../types';
+import { getTranslation } from '../../../../../../../utilities/getTranslation';
+import { OptionObject, SelectField } from '../../../../../../../fields/config/types';
+
+import './index.scss';
+
+const baseClass = 'select-diff';
+
+const getOptionsToRender = (value: string, options: SelectField['options'], hasMany: boolean): string | OptionObject | (OptionObject | string)[] => {
+  if (hasMany && Array.isArray(value)) {
+    return value.map((val) => options.find((option) => (typeof option === 'string' ? option : option.value) === val));
+  }
+  return options.find((option) => (typeof option === 'string' ? option : option.value) === value);
+};
+
+const getTranslatedOptions = (options: string | OptionObject | (OptionObject | string)[], i18n: Ii18n): string => {
+  if (Array.isArray(options)) {
+    return options.map((option) => (typeof option === 'string' ? option : getTranslation(option.label, i18n))).join(', ');
+  }
+  return typeof options === 'string' ? options : getTranslation(options.label, i18n);
+};
+
+const Select: React.FC<Props> = ({ field, locale, version, comparison, diffMethod }) => {
+  let placeholder = '';
+  const { t, i18n } = useTranslation('general');
+
+  if (version === comparison) placeholder = `[${t('noValue')}]`;
+
+  const comparisonToRender = typeof comparison !== 'undefined' ? getTranslatedOptions(getOptionsToRender(comparison, field.options, field.hasMany), i18n) : placeholder;
+  const versionToRender = typeof version !== 'undefined' ? getTranslatedOptions(getOptionsToRender(version, field.options, field.hasMany), i18n) : placeholder;
+
+  return (
+    <div className={baseClass}>
+      <Label>
+        {locale && (
+          <span className={`${baseClass}__locale-label`}>{locale}</span>
+        )}
+        {getTranslation(field.label, i18n)}
+      </Label>
+      <ReactDiffViewer
+        styles={diffStyles}
+        compareMethod={DiffMethod[diffMethod]}
+        oldValue={comparisonToRender}
+        newValue={typeof versionToRender !== 'undefined' ? versionToRender : placeholder}
+        splitView
+        hideLineNumbers
+        showDiffOnly={false}
+      />
+    </div>
+  );
+};
+
+export default Select;

src/admin/components/views/Version/RenderFieldsToDiff/fields/index.tsx

@@ -3,6 +3,7 @@ import Nested from './Nested';
 import Iterable from './Iterable';
 import Relationship from './Relationship';
 import Tabs from './Tabs';
+import Select from './Select';
 
 export default {
   text: Text,
@@ -11,14 +12,14 @@ export default {
   email: Text,
   code: Text,
   checkbox: Text,
-  radio: Text,
+  radio: Select,
   row: Nested,
   collapsible: Nested,
   group: Nested,
   array: Iterable,
   blocks: Iterable,
   date: Text,
-  select: Text,
+  select: Select,
   richText: Text,
   relationship: Relationship,
   upload: Relationship,

test/versions/collections/Drafts.ts

@@ -50,6 +50,31 @@ const DraftPosts: CollectionConfig = {
       type: 'textarea',
       required: true,
     },
+    {
+      name: 'radio',
+      type: 'radio',
+      options: [
+        {
+          value: 'test',
+          label: { en: 'Test en', es: 'Test es' },
+        },
+      ],
+    },
+    {
+      name: 'select',
+      type: 'select',
+      hasMany: true,
+      options: [
+        {
+          value: 'test1',
+          label: { en: 'Test1 en', es: 'Test1 es' },
+        },
+        {
+          value: 'test2',
+          label: { en: 'Test2 en', es: 'Test2 es' },
+        },
+      ],
+    },
   ],
 };
 

test/versions/e2e.todo-spec.ts

@@ -12,6 +12,13 @@
  *  - navigate to versions
  *  - versions view accurately shows number of versions
  *  - compare
+ *    - iterable
+ *    - nested
+ *    - relationship
+ *    - select w/ i18n options (label: { en: 'example', ... })
+ *    - tabs
+ *    - text
+ *    - richtext
  *  - restore version
  *  - specify locales to show
  */