Feat (Advanced Settings): Make new "Appearance" category (opensearch-…

…project#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 <rmerqg@amazon.com> * updated changelog Signed-off-by: Josh Romero <rmerqg@amazon.com> * Update theme description add link to forum Signed-off-by: Josh Romero <rmerqg@amazon.com> * Update snapshots Signed-off-by: Josh Romero <rmerqg@amazon.com> * update forum link Signed-off-by: Josh Romero <rmerqg@amazon.com> * Update src/core/server/ui_settings/settings/theme.ts Co-authored-by: Miki <amoo_miki@yahoo.com> Signed-off-by: Josh Romero <rmerqg@amazon.com> --------- Signed-off-by: Josh Romero <rmerqg@amazon.com> Co-authored-by: Miki <miki@amazon.com> Co-authored-by: Miki <amoo_miki@yahoo.com>
joshuarrrr · Sep 1, 2023 · 3e1ef80 · 3e1ef80
1 parent c886b00
commit 3e1ef80
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Vis Colors] Remove customized colors from sample visualizations and dashboards ([#4741](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4741))
 - [Vis Colors] Update color mapper to prioritize unique colors per visualization rather than across entire dashboard ([#4890](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4890))
 - [Decouple] Allow plugin manifest config to define semver compatible OpenSearch plugin and verify if it is installed on the cluster([#4612](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4612))
+- [Advanced Settings] Consolidate settings into new "Appearance" category and add category IDs ([#4845](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4845))
 - Adds Data explorer framework and implements Discover using it ([#4806](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4806))
 - [Theme] Make `next` theme the default ([#4854](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4854/))
 

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 @@