Show file download/upload/print affordances in app context

kolibri/plugins/coach/frontend/views/common/ReportsControls.vue

@@ -28,7 +28,7 @@
       </KTooltip>
 
       <KIconButton
-        v-if="!exportDisabled"
+        v-if="!disableExport"
         ref="exportButton"
         icon="download"
         :aria-label="coachString('exportCSVAction')"
@@ -50,7 +50,6 @@
 <script>
 
   import pickBy from 'lodash/pickBy';
-  import useUser from 'kolibri/composables/useUser';
   import { mapState } from 'vuex';
   import commonCoach from '../common';
   import { fetchClassSyncStatus } from '../../composables/fetchClassSyncStatus';
@@ -61,12 +60,6 @@
   export default {
     name: 'ReportsControls',
     mixins: [commonCoach],
-    setup() {
-      const { isAppContext } = useUser();
-      return {
-        isAppContext,
-      };
-    },
     props: {
       disableExport: {
         type: Boolean,
@@ -84,10 +77,6 @@
     },
     computed: {
       ...mapState('classSummary', ['learnerMap']),
-      exportDisabled() {
-        // Always disable in app mode until we add the ability to download files.
-        return this.isAppContext || this.disableExport;
-      },
       filteredLearnMap() {
         return Object.fromEntries(
           Object.entries(this.learnerMap || {}).filter(([key]) => this.userList.includes(key)),

kolibri/plugins/facility/frontend/views/DataPage/ImportInterface/index.vue

@@ -53,12 +53,12 @@
 
 <script>
 
-  import urls from 'kolibri/urls';
   import { mapState, mapActions, mapGetters } from 'vuex';
   import useFacility from 'kolibri-common/composables/useFacility';
   import { UsersExportStatuses } from '../../../constants';
   import DataPageTaskProgress from '../DataPageTaskProgress';
   import CsvInfoModal from '../../CsvInfoModal';
+  import downloadCsvFile from '../downloadCsvFile';
 
   export default {
     name: 'ImportInterface',
@@ -88,10 +88,7 @@
         this.startExportUsers();
       },
       downloadCsv() {
-        window.open(
-          urls['kolibri:kolibri.plugins.facility:download_csv_file']('user', this.facilityId),
-          '_blank',
-        );
+        downloadCsvFile('user', this.facilityId);
       },
     },
     $trs: {

kolibri/plugins/facility/frontend/views/DataPage/__tests__/downloadCsvFile.spec.js

@@ -0,0 +1,30 @@
+import urls from 'kolibri/urls';
+import downloadCsvFile from '../downloadCsvFile';
+
+jest.mock('kolibri/urls');
+
+const CSV_URL = '/facility/api/downloadcsvfile/session/facility-id';
+
+describe('downloadCsvFile', () => {
+  let clickedLink;
+
+  beforeEach(() => {
+    urls.__setUrl(CSV_URL);
+    // The link is removed before the assertions run, so capture it on click.
+    jest.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function () {
+      clickedLink = this;
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('downloads the export by clicking a link', () => {
+    downloadCsvFile('session', 'facility-id');
+
+    expect(clickedLink.href).toContain(CSV_URL);
+    expect(clickedLink).toHaveAttribute('download', '');
+    expect(document.querySelector('a[download]')).toBeNull();
+  });
+});

kolibri/plugins/facility/frontend/views/DataPage/downloadCsvFile.js

@@ -0,0 +1,13 @@
+import urls from 'kolibri/urls';
+
+// csvType is 'session', 'summary' or 'user'. Clicked rather than opened because
+// `window.open` silently does nothing in the webviews the installed apps render Kolibri in.
+export default function downloadCsvFile(csvType, facilityId) {
+  const link = document.createElement('a');
+  link.href = urls['kolibri:kolibri.plugins.facility:download_csv_file'](csvType, facilityId);
+  // Empty value: the filename comes from the response's Content-Disposition header.
+  link.download = '';
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}

kolibri/plugins/facility/frontend/views/DataPage/index.vue

@@ -1,7 +1,7 @@
 <template>
 
   <FacilityAppBarPage :loading="pageLoading">
-    <KPageContainer v-if="canUploadDownloadFiles">
+    <KPageContainer>
       <p>
         <KRouterLink
           v-if="userIsMultiFacilityAdmin"
@@ -130,7 +130,7 @@
       </KGrid>
     </KPageContainer>
 
-    <ImportInterface v-if="canUploadDownloadFiles" />
+    <ImportInterface />
     <SyncInterface />
 
     <LearnMoreModal
@@ -193,8 +193,6 @@
 <script>
 
   import { mapState, mapGetters, mapActions } from 'vuex';
-  import useUser from 'kolibri/composables/useUser';
-  import urls from 'kolibri/urls';
   import FacilityResource from 'kolibri-common/apiResources/FacilityResource';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
@@ -213,6 +211,7 @@
   import SyncInterface from './SyncInterface';
   import ImportInterface from './ImportInterface';
   import LearnMoreModal from './LearnMoreModal.vue';
+  import downloadCsvFile from './downloadCsvFile';
 
   export default {
     name: 'DataPage',
@@ -233,14 +232,12 @@
     mixins: [commonCoreStrings],
     setup() {
       const { windowIsMedium, windowIsSmall } = useKResponsiveWindow();
-      const { isAppContext } = useUser();
       const { userIsMultiFacilityAdmin } = useFacilities();
       const { facilityId } = useFacility();
       return {
         pageLoading,
         windowIsMedium,
         windowIsSmall,
-        isAppContext,
         userIsMultiFacilityAdmin,
         facilityId,
       };
@@ -266,11 +263,6 @@
       ]),
       ...mapGetters(['facilityPageLinks']),
       ...mapState('manageCSV', ['sessionDateCreated', 'summaryDateCreated']),
-      // NOTE: We disable CSV file upload/download on embedded web views like the Mac
-      // and Android apps
-      canUploadDownloadFiles() {
-        return !this.isAppContext;
-      },
       pollForTasks() {
         return this.$route.name === PageNames.DATA_EXPORT_PAGE;
       },
@@ -358,16 +350,10 @@
         }
       },
       downloadSessionLog() {
-        window.open(
-          urls['kolibri:kolibri.plugins.facility:download_csv_file']('session', this.facilityId),
-          '_blank',
-        );
+        downloadCsvFile('session', this.facilityId);
       },
       downloadSummaryLog() {
-        window.open(
-          urls['kolibri:kolibri.plugins.facility:download_csv_file']('summary', this.facilityId),
-          '_blank',
-        );
+        downloadCsvFile('summary', this.facilityId);
       },
     },
     $trs: {

kolibri/plugins/facility/frontend/views/ImportCsvPage/Init.vue

@@ -35,11 +35,13 @@
     <p>
       <label for="csv-file">
         {{ $tr('proceed') }}
+        <!-- Both forms: providers that report a file's type rather than deriving it
+             from its name only match the MIME type. -->
         <input
           id="csv-file"
           ref="fileInput"
           type="file"
-          accept=".csv"
+          accept="text/csv,.csv"
           name="csv-file"
           @change="filesChanged"
         >

packages/kolibri-common/components/AllPasswordsPage.vue

@@ -14,15 +14,14 @@
       <!-- Screen-only header with Print button -->
       <KGrid v-show="!$isPrint">
         <KGridItem
-          :layout12="{ span: isAppContext ? 12 : 6, alignment: 'left' }"
-          :layout8="{ span: isAppContext ? 8 : 4, alignment: 'left' }"
-          :layout4="{ span: isAppContext ? 4 : 2, alignment: 'left' }"
+          :layout12="{ span: 6, alignment: 'left' }"
+          :layout8="{ span: 4, alignment: 'left' }"
+          :layout4="{ span: 2, alignment: 'left' }"
           class="header-row"
         >
           <h1 class="header-title">{{ allPasswordsHeader$() }}</h1>
         </KGridItem>
         <KGridItem
-          v-if="!isAppContext"
           :layout12="{ span: 6, alignment: 'right' }"
           :layout8="{ span: 4, alignment: 'right' }"
           :layout4="{ span: 2, alignment: 'right' }"
@@ -149,7 +148,6 @@
   import UserPicturePassword from 'kolibri-common/components/UserPicturePassword';
   import NoPasswordInfo from 'kolibri-common/components/NoPasswordInfo';
   import LearnerPasswordCard from 'kolibri-common/components/LearnerPasswordCard';
-  import useUser from 'kolibri/composables/useUser';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
   export default {
@@ -162,7 +160,6 @@
       const showPrintDialog = ref(false);
       const printFormat = ref('images');
 
-      const { isAppContext } = useUser();
       const { windowBreakpoint } = useKResponsiveWindow();
 
       const {
@@ -240,7 +237,6 @@
       }
 
       return {
-        isAppContext,
         handleSortChange,
         showPrintDialog,
         printFormat,

packages/kolibri/components/DownloadButton.vue

@@ -21,20 +21,12 @@
 
 <script>
 
-  import useUser from 'kolibri/composables/useUser';
   import { validateObject } from 'kolibri/utils/objectSpecs';
   import { getRenderableFiles } from './internal/ContentViewer/utils';
   import { getFilePresetString } from './internal/filePresetStrings';
 
   export default {
     name: 'DownloadButton',
-    setup() {
-      const { isAppContext } = useUser();
-
-      return {
-        isAppContext,
-      };
-    },
     props: {
       files: {
         type: Array,
@@ -71,7 +63,7 @@
         return getRenderableFiles(this.files).filter(file => file.preset !== 'exercise');
       },
       canDownload() {
-        return !this.isAppContext && this.downloadableFiles.length;
+        return this.downloadableFiles.length > 0;
       },
       fileOptions() {
         const options = this.files.map(file => {

packages/kolibri/components/__tests__/DownloadButton.spec.js

@@ -1,10 +1,8 @@
 import Vue from 'vue';
 import { render, screen } from '@testing-library/vue';
-import useUser, { useUserMock } from 'kolibri/composables/useUser'; // eslint-disable-line
 import kolibri from 'kolibri';
 import DownloadButton from '../DownloadButton';
 
-jest.mock('kolibri/composables/useUser');
 jest.mock('kolibri');
 
 const getDownloadableFile = (isExercise = false) => {
@@ -25,25 +23,14 @@ const getDownloadableFile = (isExercise = false) => {
   };
 };
 
-// A helper function to render the component with the given props and some default mocks
-const renderComponent = props => {
-  const { useUserMock: useUserMockProps, ...componentProps } = props;
-
-  useUser.mockImplementation(() =>
-    useUserMock({
-      isAppContext: false,
-      ...useUserMockProps,
-    }),
-  );
-
-  return render(DownloadButton, {
+const renderComponent = props =>
+  render(DownloadButton, {
     props: {
       files: [],
       nodeTitle: '',
-      ...componentProps,
+      ...props,
     },
   });
-};
 
 const SAVE_BUTTON_TEXT = 'Save to device';
 
@@ -52,44 +39,25 @@ describe('DownloadButton', () => {
     Vue.options.components = {};
   });
 
-  it('does not render if isAppContext is true', () => {
-    renderComponent({
-      useUserMock: {
-        isAppContext: true,
-      },
-    });
-
-    expect(screen.queryByText(SAVE_BUTTON_TEXT)).not.toBeInTheDocument();
-  });
-
-  it('should not render if there are no downloadable files even if isAppContext is false', () => {
+  it('should not render if there are no downloadable files', () => {
     renderComponent({
       files: [],
-      useUserMock: {
-        isAppContext: false,
-      },
     });
 
     expect(screen.queryByText(SAVE_BUTTON_TEXT)).not.toBeInTheDocument();
   });
 
-  it('should not render if isAppContext is false and there are only renderable exercise files', () => {
+  it('should not render if there are only renderable exercise files', () => {
     renderComponent({
       files: [getDownloadableFile(true)],
-      useUserMock: {
-        isAppContext: false,
-      },
     });
 
     expect(screen.queryByText(SAVE_BUTTON_TEXT)).not.toBeInTheDocument();
   });
 
-  it('should render if isAppContext is false and there are renderable document files', async () => {
+  it('should render if there are renderable document files', () => {
     renderComponent({
       files: [getDownloadableFile()],
-      useUserMock: {
-        isAppContext: false,
-      },
     });
 
     expect(screen.getByText(SAVE_BUTTON_TEXT)).toBeInTheDocument();