From ed09ee7d47afb075f5aee52e0383ebf116926469 Mon Sep 17 00:00:00 2001
From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Thu, 12 Sep 2024 15:36:13 -0500
Subject: [PATCH 1/2] About Licenses display changes + revise license URL
 return method to improve security

---
 .../QuickEditModal/EditSourceModal.vue        |  2 -
 .../__tests__/EditSourceModal.spec.js         |  5 --
 .../channelEdit/components/edit/EditModal.vue |  6 --
 .../frontend/channelEdit/getters.js           |  4 -
 .../frontend/channelEdit/mutations.js         |  4 -
 .../frontend/channelEdit/store.js             |  2 -
 .../views/TreeView/TreeViewBase.vue           |  6 --
 .../shared/views/AboutLicensesModal.vue       | 62 ---------------
 .../frontend/shared/views/LicenseDropdown.vue | 78 ++++++++++++++-----
 9 files changed, 58 insertions(+), 111 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/AboutLicensesModal.vue

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
index 523bd1ad11..839f19a896 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue
+++ b/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() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
index ae88d106ef..20858eecac 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js
+++ b/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,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
index 655b8fb6e1..2dba69cc0f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
+++ b/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']),
diff --git a/contentcuration/contentcuration/frontend/channelEdit/getters.js b/contentcuration/contentcuration/frontend/channelEdit/getters.js
index 455af2aece..d914622d62 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/getters.js
+++ b/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) {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/mutations.js b/contentcuration/contentcuration/frontend/channelEdit/mutations.js
index 2bd2a99369..2e67ded644 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/mutations.js
+++ b/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;
-}
diff --git a/contentcuration/contentcuration/frontend/channelEdit/store.js b/contentcuration/contentcuration/frontend/channelEdit/store.js
index 39a01b26c8..068563d111 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/store.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/store.js
@@ -31,8 +31,6 @@ 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
index 3a22c6b3de..4b3d75f26f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/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() {
diff --git a/contentcuration/contentcuration/frontend/shared/views/AboutLicensesModal.vue b/contentcuration/contentcuration/frontend/shared/views/AboutLicensesModal.vue
deleted file mode 100644
index 2c11725383..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/AboutLicensesModal.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
index 64b9ac92d8..d70ffff150 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
+++ b/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,30 @@
           ? 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 url = new URL(license.license_url);
+        const isCC = allowedHosts.includes(url.hostname);
+        const language = window.languageCode || 'en';
+        return isCC ? `${license.license_url}deed.${language}` : license.license_url;
+      },
     },
     $trs: {
       mixed: 'Mixed',
@@ -202,10 +243,6 @@
 <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;
@@ -213,7 +250,8 @@
     }
 
     /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;

From 6bef66f0d09e1bc8219aa8eb739af4f1bcdf2ae0 Mon Sep 17 00:00:00 2001
From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:55:36 -0500
Subject: [PATCH 2/2] Add try...catch statement to getLicenseUrl()

---
 .../frontend/shared/views/LicenseDropdown.vue        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
index d70ffff150..5c48b116ad 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
@@ -225,10 +225,16 @@
         this.showAboutLicense = !this.showAboutLicense;
       },
       getLicenseUrl(license) {
-        const url = new URL(license.license_url);
-        const isCC = allowedHosts.includes(url.hostname);
+        const { license_url } = license;
         const language = window.languageCode || 'en';
-        return isCC ? `${license.license_url}deed.${language}` : license.license_url;
+        try {
+          const url = new URL(license_url);
+          return allowedHosts.includes(url.hostname)
+            ? `${license_url}deed.${language}`
+            : license_url;
+        } catch {
+          return license_url;
+        }
       },
     },
     $trs: {