[Remove Vuetify from Studio] Copy token input in Settings - Account

Author: Abhishek-Punhani

contentcuration/contentcuration/frontend/settings/pages/Account/StudioCopyToken.vue

@@ -0,0 +1,128 @@
+<template>
+
+  <div :class="{ 'token-input-wrapper-small': isSmall() }">
+    <div
+      v-if="show('loader', loading, 500)"
+      class="loader"
+    >
+      <KCircularLoader />
+    </div>
+    <KTextbox
+      v-else
+      :value="displayToken"
+      readonly
+      class="notranslate token-input"
+      :label="$tr('token')"
+      :floatingLabel="false"
+      :appearanceOverrides="{ maxWidth: 'none !important', width: '100% !important' }"
+    >
+      <template #innerAfter>
+        <KIconButton
+          icon="copy"
+          :tooltip="$tr('tooltipText')"
+          class="copy-button"
+          :disabled="!token.trim()"
+          @click="copyToClipboard"
+        />
+      </template>
+    </KTextbox>
+  </div>
+
+</template>
+
+
+<script>
+
+  import useKShow from 'kolibri-design-system/lib/composables/useKShow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+
+  export default {
+    name: 'StudioCopyToken',
+    setup() {
+      const { show } = useKShow();
+      const { windowBreakpoint } = useKResponsiveWindow();
+
+      return { show, windowBreakpoint };
+    },
+    props: {
+      token: {
+        type: String,
+        required: true,
+      },
+      hyphenate: {
+        type: Boolean,
+        default: true,
+      },
+      successText: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      displayToken() {
+        return this.hyphenate ? this.token.slice(0, 5) + '-' + this.token.slice(5) : this.token;
+      },
+      clipboardAvailable() {
+        return Boolean(navigator.clipboard);
+      },
+    },
+    methods: {
+      isSmall() {
+        return this.windowBreakpoint <= 1;
+      },
+      copyToClipboard() {
+        if (this.clipboardAvailable) {
+          navigator.clipboard
+            .writeText(this.displayToken)
+            .then(() => {
+              const text = this.successText || this.$tr('copiedTokenId');
+              this.$store.dispatch('showSnackbar', { text });
+              this.$analytics.trackEvent('copy_token');
+              this.$emit('copied');
+            })
+            .catch(() => {
+              this.$store.dispatch('showSnackbar', { text: this.$tr('copyFailed') });
+            });
+        }
+      },
+    },
+    $trs: {
+      copiedTokenId: 'Token copied',
+      copyFailed: 'Copy failed',
+      token: 'Token',
+      tooltipText: 'Copy token to import channel into Kolibri',
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+  }
+
+  .copy-button {
+    margin: 0 0.5rem 0.5rem 0;
+    opacity: 0.8;
+  }
+
+  .copy-button:hover {
+    opacity: 1;
+  }
+
+  .token-input-wrapper-small {
+    min-width: 100%;
+    margin-right: 0.5rem;
+  }
+
+</style>

contentcuration/contentcuration/frontend/settings/pages/Account/index.vue

@@ -75,7 +75,7 @@
         rel="noopener noreferrer"
       />
     </p>
-    <CopyToken
+    <StudioCopyToken
       class="copy-token"
       :token="user.api_token || ' '"
       :loading="!user.api_token"
@@ -158,15 +158,15 @@
   import FullNameForm from './FullNameForm';
   import ChangePasswordForm from './ChangePasswordForm';
   import DeleteAccountForm from './DeleteAccountForm';
-  import CopyToken from 'shared/views/CopyToken';
+  import StudioCopyToken from './StudioCopyToken.vue';
 
   export default {
     name: 'Account',
     components: {
       ChangePasswordForm,
-      CopyToken,
       FullNameForm,
       DeleteAccountForm,
+      StudioCopyToken,
     },
     data() {
       return {

contentcuration/contentcuration/frontend/settings/pages/__tests__/studioCopyToken.spec.js

@@ -0,0 +1,99 @@
+import { render, fireEvent, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioCopyToken from '../Account/StudioCopyToken.vue';
+
+function makeWrapper(props = {}) {
+  const mockStore = {
+    dispatch: jest.fn(),
+  };
+
+  return {
+    ...render(StudioCopyToken, {
+      props: {
+        token: 'testtoken',
+        ...props,
+      },
+      routes: new VueRouter({}),
+      mocks: {
+        $store: mockStore,
+        $tr: key => key,
+      },
+    }),
+    mockStore,
+  };
+}
+
+describe('StudioCopyToken', () => {
+  let originalClipboard;
+
+  beforeAll(() => {
+    originalClipboard = navigator.clipboard;
+  });
+
+  afterAll(() => {
+    navigator.clipboard = originalClipboard;
+  });
+
+  it('displays hyphenated token by default', () => {
+    makeWrapper();
+    const input = screen.getByDisplayValue('testt-oken');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('displays token without hyphen if hyphenate is false', () => {
+    makeWrapper({ hyphenate: false });
+    const input = screen.getByDisplayValue('testtoken');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('shows loader when loading is true', () => {
+    const { container } = makeWrapper({ loading: true });
+    expect(container.querySelector('.ui-progress-circular')).toBeInTheDocument();
+    expect(screen.queryByDisplayValue(/test/)).not.toBeInTheDocument();
+  });
+
+  it('should fire a copy operation on button click', async () => {
+    const writeText = jest.fn().mockResolvedValue();
+    Object.assign(navigator, {
+      clipboard: { writeText },
+    });
+    makeWrapper();
+    const button = screen.getByRole('button');
+    await fireEvent.click(button);
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('testt-oken');
+  });
+
+  it('dispatches snackbar on successful copy', async () => {
+    const writeText = jest.fn().mockResolvedValue();
+    Object.assign(navigator, {
+      clipboard: { writeText },
+    });
+    const { mockStore } = makeWrapper();
+    const button = screen.getByRole('button');
+    await fireEvent.click(button);
+    expect(mockStore.dispatch).toHaveBeenCalledWith('showSnackbar', { text: 'copiedTokenId' });
+  });
+
+  it('dispatches snackbar on failed copy', async () => {
+    const writeText = jest.fn().mockRejectedValue();
+    Object.assign(navigator, {
+      clipboard: { writeText },
+    });
+    const { mockStore } = makeWrapper();
+    const button = screen.getByRole('button');
+    await fireEvent.click(button);
+    expect(mockStore.dispatch).toHaveBeenCalledWith('showSnackbar', { text: 'copyFailed' });
+  });
+
+  it('renders the copy button', () => {
+    const { container } = makeWrapper();
+    const button = container.querySelector('.copy-button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('disables the copy button if token is empty', () => {
+    const { container } = makeWrapper({ token: '   ' });
+    const button = container.querySelector('.copy-button');
+    expect(button).toBeDisabled();
+  });
+});