Only enable locale selector when multiple are available

marinaaisa · mportiz08 · web-flow · commit 715eb13b2fed · 2023-06-20T17:29:02.000-07:00
Co-authored-by: Marcus Ortiz &lt;marcus_ortiz@apple.com&gt;
diff --git a/src/App.vue b/src/App.vue
@@ -26,7 +26,13 @@
     <slot :isTargetIDE="isTargetIDE">
       <router-view class="router-content" />
       <custom-footer v-if="hasCustomFooter" :data-color-scheme="preferredColorScheme" />
-      <Footer v-else-if="!isTargetIDE" :enablei18n="enablei18n" />
+      <Footer v-else-if="!isTargetIDE">
+        <template #default="{ className }">
+          <div v-if="enablei18n" :class="className">
+            <LocaleSelector />
+          </div>
+        </template>
+      </Footer>
     </slot>
     <slot name="footer" :isTargetIDE="isTargetIDE" />
   </div>
@@ -42,13 +48,15 @@ import { fetchThemeSettings, themeSettingsState, getSetting } from 'docc-render/
 import { objectToCustomProperties } from 'docc-render/utils/themes';
 import { AppTopID } from 'docc-render/constants/AppTopID';
 import SuggestLang from 'docc-render/components/SuggestLang.vue';
