Remove crossComponentTranslator from Device plugin

learningequality · Oct 8, 2020 · c7d5573 · c7d5573
1 parent 6187cef
commit c7d5573
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 48 deletions.
diff --git a/kolibri/plugins/device/assets/src/views/FacilitiesPage/FacilitiesTasksPage.vue b/kolibri/plugins/device/assets/src/views/FacilitiesPage/FacilitiesTasksPage.vue
@@ -19,7 +19,7 @@
     </HeaderWithOptions>
 
     <p v-if="facilityTasks.length === 0">
-      {{ emptyTasksMessage }}
+      {{ deviceString('emptyTasksMessage') }}
     </p>
     <div>
       <FacilityTaskPanel
@@ -42,16 +42,13 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonTaskStrings from 'kolibri.coreVue.mixins.commonTaskStrings';
   import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
-  import { crossComponentTranslator } from 'kolibri.utils.i18n';
   import HeaderWithOptions from '../HeaderWithOptions';
   import { taskIsClearable } from '../../constants';
-  import ManageTasksPage from '../ManageTasksPage';
   import BackLink from '../ManageTasksPage/BackLink';
+  import commonDeviceStrings from '../commonDeviceStrings';
   import FacilityTaskPanel from './FacilityTaskPanel';
   import facilityTasksQueue from './facilityTasksQueue';
 
