Feat (Advanced Settings): Make new "Appearance" category (#4845)

* Feat (Advanced Settings): Make new "Appearance" category And remove "Accessibility". Give category panels IDs so they can be deep linked Signed-off-by: Josh Romero <[email protected]> * updated changelog Signed-off-by: Josh Romero <[email protected]> * Update theme description add link to forum Signed-off-by: Josh Romero <[email protected]> * Update snapshots Signed-off-by: Josh Romero <[email protected]> * update forum link Signed-off-by: Josh Romero <[email protected]> * Update src/core/server/ui_settings/settings/theme.ts Co-authored-by: Miki <[email protected]> Signed-off-by: Josh Romero <[email protected]> --------- Signed-off-by: Josh Romero <[email protected]> Co-authored-by: Miki <[email protected]> Co-authored-by: Miki <[email protected]> (cherry picked from commit 3e1ef80) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
opensearch-project · Sep 1, 2023 · 05fe5e8 · 05fe5e8
1 parent 993ebc0
commit 05fe5e8
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 3 deletions.
diff --git a/src/core/server/ui_settings/settings/accessibility.ts b/src/core/server/ui_settings/settings/accessibility.ts
@@ -43,7 +43,7 @@ export const getAccessibilitySettings = (): Record<string, UiSettingsParams> =>
         defaultMessage:
           'Turn off all unnecessary animations in the OpenSearch Dashboards UI. Refresh the page to apply the changes.',
       }),
-      category: ['accessibility'],
+      category: ['appearance'],
       requiresPageReload: true,
       schema: schema.boolean(),
     },

diff --git a/src/core/server/ui_settings/settings/navigation.ts b/src/core/server/ui_settings/settings/navigation.ts
@@ -77,6 +77,7 @@ export const getNavigationSettings = (): Record<string, UiSettingsParams> => {
           defaultMessage: 'Legacy',
         }),
       },
+      category: ['appearance'],
       schema: schema.oneOf([schema.literal('modern'), schema.literal('legacy')]),
     },
   };

diff --git a/src/core/server/ui_settings/settings/theme.ts b/src/core/server/ui_settings/settings/theme.ts
@@ -43,6 +43,7 @@ export const getThemeSettings = (): Record<string, UiSettingsParams> => {
         defaultMessage: `Enable a dark mode for the OpenSearch Dashboards UI. A page refresh is required for the setting to be applied.`,
       }),
       requiresPageReload: true,
+      category: ['appearance'],
       schema: schema.boolean(),
     },
     'theme:version': {
@@ -53,9 +54,14 @@ export const getThemeSettings = (): Record<string, UiSettingsParams> => {
       type: 'select',
       options: ['v7', 'Next (preview)'],
       description: i18n.translate('core.ui_settings.params.themeVersionText', {
-        defaultMessage: `Switch between the theme used for the current and next version of OpenSearch Dashboards, A page refresh is required for the setting to be applied.`,
+        defaultMessage: `<p>Switch between the themes used for the current and next versions of OpenSearch Dashboards. A page refresh is required for the setting to be applied.</p><p><a href="{href}">{linkText}</a></p>`,
+        values: {
+          href: 'https://forum.opensearch.org/t/feedback-on-dark-mode-experience/15725',
+          linkText: 'Theme feedback',
+        },
       }),
       requiresPageReload: true,
+      category: ['appearance'],
       schema: schema.oneOf([schema.literal('v7'), schema.literal('Next (preview)')]),
     },
   };

diff --git a/.../advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap b/.../advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
@@ -257,7 +257,7 @@ export class Form extends PureComponent<FormProps> {
   renderCategory(category: Category, settings: FieldSetting[], totalSettings: number) {
     return (
       <Fragment key={category}>
-        <EuiPanel paddingSize="l">
+        <EuiPanel paddingSize="l" id={category}>
           <EuiForm>
             <EuiText>
               <EuiFlexGroup alignItems="baseline">

diff --git a/src/plugins/advanced_settings/public/management_app/lib/get_category_name.ts b/src/plugins/advanced_settings/public/management_app/lib/get_category_name.ts
@@ -36,6 +36,9 @@ const names: Record<string, string> = {
   general: i18n.translate('advancedSettings.categoryNames.generalLabel', {
     defaultMessage: 'General',
   }),
+  appearance: i18n.translate('advancedSettings.categoryNames.appearanceLabel', {
+    defaultMessage: 'Appearance',
+  }),
   timeline: i18n.translate('advancedSettings.categoryNames.timelineLabel', {
     defaultMessage: 'Timeline',
   }),
-Original file line number
+Diff line change
@@ Expand Up @@
               defaultMessage: 'Legacy',
             }),
           },
+          category: ['appearance'],
           schema: schema.oneOf([schema.literal('modern'), schema.literal('legacy')]),
         },
       };
@@ Expand Down @@