About Licenses display changes + revise license URL return method to improve security

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue

@@ -2,7 +2,6 @@
 
   <div>
     <KModal
-      v-if="!isAboutLicensesModalOpen"
       :title="$tr('editAttribution')"
       :submitText="$tr('saveAction')"
       :cancelText="$tr('cancelAction')"
@@ -170,7 +169,6 @@
       /* eslint-enable  kolibri/vue-no-unused-properties */
     },
     computed: {
-      ...mapGetters(['isAboutLicensesModalOpen']),
       ...mapGetters('contentNode', ['getContentNodes']),
       ...mapFormGettersSetters(sourceKeys),
       nodes() {

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js

@@ -9,7 +9,6 @@ let nodes;
 let store;
 let contentNodeActions;
 let generalActions;
-let generalGetters;
 
 const MIXED_VALUE = 'Mixed';
 
@@ -64,12 +63,8 @@ describe('EditSourceModal', () => {
     generalActions = {
       showSnackbarSimple: jest.fn(),
     };
-    generalGetters = {
-      isAboutLicensesModalOpen: () => false,
-    };
     store = new Vuex.Store({
       actions: generalActions,
-      getters: generalGetters,
       modules: {
         contentNode: {
           namespaced: true,

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue

@@ -122,9 +122,6 @@
           </VFlex>
         </VLayout>
       </BottomBar>
-      <AboutLicensesModal
-        v-if="isAboutLicensesModalOpen"
-      />
       <InheritAncestorMetadataModal
         :parent="(createMode && detailNodeIds.length) ? parent : null"
         @inherit="inheritMetadata"
@@ -195,7 +192,6 @@
   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';
@@ -226,7 +222,6 @@
       SavingIndicator,
       ToolBar,
       BottomBar,
-      AboutLicensesModal,
     },
     mixins: [fileSizeMixin, routerMixin],
     props: {
@@ -260,7 +255,6 @@
       };
     },
     computed: {
-      ...mapGetters(['isAboutLicensesModalOpen']),
       ...mapGetters('contentNode', ['getContentNode', 'getContentNodeIsValid']),
       ...mapGetters('assessmentItem', ['getAssessmentItems']),
       ...mapGetters('currentChannel', ['currentChannel', 'canEdit']),

contentcuration/contentcuration/frontend/channelEdit/getters.js

@@ -10,10 +10,6 @@ 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) {

contentcuration/contentcuration/frontend/channelEdit/mutations.js

@@ -5,7 +5,3 @@ 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;
-}

contentcuration/contentcuration/frontend/channelEdit/store.js

@@ -31,8 +31,6 @@ export const STORE_CONFIG = {
        * to override the current `viewMode`.
        */
       viewModeOverrides: [],
-
-      aboutLicensesModalOpen: false,
     };
   },
   actions,

contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue

@@ -222,9 +222,6 @@
       @syncing="syncInProgress"
     />
     <QuickEditModal />
-    <AboutLicensesModal
-      v-if="isAboutLicensesModalOpen"
-    />
     <MessageDialog
       v-model="showDeleteModal"
       :header="$tr('deleteTitle')"
@@ -321,7 +318,6 @@
   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';
@@ -346,7 +342,6 @@
       MessageDialog,
       SavingIndicator,
       QuickEditModal,
-      AboutLicensesModal,
     },
     mixins: [titleMixin],
     props: {
@@ -370,7 +365,6 @@
       ...mapState({
         offline: state => !state.connection.online,
       }),
-      ...mapGetters(['isAboutLicensesModalOpen']),
       ...mapGetters('contentNode', ['getContentNode']),
       ...mapGetters('currentChannel', ['currentChannel', 'canEdit', 'canManage', 'rootId']),
       rootNode() {

contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue

@@ -23,19 +23,38 @@
           :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"
@@ -59,7 +78,7 @@
 
 <script>
 
-  import { mapMutations } from 'vuex';
+  import RequestForm from '../../settings/pages/Storage/RequestForm.vue';
   import {
     getLicenseValidators,
     getLicenseDescriptionValidators,
@@ -70,9 +89,12 @@
   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';
 
+  const allowedHosts = ['creativecommons.org'];
+
   export default {
     name: 'LicenseDropdown',
     components: {
@@ -114,6 +136,12 @@
         default: false,
       },
     },
+    data() {
+      return {
+        requestFormStrings: crossComponentTranslator(RequestForm),
+        showAboutLicense: false,
+      };
+    },
     computed: {
       license: {
         get() {
@@ -178,17 +206,36 @@
           ? 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 { license_url } = license;
+        const language = window.languageCode || 'en';
+        try {
+          const url = new URL(license_url);
+          return allowedHosts.includes(url.hostname)
+            ? `${license_url}deed.${language}`
+            : license_url;
+        } catch {
+          return license_url;
+        }
+      },
     },
     $trs: {
       mixed: 'Mixed',
@@ -202,18 +249,15 @@
 <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 {
-      background: #e9e9e9 !important;
+      min-width: 400px;
+      background: #f5f5f5 !important;
 
       &::before {
         border-color: rgba(0, 0, 0, 0.12) !important;