+import LocaleSelector from 'docc-render/components/LocaleSelector.vue';
 
 export default {
   name: 'CoreApp',
   components: {
     Footer,
     InitialLoadingPlaceholder,
     SuggestLang,
+    LocaleSelector,
   },
   provide() {
     return {
@@ -69,6 +77,7 @@ export default {
   computed: {
     currentColorScheme: ({ appState }) => appState.systemColorScheme,
     preferredColorScheme: ({ appState }) => appState.preferredColorScheme,
+    availableLocales: ({ appState }) => appState.availableLocales,
     CSSCustomProperties: ({
       currentColorScheme,
       preferredColorScheme,
@@ -85,7 +94,9 @@ export default {
     ),
     hasCustomHeader: () => !!window.customElements.get('custom-header'),
     hasCustomFooter: () => !!window.customElements.get('custom-footer'),
-    enablei18n: () => getSetting(['features', 'docs', 'i18n', 'enable'], false),
+    enablei18n: ({ availableLocales }) => (
+      getSetting(['features', 'docs', 'i18n', 'enable'], false) && availableLocales.length > 1
+    ),
   },
   props: {
     enableThemeSettings: {
diff --git a/src/components/Article.vue b/src/components/Article.vue
@@ -34,6 +34,7 @@
 <script>
 import { PortalTarget } from 'portal-vue';
 
+import AppStore from 'docc-render/stores/AppStore';
 import NavigationBar from 'theme/components/Tutorial/NavigationBar.vue';
 import metadata from 'theme/mixins/metadata.js';
 import Body from './Article/Body.vue';
@@ -166,6 +167,7 @@ export default {
     },
   },
   created() {
+    AppStore.setAvailableLocales(this.metadata.availableLocales);
     this.store.reset();
     this.store.setReferences(this.references);
   },
@@ -174,6 +176,9 @@ export default {
     references(references) {
       this.store.setReferences(references);
     },
+    'metadata.availableLocales': function availableLocalesWatcher(availableLocales) {
+      AppStore.setAvailableLocales(availableLocales);
+    },
   },
   SectionKind,
 };
diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
@@ -151,6 +151,7 @@ import metadata from 'theme/mixins/metadata.js';
 import { buildUrl } from 'docc-render/utils/url-helper';
 import { normalizeRelativePath } from 'docc-render/utils/assets';
 
+import AppStore from 'docc-render/stores/AppStore';
 import Aside from 'docc-render/components/ContentNode/Aside.vue';
 import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue';
 import LanguageSwitcher from 'theme/components/DocumentationTopic/Summary/LanguageSwitcher.vue';
@@ -365,6 +366,10 @@ export default {
       required: false,
       validator: v => Object.prototype.hasOwnProperty.call(StandardColors, v),
     },
+    availableLocales: {
+      type: Array,
+      required: false,
+    },
   },
   provide() {
     // NOTE: this is not reactive: if this.identifier change, the provided value
@@ -533,6 +538,7 @@ export default {
           conformance,
           hasNoExpandedDocumentation,
           modules,
+          availableLocales,
           platforms,
           required: isRequirement = false,
           roleHeading,
@@ -574,6 +580,7 @@ export default {
         downloadNotAvailableSummary,
         diffAvailability,
         hasNoExpandedDocumentation,
+        availableLocales,
         hierarchy,
         role,
         identifier,
@@ -621,6 +628,7 @@ export default {
       });
     }
 
+    AppStore.setAvailableLocales(this.availableLocales || []);
     this.store.reset();
     this.store.setReferences(this.references);
   },
@@ -629,6 +637,9 @@ export default {
     references(references) {
       this.store.setReferences(references);
     },
+    availableLocales(availableLocales) {
+      AppStore.setAvailableLocales(availableLocales);
+    },
   },
 };
 </script>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -13,25 +13,16 @@
     <div class="row">
       <ColorSchemeToggle />
     </div>
-    <div v-if="enablei18n" class="row">
-      <LocaleSelector/>
-    </div>
+    <slot className="row"/>
   </footer>
 </template>
 
 <script>
 import ColorSchemeToggle from 'docc-render/components/ColorSchemeToggle.vue';
-import LocaleSelector from 'docc-render/components/LocaleSelector.vue';
 
 export default {
   name: 'Footer',
-  components: { ColorSchemeToggle, LocaleSelector },
-  props: {
-    enablei18n: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  components: { ColorSchemeToggle },
 };
 </script>
 
diff --git a/src/components/LocaleSelector.vue b/src/components/LocaleSelector.vue
@@ -30,7 +30,7 @@
 
 <script>
 import ChevronThickIcon from 'theme/components/Icons/ChevronThickIcon.vue';
-import locales from 'theme/lang/locales.json';
+import appLocales from 'theme/lang/locales.json';
 import { updateLocale, getLocaleParam } from 'docc-render/utils/i18n-utils';
 import AppStore from 'docc-render/stores/AppStore';
 
@@ -39,18 +39,19 @@ export default {
   components: {
     ChevronThickIcon,
   },
-  data() {
-    return {
-      locales,
-    };
-  },
   methods: {
     updateRouter({ target: { value: slug } }) {
       this.$router.push(getLocaleParam(slug));
       AppStore.setPreferredLocale(slug);
       updateLocale(slug, this);
     },
   },
+  computed: {
+    availableLocales: () => AppStore.state.availableLocales,
+    locales: ({ availableLocales }) => (
+      appLocales.filter(({ code }) => availableLocales.includes(code))
+    ),
+  },
 };
 
 </script>
diff --git a/src/components/Tutorial.vue b/src/components/Tutorial.vue
@@ -33,6 +33,7 @@
 <script>
 import { PortalTarget } from 'portal-vue';
 
+import AppStore from 'docc-render/stores/AppStore';
 import CodeThemeStore from 'docc-render/stores/CodeThemeStore';
 import metadata from 'theme/mixins/metadata.js';
 import isClientMobile from 'docc-render/mixins/isClientMobile';
@@ -135,6 +136,7 @@ export default {
     },
   },
   created() {
+    AppStore.setAvailableLocales(this.metadata.availableLocales);
     this.store.reset();
     this.store.setReferences(this.references);
   },
@@ -143,6 +145,9 @@ export default {
     references(references) {
       this.store.setReferences(references);
     },
+    'metadata.availableLocales': function availableLocalesWatcher(availableLocales) {
+      AppStore.setAvailableLocales(availableLocales);
+    },
   },
   mounted() {
     this.$bridge.on('codeColors', this.handleCodeColorsChange);
diff --git a/src/components/TutorialsOverview.vue b/src/components/TutorialsOverview.vue
@@ -35,6 +35,7 @@
 </template>
 
 <script>
+import AppStore from 'docc-render/stores/AppStore';
 import TutorialsOverviewStore from 'docc-render/stores/TutorialsOverviewStore';
 import Nav from 'theme/components/TutorialsOverview/Nav.vue';
 import metadata from 'theme/mixins/metadata.js';
@@ -100,6 +101,7 @@ export default {
     };
   },
   created() {
+    AppStore.setAvailableLocales(this.metadata.availableLocales);
     this.store.reset();
     this.store.setReferences(this.references);
   },
@@ -108,6 +110,9 @@ export default {
     references(references) {
       this.store.setReferences(references);
     },
+    'metadata.availableLocales': function availableLocalesWatcher(availableLocales) {
+      AppStore.setAvailableLocales(availableLocales);
+    },
   },
 };
 </script>
diff --git a/src/lang/locales/en-US.json b/src/lang/locales/en-US.json
@@ -164,7 +164,8 @@
   "read-only": "Read-only",
   "error": {
     "unknown": "An unknown error occurred.",
-    "image": "Image failed to load"
+    "image": "Image failed to load",
+    "not-found": "The page you're looking for can't be found."
   },
   "color-scheme": {
     "select": "Select a color scheme preference",
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
@@ -11,6 +11,7 @@
 import ColorScheme from 'docc-render/constants/ColorScheme';
 import ImageLoadingStrategy from 'docc-render/constants/ImageLoadingStrategy';
 import Settings from 'docc-render/utils/settings';
+import appLocales from 'theme/lang/locales.json';
 
 const supportsAutoColorScheme = (typeof window.matchMedia !== 'undefined') && [
   ColorScheme.light,
@@ -28,6 +29,7 @@ export default {
     preferredLocale: Settings.preferredLocale,
     supportsAutoColorScheme,
     systemColorScheme: ColorScheme.light,
+    availableLocales: [],
   },
   reset() {
     this.state.imageLoadingStrategy = process.env.VUE_APP_TARGET === 'ide'
@@ -43,6 +45,13 @@ export default {
     this.state.preferredColorScheme = value;
     Settings.preferredColorScheme = value;
   },
+  setAllLocalesAreAvailable() {
+    const allLocales = appLocales.map(locale => locale.code);
+    this.state.availableLocales = allLocales;
+  },
+  setAvailableLocales(locales = []) {
+    this.state.availableLocales = locales;
+  },
   setPreferredLocale(locale) {
     this.state.preferredLocale = locale;
     Settings.preferredLocale = this.state.preferredLocale;
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
@@ -9,16 +9,20 @@
 -->
 
 <template>
-  <GenericError message='The page you’re looking for can’t be found.'>
+  <GenericError :message="$t('error.not-found')">
     <slot />
   </GenericError>
 </template>
 
 <script>
 import GenericError from 'theme/components/GenericError.vue';
+import AppStore from 'docc-render/stores/AppStore';
 
 export default {
   name: 'NotFound',
   components: { GenericError },
+  created() {
+    AppStore.setAllLocalesAreAvailable();
+  },
 };
 </script>
diff --git a/src/views/ServerError.vue b/src/views/ServerError.vue
@@ -14,9 +14,13 @@
 
 <script>
 import GenericError from 'theme/components/GenericError.vue';
+import AppStore from 'docc-render/stores/AppStore';
 
 export default {
   name: 'ServerError',
   components: { GenericError },
+  created() {
+    AppStore.setAllLocalesAreAvailable();
+  },
 };
 </script>
diff --git a/tests/unit/App.spec.js b/tests/unit/App.spec.js
@@ -53,11 +53,14 @@ const GenericCSSSettings = {
   },
 };
 
+const availableLocales = ['en-US', 'zh-CN'];
+
 const createWrapper = props => shallowMount(App, {
   stubs: {
     'custom-header': true,
     'router-view': true,
     'custom-footer': true,
+    Footer,
   },
   mocks: {
     $bridge: {
@@ -137,11 +140,51 @@ describe('App', () => {
     getSetting.mockReturnValue(true);
 
     const wrapper = createWrapper();
+    wrapper.setData({
+      appState: {
+        ...wrapper.vm.appState,
+        availableLocales,
+      },
+    });
 
     const SuggestLangComponent = wrapper.find(SuggestLang);
     expect(SuggestLangComponent.exists()).toBe(true);
   });
 
+  it('renders LocaleSelector if enablei18n is true', () => {
+    const { LocaleSelector } = App.components;
+    ({ getSetting } = require('docc-render/utils/theme-settings'));
+    getSetting.mockReturnValue(true);
+
+    const wrapper = createWrapper();
+    expect(wrapper.find(LocaleSelector).exists()).toBe(false);
+    wrapper.setData({
+      appState: {
+        ...wrapper.vm.appState,
+        availableLocales,
+      },
+    });
+
+    expect(wrapper.find(LocaleSelector).exists()).toBe(true);
+  });
+
+  it('does not render LocaleSelector if there is less than two available locales', () => {
+    const { LocaleSelector } = App.components;
+    ({ getSetting } = require('docc-render/utils/theme-settings'));
+    getSetting.mockReturnValue(true);
+
+    const wrapper = createWrapper();
+    expect(wrapper.find(LocaleSelector).exists()).toBe(false);
+    wrapper.setData({
+      appState: {
+        ...wrapper.vm.appState,
+        availableLocales: ['en-US'],
+      },
+    });
+
+    expect(wrapper.find(LocaleSelector).exists()).toBe(false);
+  });
+
   it('renders the `#nav-sticky-anchor` between the header and the content', () => {
     const wrapper = createWrapper({
       slots: {
@@ -160,10 +203,10 @@ describe('App', () => {
   it('exposes a footer slot', () => {
     const wrapper = createWrapper({
       slots: {
-        footer: '<div class="footer">Footer</div>',
+        footer: '<div class="footer-slot">Footer</div>',
       },
     });
-    const footer = wrapper.find('.footer');
+    const footer = wrapper.find('.footer-slot');
     expect(footer.text()).toBe('Footer');
   });
 
diff --git a/tests/unit/components/Footer.spec.js b/tests/unit/components/Footer.spec.js
diff --git a/tests/unit/components/LocaleSelector.spec.js b/tests/unit/components/LocaleSelector.spec.js
diff --git a/tests/unit/stores/AppStore.spec.js b/tests/unit/stores/AppStore.spec.js
diff --git a/tests/unit/views/NotFound.spec.js b/tests/unit/views/NotFound.spec.js
