Address Marcella's review: centralize strings, prune tests, drop Public toggle

Per review feedback:

- All $trs blocks across the 8 Organization components are consolidated
  into shared/strings/organizationStrings.js (createTranslator pattern,
  matching shared/strings/searchRecommendationsStrings.js), so translators
  work from one file instead of eight, and adjusting wording pre-release
  no longer means finding it scattered across components.
- Removes the "Public" checkbox and all related code from
  OrganizationDetailsTab (isPublic state, the organization.public watch,
  the public field in the save payload). Nothing else in the feature
  reads organization.public, and there's no browsable-organizations page
  for it to matter to yet. The backend public field defaults to False,
  so omitting it from the payload is a no-op there.
- Removed 6 tests whose assertions were already implied by a stronger
  neighboring test in the same file (a shallow "emits an event" or
  "renders initial state" check subsumed by the full interaction/
  end-to-end test right next to it), plus both tests in
  OrganizationSharingTab.spec.js (pure text-presence checks with no
  interaction, and the file is deleted since nothing remains). One
  unique assertion (no Sharing tab while creating) was folded into
  the test that already covers the rest of that flow.
- Updated the remaining tests to assert against organizationStrings
  references instead of hardcoded literal UI text, so a wording tweak
  during translation prep doesn't silently break test coverage. Test
  fixture data (org names, emails made up for a test) stays literal,
  per the same guidance.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: yazzylazy

contentcuration/contentcuration/frontend/channelList/views/Organization/InviteOrganizationUserForm.vue

@@ -1,14 +1,14 @@
 <template>
 
   <div class="invite-organization-user-form">
-    <h2>{{ $tr('inviteUsers') }}</h2>
+    <h2>{{ organizationStrings.inviteUsers$() }}</h2>
 
     <div class="fields">
       <KTextbox
         v-model="email"
         type="email"
         data-test="email-input"
-        :label="$tr('emailLabel')"
+        :label="organizationStrings.emailLabel$()"
         :invalid="Boolean(emailError)"
         :invalidText="emailError"
         :showInvalidText="Boolean(emailError)"
@@ -17,15 +17,15 @@
       <KSelect
         v-model="role"
         data-test="role-select"
-        :label="$tr('roleLabel')"
+        :label="organizationStrings.roleLabel$()"
         :options="roleOptions"
       />
     </div>
 
     <KButton
       appearance="raised-button"
       primary
-      :text="$tr('sendInvitation')"
+      :text="organizationStrings.sendInvitation$()"
       :disabled="sending"
       @click="submit"
     />
@@ -38,13 +38,14 @@
 
   import { InvitationShareModes } from '../../constants';
   import { getApiErrorMessage } from '../../utils';
+  import { organizationStrings } from 'shared/strings/organizationStrings';
   import useSnackbar from 'shared/composables/useSnackbar';
 
   export default {
     name: 'InviteOrganizationUserForm',
     setup() {
       const { createSnackbar } = useSnackbar();
-      return { createSnackbar };
+      return { createSnackbar, organizationStrings };
     },
     props: {
       organizationId: {
@@ -67,9 +68,9 @@
     computed: {
       roleOptions() {
         return [
-          { label: this.$tr('viewerRole'), value: InvitationShareModes.VIEW_ONLY },
-          { label: this.$tr('editorRole'), value: InvitationShareModes.EDIT },
-          { label: this.$tr('adminRole'), value: InvitationShareModes.ADMIN },
+          { label: organizationStrings.viewerRole$(), value: InvitationShareModes.VIEW_ONLY },
+          { label: organizationStrings.editorRole$(), value: InvitationShareModes.EDIT },
+          { label: organizationStrings.adminRole$(), value: InvitationShareModes.ADMIN },
         ];
       },
     },
@@ -80,7 +81,7 @@
       submit() {
         const email = this.email.trim();
         if (!email) {
-          this.emailError = this.$tr('emailRequired');
+          this.emailError = organizationStrings.emailRequired$();
           return;
         }
         this.sending = true;
@@ -92,28 +93,16 @@
           .then(() => {
             this.email = '';
             this.role = this.roleOptions[0];
-            this.createSnackbar(this.$tr('invitationSent'));
+            this.createSnackbar(organizationStrings.invitationSent$());
           })
           .catch(error => {
-            this.createSnackbar(getApiErrorMessage(error, this.$tr('invitationError')));
+            this.createSnackbar(getApiErrorMessage(error, organizationStrings.invitationError$()));
           })
           .finally(() => {
             this.sending = false;
           });
       },
     },
-    $trs: {
-      inviteUsers: 'Invite users',
-      emailLabel: 'Email',
-      emailRequired: 'Email is required',
-      roleLabel: 'Role type',
-      viewerRole: 'Viewer',
-      editorRole: 'Editor',
-      adminRole: 'Admin',
-      sendInvitation: 'Send invitation',
-      invitationSent: 'Invitation sent',
-      invitationError: 'Unable to send this invitation',
-    },
   };
 
 </script>

contentcuration/contentcuration/frontend/channelList/views/Organization/OrganizationCard.vue

@@ -36,7 +36,7 @@
         <KIconButton
           icon="optionsVertical"
           appearance="flat-button"
-          :ariaLabel="$tr('moreOptions', { name: organization.name })"
+          :ariaLabel="organizationStrings.moreOptions$({ name: organization.name })"
           data-test="organization-options"
           @click.stop
         >
@@ -57,6 +57,7 @@
 <script>
 
   import { OrganizationRoles, OrganizationEditTabs, RouteNames } from '../../constants';
+  import { organizationStrings } from 'shared/strings/organizationStrings';
 
   export default {
     name: 'OrganizationCard',
@@ -70,17 +71,20 @@
         required: true,
       },
     },
