Merge branch 'unstable' into dependabot/npm_and_yarn/axios-1.12.2

Author: akolson

contentcuration/contentcuration/frontend/accounts/pages/AccountsMain.vue

@@ -53,9 +53,10 @@
               :label="$tr('passwordLabel')"
             />
             <p>
-              <ActionLink
+              <KRouterLink
                 :to="{ name: 'ForgotPassword' }"
                 :text="$tr('forgotPasswordLink')"
+                appearance="basic-link"
               />
             </p>
             <KButton
@@ -75,9 +76,10 @@
           </VForm>
           <VDivider />
           <p class="mt-4 text-xs-center">
-            <ActionLink
+            <KButton
               href="/channels"
               :text="$tr('guestModeLink')"
+              appearance="basic-link"
             />
           </p>
         </VCard>
@@ -87,21 +89,25 @@
 
         <p class="links mt-3 text-xs-center">
           <span>
-            <ActionLink
+            <KButton
               :text="$tr('privacyPolicyLink')"
+              appearance="basic-link"
               @click="showPrivacyPolicy"
             />
           </span>
           <span>
-            <ActionLink
+            <KButton
               :text="$tr('TOSLink')"
+              appearance="basic-link"
               @click="showTermsOfService"
             />
           </span>
           <span>
-            <ActionLink
-              :text="$tr('copyright', { year: new Date().getFullYear() })"
+            <KButton
               href="https://learningequality.org/"
+              :text="$tr('copyright', { year: new Date().getFullYear() })"
+              appearance="basic-link"
+              iconAfter="openNewTab"
               target="_blank"
             />
           </span>

contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue

@@ -2,13 +2,12 @@
 
   <MessageLayout :header="$tr('accountDeletedTitle')">
     <template #back>
-      <VBtn
-        color="primary"
+      <KRouterLink
         :to="{ name: 'Main' }"
-        large
-      >
-        {{ $tr('backToLogin') }}
-      </VBtn>
+        :text="$tr('backToLogin')"
+        :primary="true"
+        appearance="raised-button"
+      />
     </template>
   </MessageLayout>
 

contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue

@@ -2,13 +2,12 @@
 
   <MessageLayout :header="$tr('accountCreatedTitle')">
     <template #back>
-      <VBtn
-        color="primary"
+      <KRouterLink
         :to="{ name: 'Main' }"
-        large
-      >
-        {{ $tr('backToLogin') }}
-      </VBtn>
+        :text="$tr('backToLogin')"
+        :primary="true"
+        appearance="raised-button"
+      />
     </template>
   </MessageLayout>
 

contentcuration/contentcuration/frontend/administration/components/CommunityLibraryStatusButton.vue

@@ -0,0 +1,120 @@
+<template>
+
+  <!-- At the time of writing, the KLabeledIcon component does not set
+  the color of the label properly (issue #1102). When this is fixed, setting
+  color on the button component should no longer be needed. -->
+  <button
+    class="community-library-status-button"
+    :title="tooltip"
+    @click="$emit('click')"
+  >
+    <KLabeledIcon
+      :icon="icon"
+      iconAfter="dropdown"
+      :color="labelColor"
+      :label="text"
+    />
+  </button>
+
+</template>
+
+
+<script>
+
+  import { themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import { computed, defineComponent } from 'vue';
+  import { CommunityLibraryStatus } from 'shared/constants';
+
+  export default defineComponent({
+    name: 'ChannelCommunityLibraryStatusButton',
+    setup(props) {
+      const theme = themePalette();
+
+      const configChoices = {
+        [CommunityLibraryStatus.PENDING]: {
+          text: 'Submitted',
+          tooltip: 'Submission awaiting review',
+          color: theme.yellow.v_100,
+          darkColor: theme.yellow.v_200,
+          labelColor: theme.orange.v_600,
+          icon: 'schedule',
+        },
+        [CommunityLibraryStatus.APPROVED]: {
+          text: 'Approved',
+          tooltip: 'Live in Community Library',
+          color: theme.green.v_100,
+          darkColor: theme.green.v_200,
+          labelColor: theme.green.v_600,
+          icon: 'circleCheckmark',
+        },
+        [CommunityLibraryStatus.REJECTED]: {
+          text: 'Flagged',
+          tooltip: 'Review flagged submission',
+          color: theme.red.v_100,
+          darkColor: theme.red.v_200,
+          labelColor: theme.red.v_600,
+          icon: 'error',
+        },
+      };
+
+      // NOTE: Having the whole config object as a computed property and
+      // then accessing its elements breaks tests (possibly because of quirks
+      // of how vue-jest and vue-template-compiler handle computed properties
+      // defined using the composition API).
+      // Therefore, we define the individual attributes as separate
+      // computed properties as a workaround.
+      const text = computed(() => configChoices[props.status].text);
+      const tooltip = computed(() => configChoices[props.status].tooltip);
+      const color = computed(() => configChoices[props.status].color);
+      const darkColor = computed(() => configChoices[props.status].darkColor);
+      const labelColor = computed(() => configChoices[props.status].labelColor);
+      const icon = computed(() => configChoices[props.status].icon);
+
+      return {
+        text,
+        tooltip,
+        color,
+        darkColor,
+        labelColor,
+        icon,
+      };
+    },
+    // NOTE: Values of props declared in the setup method using `declareProps` cannot
+    // be checked in tests, so we declare them using the options API for better testability.
+    props: {
+      status: {
+        type: String,
+        required: true,
+        validator: value =>
+          [
+            CommunityLibraryStatus.PENDING,
+            CommunityLibraryStatus.APPROVED,
+            CommunityLibraryStatus.REJECTED,
+          ].includes(value),
+      },
+    },
+  });
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .community-library-status-button {
+    @extend %md-standard-func;
+
+    width: 9em;
+    padding: 4px;
+    color: v-bind('labelColor');
+    background-color: v-bind('color');
+    border-radius: 16px;
+    transition: background-color $core-time;
+  }
+
+  .community-library-status-button:hover {
+    background-color: v-bind('darkColor');
+  }
+
+</style>

contentcuration/contentcuration/frontend/administration/components/__tests__/communityLibraryStatusButton.spec.js

@@ -0,0 +1,16 @@
+import { mount } from '@vue/test-utils';
+import CommunityLibraryStatusButton from '../CommunityLibraryStatusButton.vue';
+import { CommunityLibraryStatus } from 'shared/constants';
+
+describe('CommunityLibraryStatusButton', () => {
+  it('pushing the button emits the click event', () => {
+    const wrapper = mount(CommunityLibraryStatusButton, {
+      propsData: {
+        status: CommunityLibraryStatus.APPROVED,
+      },
+    });
+    wrapper.find('button').trigger('click');
+
+    expect(wrapper.emitted('click')).toBeTruthy();
+  });
+});