-  const ManageTasksPageStrings = crossComponentTranslator(ManageTasksPage);
-
   export default {
     name: 'FacilitiesTasksPage',
     metaInfo() {
@@ -64,8 +61,13 @@
       HeaderWithOptions,
       BackLink,
     },
-    mixins: [commonCoreStrings, commonTaskStrings, commonSyncElements, facilityTasksQueue],
-    props: {},
+    mixins: [
+      commonCoreStrings,
+      commonTaskStrings,
+      commonSyncElements,
+      facilityTasksQueue,
+      commonDeviceStrings,
+    ],
     data() {
       return {
         // (facilityTasksQueue) facilityTasks
@@ -75,10 +77,6 @@
       someClearableTasks() {
         return Boolean(this.facilityTasks.find(taskIsClearable));
       },
-      emptyTasksMessage() {
-        // eslint-disable-next-line kolibri/vue-no-undefined-string-uses
-        return ManageTasksPageStrings.$tr('emptyTasksMessage');
-      },
     },
     methods: {
       handleClickClearAll() {

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue
@@ -21,7 +21,7 @@
 
       <template v-if="isUnlistedChannel" v-slot:belowname>
         <KTooltip reference="lockicon" :refs="$refs" placement="top">
-          {{ $tr('unlistedChannelTooltip') }}
+          {{ deviceString('unlistedChannelLabel') }}
         </KTooltip>
         <div class="private-icons">
           <KIcon
@@ -35,7 +35,7 @@
               color: $themeTokens.textInverted,
               backgroundColor: $themeTokens.success
             }"
-          >{{ $tr('newLabel') }}</span>
+          >{{ deviceString('newChannelLabel') }}</span>
         </div>
       </template>
 
@@ -91,14 +91,15 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { selectContentPageLink } from '../manageContentLinks';
   import { PageNames } from '../../../constants';
+  import commonDeviceStrings from '../../commonDeviceStrings';
   import ChannelDetails from './ChannelDetails';
 
   export default {
     name: 'WithImportDetails',
     components: {
       ChannelDetails,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings, responsiveWindowMixin, commonDeviceStrings],
     props: {
       channel: {
         type: Object,
@@ -170,12 +171,6 @@
     $trs: {
       onYourDevice: 'Resources on device',
       selectResourcesAction: 'Select resources',
-      newLabel: {
-        message: 'New',
-        context:
-          '\nRefers to CHANNEL; indicates that it was recently updated, imported, and unlocked',
-      },
-      unlistedChannelTooltip: 'Unlisted channel',
       newVersionMessage: 'New version available',
       moreInformationLabel: 'More information',
       channelSelectedNoFileSize: 'Selected',

diff --git a/...bri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue b/...bri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue
@@ -10,7 +10,7 @@
       <template v-slot:belowname>
         <div class="private-icons">
           <KTooltip reference="lockicon" :refs="$refs" placement="top">
-            {{ WithImportDetailsStrings.$tr('unlistedChannelTooltip') }}
+            {{ deviceString.$tr('unlistedChannelLabel') }}
           </KTooltip>
           <KIcon
             v-if="channel.public === false"
@@ -25,7 +25,7 @@
               color: $themeTokens.textInverted,
               backgroundColor: $themeTokens.success
             }"
-          >{{ WithImportDetailsStrings.$tr('newLabel') }}</span>
+          >{{ deviceString.$tr('newChannelLabel') }}</span>
         </div>
       </template>
     </ChannelDetails>
@@ -57,11 +57,7 @@
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
-  import { crossComponentTranslator } from 'kolibri.utils.i18n';
   import ChannelDetails from './ChannelDetails';
-  import WithImportDetails from './WithImportDetails';
-
-  const WithImportDetailsStrings = crossComponentTranslator(WithImportDetails);
 
   export default {
     name: 'WithSizeAndOptions',
@@ -87,9 +83,6 @@
       resourcesSizeText() {
         return bytesForHumans(this.channel.on_device_file_size);
       },
-      WithImportDetailsStrings() {
-        return WithImportDetailsStrings;
-      },
     },
     methods: {
       handleManageChannelAction() {

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/NewChannelVersionBanner.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/NewChannelVersionBanner.vue
@@ -6,7 +6,7 @@
         class="new-label"
         :style="{ color: $themeTokens.textInverted, backgroundColor: $themeTokens.success }"
       >
-        {{ newString }}
+        {{ deviceString('newResourceLabel') }}
       </span>
 
       <span class="version-available">
@@ -26,25 +26,17 @@
 
 <script>
 
-  import { crossComponentTranslator } from 'kolibri.utils.i18n';
-  import ChannelUpdateAnnotations from '../SelectContentPage/ChannelUpdateAnnotations';
-
-  const UpdateStrings = crossComponentTranslator(ChannelUpdateAnnotations);
+  import commonDeviceStrings from '../commonDeviceStrings';
 
   export default {
     name: 'NewChannelVersionBanner',
+    mixins: [commonDeviceStrings],
     props: {
       version: {
         type: Number,
         required: true,
       },
     },
-    computed: {
-      newString() {
-        // eslint-disable-next-line kolibri/vue-no-undefined-string-uses
-        return UpdateStrings.$tr('newResource');
-      },
-    },
     $trs: {
       versionAvailable: {
         message: 'Version {version} is available',

diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
@@ -30,7 +30,7 @@
     <KLinearLoader v-if="loading" :delay="false" type="indeterminate" />
 
     <p v-if="!loading && managedTasks.length === 0" class="empty-tasks-message">
-      {{ $tr('emptyTasksMessage') }}
+      {{ deviceString('emptyTasksMessage') }}
     </p>
     <transition-group name="fade" class="task-panels">
       <TaskPanel
@@ -57,6 +57,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import { PageNames, taskIsClearable } from '../../constants';
+  import commonDeviceStrings from '../commonDeviceStrings';
 
   import TaskPanel from './TaskPanel';
   import BackLink from './BackLink';
@@ -73,7 +74,7 @@
       TaskPanel,
       BackLink,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings],
+    mixins: [responsiveWindowMixin, commonCoreStrings, commonDeviceStrings],
     data() {
       return {
         loading: true,
@@ -123,7 +124,6 @@
       backToChannelsAction: 'Back to channels',
       tasksHeader: 'Tasks',
       appBarTitle: 'Task manager',
-      emptyTasksMessage: 'There are no tasks to display',
       clearCompletedAction: {
         message: 'Clear completed',
         context:

diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelUpdateAnnotations.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelUpdateAnnotations.vue
@@ -9,8 +9,11 @@
 
 <script>
 
+  import commonDeviceStrings from '../commonDeviceStrings';
+
   export default {
     name: 'ChannelUpdateAnnotations',
+    mixins: [commonDeviceStrings],
     props: {
       newResources: {
         type: Number,
@@ -48,7 +51,7 @@
       },
       label() {
         if (this.new && this.isTopic === false) {
-          return this.$tr('newResource');
+          return this.deviceString('newResourceLabel');
         } else if (this.new && this.isTopic === true) {
           return this.$tr('newResourcesInTopic', { count: this.newResources });
         } else if (this.importing) {
@@ -58,10 +61,6 @@
       },
     },
     $trs: {
-      newResource: {
-        message: 'New',
-        context: 'Label that is shown with resources that were added after upgrading the channel',
-      },
       newResourcesInTopic: {
         message: '{count} {count, plural, one {new} other {new}}',
         context:

diff --git a/kolibri/plugins/device/assets/src/views/commonDeviceStrings.js b/kolibri/plugins/device/assets/src/views/commonDeviceStrings.js
@@ -0,0 +1,29 @@
+import { createTranslator } from 'kolibri.utils.i18n';
+
+const deviceStrings = createTranslator('CommonDeviceStrings', {
+  emptyTasksMessage: {
+    message: 'There are no tasks to display',
+    context: 'Shown as an empty state on pages that display device tasks',
+  },
+  newResourceLabel: {
+    message: 'New',
+    context: 'Label that is shown with resources that were added after upgrading the channel',
+  },
+  newChannelLabel: {
+    message: 'New',
+    context: 'Refers to CHANNEL; indicates that it was recently updated, imported, and unlocked',
+  },
+  unlistedChannelLabel: {
+    message: 'Unlisted channel',
+    context:
+      'Label for channels that are not listed as public and require knowing a special token to import them',
+  },
+});
+
+export default {
+  methods: {
+    deviceString(key, args) {
+      return deviceStrings.$tr(key, args);
+    },
+  },
+};