+    data() {
+      return { organizationStrings };
+    },
     computed: {
       roleLabel() {
         const labels = {
-          [OrganizationRoles.ADMIN]: this.$tr('adminRole'),
-          [OrganizationRoles.EDITOR]: this.$tr('editorRole'),
-          [OrganizationRoles.VIEWER]: this.$tr('viewerRole'),
+          [OrganizationRoles.ADMIN]: organizationStrings.adminRole$(),
+          [OrganizationRoles.EDITOR]: organizationStrings.editorRole$(),
+          [OrganizationRoles.VIEWER]: organizationStrings.viewerRole$(),
         };
         return labels[this.organization.role] || '';
       },
       dropdownOptions() {
-        return [{ label: this.$tr('editOrganization'), icon: 'edit', value: 'edit' }];
+        return [{ label: organizationStrings.editOrganization$(), icon: 'edit', value: 'edit' }];
       },
     },
     methods: {
@@ -94,13 +98,6 @@
         }
       },
     },
-    $trs: {
-      adminRole: 'Admin',
-      editorRole: 'Editor',
-      viewerRole: 'Viewer',
-      moreOptions: 'More options for {name}',
-      editOrganization: 'Edit organization',
-    },
   };
 
 </script>

contentcuration/contentcuration/frontend/channelList/views/Organization/OrganizationDetailsTab.vue

@@ -17,19 +17,19 @@
         />
       </span>
 
-      <h2>{{ $tr('organizationDetails') }}</h2>
+      <h2>{{ organizationStrings.organizationDetails$() }}</h2>
 
       <p
         v-if="!isAdmin"
         class="view-only-notice"
       >
-        {{ $tr('viewOnlyNotice') }}
+        {{ organizationStrings.adminAccessRequiredForEdits$() }}
       </p>
 
       <KTextbox
         v-model="name"
         data-test="name-input"
-        :label="$tr('nameLabel')"
+        :label="organizationStrings.nameLabel$()"
         :maxlength="200"
         :disabled="!isAdmin"
         :invalid="Boolean(nameError)"
@@ -42,26 +42,17 @@
         v-model="description"
         data-test="description-input"
         textArea
-        :label="$tr('descriptionLabel')"
+        :label="organizationStrings.descriptionLabel$()"
         :disabled="!isAdmin"
         style="margin-top: 16px"
       />
 
-      <KCheckbox
-        :checked="isPublic"
-        :label="$tr('publicLabel')"
-        :description="$tr('publicDescription')"
-        :disabled="!isAdmin"
-        style="margin-top: 16px"
-        @change="value => (isPublic = value)"
-      />
-
       <KButton
         v-if="isAdmin"
         appearance="raised-button"
         primary
         class="save-button"
-        :text="isNew ? $tr('createOrganization') : $tr('saveChanges')"
+        :text="isNew ? organizationStrings.createOrganization$() : organizationStrings.saveChanges$()"
         :disabled="saving"
         @click="submit"
       />
@@ -74,13 +65,14 @@
 <script>
 
   import { getApiErrorMessage } from '../../utils';
