Merge pull request learningequality#4730 from learningequality/revert…

…-4716-update-about-licenses Revert "Update how About License information is displayed in EditSourceModal"
AllanOXDi · Sep 12, 2024 · f029bd4 · f029bd4
2 parents 1bb1197 + 239a3f6
commit f029bd4
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 55 deletions.
diff --git a/...ration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue b/...ration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
@@ -2,6 +2,7 @@
 
   <div>
     <KModal
+      v-if="!isAboutLicensesModalOpen"
       :title="$tr('editAttribution')"
       :submitText="$tr('saveAction')"
       :cancelText="$tr('cancelAction')"
@@ -169,6 +170,7 @@
       /* eslint-enable  kolibri/vue-no-unused-properties */
     },
     computed: {
+      ...mapGetters(['isAboutLicensesModalOpen']),
       ...mapGetters('contentNode', ['getContentNodes']),
       ...mapFormGettersSetters(sourceKeys),
       nodes() {

diff --git a/...curation/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js b/...curation/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
@@ -9,6 +9,7 @@ let nodes;
 let store;
 let contentNodeActions;
 let generalActions;
+let generalGetters;
 
 const MIXED_VALUE = 'Mixed';
 
@@ -63,8 +64,12 @@ describe('EditSourceModal', () => {
     generalActions = {
       showSnackbarSimple: jest.fn(),
     };
+    generalGetters = {
+      isAboutLicensesModalOpen: () => false,
+    };
     store = new Vuex.Store({
       actions: generalActions,
+      getters: generalGetters,
       modules: {
         contentNode: {
           namespaced: true,

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
@@ -122,6 +122,9 @@
           </VFlex>
         </VLayout>
       </BottomBar>
+      <AboutLicensesModal
+        v-if="isAboutLicensesModalOpen"
+      />
       <InheritAncestorMetadataModal
         :parent="(createMode && detailNodeIds.length) ? parent : null"
         @inherit="inheritMetadata"
@@ -192,6 +195,7 @@
   import { fileSizeMixin, routerMixin } from 'shared/mixins';
   import FileStorage from 'shared/views/files/FileStorage';
   import MessageDialog from 'shared/views/MessageDialog';
+  import AboutLicensesModal from 'shared/views/AboutLicensesModal';
   import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
   import Uploader from 'shared/views/files/Uploader';
   import LoadingText from 'shared/views/LoadingText';
@@ -222,6 +226,7 @@
       SavingIndicator,
       ToolBar,
       BottomBar,
+      AboutLicensesModal,
     },
     mixins: [fileSizeMixin, routerMixin],
     props: {
@@ -255,6 +260,7 @@
       };
     },
     computed: {
+      ...mapGetters(['isAboutLicensesModalOpen']),
       ...mapGetters('contentNode', ['getContentNode', 'getContentNodeIsValid']),
       ...mapGetters('assessmentItem', ['getAssessmentItems']),
       ...mapGetters('currentChannel', ['currentChannel', 'canEdit']),

diff --git a/contentcuration/contentcuration/frontend/channelEdit/getters.js b/contentcuration/contentcuration/frontend/channelEdit/getters.js
@@ -10,6 +10,10 @@ export function isComfortableViewMode(state) {
   return viewMode === viewModes.COMFORTABLE;
 }
 
+export function isAboutLicensesModalOpen(state) {
+  return state.aboutLicensesModalOpen;
+}
+
 // Convenience function to format strings like "Page Name - Channel Name"
 // for tab titles
 export function appendChannelName(state, getters) {

diff --git a/contentcuration/contentcuration/frontend/channelEdit/mutations.js b/contentcuration/contentcuration/frontend/channelEdit/mutations.js
@@ -5,3 +5,7 @@ export function SET_VIEW_MODE(state, viewMode) {
 export function SET_VIEW_MODE_OVERRIDES(state, overrides) {
   state.viewModeOverrides = overrides;
 }
+
+export function SET_SHOW_ABOUT_LICENSES(state, isOpen) {
+  state.aboutLicensesModalOpen = isOpen;
+}
diff --git a/contentcuration/contentcuration/frontend/channelEdit/store.js b/contentcuration/contentcuration/frontend/channelEdit/store.js
@@ -31,6 +31,8 @@ export const STORE_CONFIG = {
        * to override the current `viewMode`.
        */
       viewModeOverrides: [],
+
+      aboutLicensesModalOpen: false,
     };
   },
   actions,

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -222,6 +222,9 @@
       @syncing="syncInProgress"
     />
     <QuickEditModal />
+    <AboutLicensesModal
+      v-if="isAboutLicensesModalOpen"
+    />
     <MessageDialog
       v-model="showDeleteModal"
       :header="$tr('deleteTitle')"
@@ -318,6 +321,7 @@
   import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
   import OfflineText from 'shared/views/OfflineText';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
+  import AboutLicensesModal from 'shared/views/AboutLicensesModal';
   import MessageDialog from 'shared/views/MessageDialog';
   import { RouteNames as ChannelRouteNames } from 'frontend/channelList/constants';
   import { titleMixin } from 'shared/mixins';
@@ -342,6 +346,7 @@
       MessageDialog,
       SavingIndicator,
       QuickEditModal,
+      AboutLicensesModal,
     },
     mixins: [titleMixin],
     props: {
@@ -365,6 +370,7 @@
       ...mapState({
         offline: state => !state.connection.online,
       }),
+      ...mapGetters(['isAboutLicensesModalOpen']),
       ...mapGetters('contentNode', ['getContentNode']),
       ...mapGetters('currentChannel', ['currentChannel', 'canEdit', 'canManage', 'rootId']),
       rootNode() {

diff --git a/contentcuration/contentcuration/frontend/shared/views/AboutLicensesModal.vue b/contentcuration/contentcuration/frontend/shared/views/AboutLicensesModal.vue
@@ -0,0 +1,62 @@
+<template>
+
+  <KModal
+    :title="$tr('licenseInfoHeader')"
+    :cancelText="$tr('close')"
+    @cancel="closeModal()"
+  >
+    <div v-for="(license, index) in licences" :key="index" class="mb-4 mt-3">
+      <h2 class="font-weight-bold mb-1 subheading">
+        {{ license.name }}
+      </h2>
+      <p class="body-1 grey--text mb-1">
+        {{ license.description }}
+      </p>
+      <p v-if="license.license_url">
+        <ActionLink
+          :href="getLicenseUrl(license)"
+          target="_blank"
+          :text="$tr('learnMoreButton')"
+        />
+      </p>
+    </div>
+  </KModal>
+
+</template>
+
+<script>
+
+  import { mapMutations } from 'vuex';
+  import { constantsTranslationMixin } from 'shared/mixins';
+  import { LicensesList } from 'shared/leUtils/Licenses';
+
+  export default {
+    name: 'AboutLicensesModal',
+    mixins: [constantsTranslationMixin],
+    computed: {
+      licences() {
+        return LicensesList.filter(license => license.id).map(license => ({
+          ...license,
+          name: this.translateConstant(license.license_name),
+          description: this.translateConstant(license.license_name + '_description'),
+        }));
+      },
+    },
+    methods: {
+      ...mapMutations({
+        closeModal: 'SET_SHOW_ABOUT_LICENSES',
+      }),
+      getLicenseUrl(license) {
+        const isCC = license.license_url.includes('creativecommons.org');
+        const language = window.languageCode || 'en';
+        return isCC ? `${license.license_url}deed.${language}` : license.license_url;
+      },
+    },
+    $trs: {
+      close: 'Close',
+      learnMoreButton: 'Learn More',
+      licenseInfoHeader: 'About licenses',
+    },
+  };
+
+</script>
diff --git a/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
@@ -23,38 +23,19 @@
           :class="{ 'with-trailing-input-icon': box }"
           :attach="attach"
           @focus="$emit('focus')"
-        />
+        >
+          <template #append-outer>
+            <KIconButton
+              class="info-icon"
+              data-test="info-icon"
+              icon="help"
+              :color="$themeTokens.primary"
+              @click="setShowAboutLicenses(true)"
+            />
+          </template>
+        </VSelect>
       </template>
     </DropdownWrapper>
-    <p>
-      <KButton
-        class="info-link"
-        appearance="basic-link"
-        :text="requestFormStrings.$tr('licenseInfoHeader')"
-        :iconAfter="showAboutLicense ? 'chevronUp' : 'chevronDown'"
-        @click="toggleAboutLicenseDisplay"
-      />
-    </p>
-    <div 
-      v-for="(licenseItem, index) in licences" 
-      v-show="showAboutLicense" 
-      :key="index" 
-      class="mb-4 mt-3"
-    >
-      <h2 class="font-weight-bold mb-1 subheading">
-        {{ licenseItem.name }}
-      </h2>
-      <p class="body-1 grey--text mb-1">
-        {{ licenseItem.description }}
-      </p>
-      <p v-if="licenseItem.license_url">
-        <ActionLink
-          :href="getLicenseUrl(licenseItem)"
-          target="_blank"
-          :text="requestFormStrings.$tr('learnMoreButton')"
-        />
-      </p>
-    </div>
     <VTextarea
       v-if="isCustom"
       ref="description"
@@ -78,7 +59,7 @@
 
 <script>
 
-  import RequestForm from '../../settings/pages/Storage/RequestForm.vue';
+  import { mapMutations } from 'vuex';
   import {
     getLicenseValidators,
     getLicenseDescriptionValidators,
@@ -89,7 +70,6 @@
   import { LicensesList } from 'shared/leUtils/Licenses';
   import { constantsTranslationMixin } from 'shared/mixins';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
-  import { crossComponentTranslator } from 'shared/i18n';
 
   const MIXED_VALUE = 'mixed';
 
@@ -134,12 +114,6 @@
         default: false,
       },
     },
-    data() {
-      return {
-        requestFormStrings: crossComponentTranslator(RequestForm),
-        showAboutLicense: false,
-      };
-    },
     computed: {
       license: {
         get() {
@@ -204,29 +178,17 @@
           ? getLicenseDescriptionValidators().map(translateValidator)
           : [];
       },
-      licences() {
-        return LicensesList.filter(license => license.id).map(license => ({
-          ...license,
-          name: this.translateConstant(license.license_name),
-          description: this.translateConstant(license.license_name + '_description'),
-        }));
-      },
     },
     methods: {
+      ...mapMutations({
+        setShowAboutLicenses: 'SET_SHOW_ABOUT_LICENSES',
+      }),
       translate(item) {
         if (item.id === MIXED_VALUE) {
           return this.$tr('mixed');
         }
         return (item.id && item.id !== '' && this.translateConstant(item.license_name)) || '';
       },
-      toggleAboutLicenseDisplay() {
-        this.showAboutLicense = !this.showAboutLicense;
-      },
-      getLicenseUrl(license) {
-        const isCC = license.license_url.includes('creativecommons.org');
-        const language = window.languageCode || 'en';
-        return isCC ? `${license.license_url}deed.${language}` : license.license_url;
-      },
     },
     $trs: {
       mixed: 'Mixed',
@@ -240,15 +202,18 @@
 <style lang="scss" scoped>
 
   .with-trailing-input-icon {
+    /deep/ .v-input__append-inner {
+      margin-right: 32px;
+    }
+
     /deep/ .v-input__append-outer {
       position: absolute;
       right: 4px;
       margin-top: 8px !important;
     }
 
     /deep/ .v-input__control > .v-input__slot {
-      min-width: 400px;
-      background: #f5f5f5 !important;
+      background: #e9e9e9 !important;
 
       &::before {
         border-color: rgba(0, 0, 0, 0.12) !important;