+  import { organizationStrings } from 'shared/strings/organizationStrings';
   import useSnackbar from 'shared/composables/useSnackbar';
 
   export default {
     name: 'OrganizationDetailsTab',
     setup() {
       const { createSnackbar } = useSnackbar();
-      return { createSnackbar };
+      return { createSnackbar, organizationStrings };
     },
     props: {
       organization: {
@@ -108,7 +100,6 @@
       return {
         name: '',
         description: '',
-        isPublic: false,
         nameError: '',
         saving: false,
       };
@@ -120,53 +111,37 @@
           if (organization) {
             this.name = organization.name || '';
             this.description = organization.description || '';
-            this.isPublic = Boolean(organization.public);
           }
         },
       },
     },
     methods: {
       submit() {
         if (!this.name.trim()) {
-          this.nameError = this.$tr('nameRequired');
+          this.nameError = organizationStrings.nameRequired$();
           return;
         }
         this.saving = true;
         this.save({
           name: this.name.trim(),
           description: this.description.trim(),
-          public: this.isPublic,
         })
           .then(organization => {
             if (this.isNew) {
-              this.createSnackbar(this.$tr('organizationCreated'));
+              this.createSnackbar(organizationStrings.organizationCreated$());
               this.$emit('created', organization.id);
             } else {
-              this.createSnackbar(this.$tr('changesSaved'));
+              this.createSnackbar(organizationStrings.changesSaved$());
             }
           })
           .catch(error => {
-            this.createSnackbar(getApiErrorMessage(error, this.$tr('saveError')));
+            this.createSnackbar(getApiErrorMessage(error, organizationStrings.saveError$()));
           })
           .finally(() => {
             this.saving = false;
           });
       },
     },
-    $trs: {
-      organizationDetails: 'Organization details',
-      nameLabel: 'Organization name',
-      descriptionLabel: 'Organization description',
-      nameRequired: 'Organization name is required',
-      viewOnlyNotice: 'Only organization admins can edit these details.',
-      publicLabel: 'Public',
-      publicDescription: 'If this organization can be seen by users outside the organization',
-      saveChanges: 'Save changes',
-      createOrganization: 'Create organization',
-      changesSaved: 'Changes saved',
-      organizationCreated: 'Organization created',
-      saveError: 'Unable to save these changes',
-    },
   };
 
 </script>

contentcuration/contentcuration/frontend/channelList/views/Organization/OrganizationEditPage.vue

@@ -6,7 +6,7 @@
   >
     <template #header>
       <span class="notranslate">
-        {{ isNew ? $tr('newOrganizationTitle') : organization ? organization.name : '' }}
+        {{ isNew ? organizationStrings.newOrganizationTitle$() : organization ? organization.name : '' }}
       </span>
     </template>
 
@@ -18,7 +18,7 @@
         tabsId="organization-edit-tabs"
         :tabs="tabs"
         :activeTabId="tab"
-        :ariaLabel="$tr('tabsLabel')"
+        :ariaLabel="organizationStrings.tabsLabel$()"
       />
     </nav>
 
@@ -62,6 +62,7 @@
   import { useOrganization } from '../../composables/useOrganization';
   import OrganizationDetailsTab from './OrganizationDetailsTab.vue';
   import OrganizationSharingTab from './OrganizationSharingTab.vue';
+  import { organizationStrings } from 'shared/strings/organizationStrings';
   import { routerMixin } from 'shared/mixins';
   import StudioImmersiveModal from 'shared/views/StudioImmersiveModal';
 
@@ -82,6 +83,7 @@
         update,
         create,
         tabIds: OrganizationEditTabs,
+        organizationStrings,
       };
     },
     props: {
@@ -113,12 +115,12 @@
         return [
           {
             id: OrganizationEditTabs.DETAILS,
-            label: this.$tr('detailsTab'),
+            label: organizationStrings.detailsTab$(),
             to: this.tabLink(OrganizationEditTabs.DETAILS),
           },
           {
             id: OrganizationEditTabs.SHARING,
-            label: this.$tr('sharingTab'),
+            label: organizationStrings.sharingTab$(),
             to: this.tabLink(OrganizationEditTabs.SHARING),
           },
         ];
@@ -170,23 +172,17 @@
       },
       updateTitle() {
         if (this.isNew) {
-          this.updateTabTitle(this.$tr('newOrganizationTitle'));
+          this.updateTabTitle(organizationStrings.newOrganizationTitle$());
           return;
         }
         const orgName = this.organization ? this.organization.name : '';
         const tabLabel =
           this.tab === OrganizationEditTabs.SHARING
-            ? this.$tr('sharingTab')
-            : this.$tr('detailsTab');
+            ? organizationStrings.sharingTab$()
+            : organizationStrings.detailsTab$();
         this.updateTabTitle(orgName ? `${tabLabel} - ${orgName}` : tabLabel);
       },
     },
-    $trs: {
-      tabsLabel: 'Organization edit tabs',
-      detailsTab: 'Details',
-      sharingTab: 'Sharing',
-      newOrganizationTitle: 'New organization',
-    },
   };
 
 </script>