From d3913fd8bb8b56f6dc4dd2c9bf1077acf3e0aa35 Mon Sep 17 00:00:00 2001
From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Mon, 14 Nov 2022 17:16:17 -0600
Subject: [PATCH] Remove and change primary storage location modals updated and
 settings updated in server restart function

---
 .../AddStorageLocationModal.vue               | 13 ++++-
 .../PrimaryStorageLocationModal.vue           | 46 +++++++++++++++-
 .../RemoveStorageLocationModal.vue            | 44 ++++++++++++++-
 .../DeviceSettingsPage/ServerRestartModal.vue | 25 ++++++---
 .../src/views/DeviceSettingsPage/index.vue    | 54 ++++++++++++++++---
 5 files changed, 161 insertions(+), 21 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/AddStorageLocationModal.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/AddStorageLocationModal.vue
index 9d96059cb0a..398d0dcef69 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/AddStorageLocationModal.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/AddStorageLocationModal.vue
@@ -7,7 +7,9 @@
     @submit="handleSubmit"
     @cancel="$emit('cancel')"
   >
-    <p>{{ $tr('newStorageLocationDescription') }}</p>
+    <p class="description">
+      {{ $tr('newStorageLocationDescription') }}
+    </p>
     <KTextbox
       ref="autoDownloadLimit"
       v-model="path"
@@ -98,3 +100,12 @@
   };
 
 </script>
+
+
+<style lang="scss" scoped>
+
+  .description {
+    margin-top: 0;
+  }
+
+</style>
diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/PrimaryStorageLocationModal.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/PrimaryStorageLocationModal.vue
index 4d027b76f07..eed792f17af 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/PrimaryStorageLocationModal.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/PrimaryStorageLocationModal.vue
@@ -4,10 +4,19 @@
     :title="$tr('changePrimaryLocation')"
     :submitText="coreString('continueAction')"
     :cancelText="coreString('cancelAction')"
-    @submit="$emit('submit')"
+    @submit="handleSubmit"
     @cancel="$emit('cancel')"
   >
-    <p>{{ $tr('primaryLocationChangeDescription') }}</p>
+    <p class="description">
+      {{ $tr('primaryLocationChangeDescription') }}
+    </p>
+    <KRadioButton
+      v-for="path in storageLocations"
+      :key="path.index"
+      v-model="selectedPath"
+      :value="path.path"
+      :label="path.path"
+    />
   </KModal>
 
 </template>
@@ -20,6 +29,30 @@
   export default {
     name: 'PrimaryStorageLocationModal',
     mixins: [commonCoreStrings],
+    props: {
+      storageLocations: {
+        type: Array,
+        required: true,
+      },
+      primaryPath: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedPath: this.primaryPath,
+      };
+    },
+    methods: {
+      handleSubmit() {
+        if (this.selectedPath === this.primaryPath) {
+          this.$emit('cancel');
+          return;
+        }
+        this.$emit('submit', this.selectedPath);
+      },
+    },
     $trs: {
       changePrimaryLocation: {
         message: 'Change primary storage location',
@@ -33,3 +66,12 @@
   };
 
 </script>
+
+
+<style lang="scss" scoped>
+
+  .description {
+    margin-top: 0;
+  }
+
+</style>
diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/RemoveStorageLocationModal.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/RemoveStorageLocationModal.vue
index cbef4730641..7ab94a01131 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/RemoveStorageLocationModal.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/RemoveStorageLocationModal.vue
@@ -4,11 +4,20 @@
     :title="$tr('removeStorageLocation')"
     :submitText="coreString('continueAction')"
     :cancelText="coreString('cancelAction')"
-    @submit="$emit('submit')"
+    @submit="handleSubmit"
     @cancel="$emit('cancel')"
   >
-    <p>{{ $tr('removeStorageLocationDescription') }}</p>
+    <p class="description">
+      {{ $tr('removeStorageLocationDescription') }}
+    </p>
     <p>{{ $tr('deleteFilesDescription') }}</p>
+    <KRadioButton
+      v-for="path in storageLocations"
+      :key="path.index"
+      v-model="selectedPath"
+      :value="path"
+      :label="path"
+    />
   </KModal>
 
 </template>
@@ -17,10 +26,32 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { getPathPermissions } from './api';
 
   export default {
     name: 'RemoveStorageLocationModal',
     mixins: [commonCoreStrings],
+    props: {
+      storageLocations: {
+        type: Array,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedPath: this.storageLocations[0],
+      };
+    },
+    methods: {
+      handleSubmit() {
+        getPathPermissions(this.selectedPath).then(permissions => {
+          const writable = permissions.data.writable;
+          if (permissions.data.directory) {
+            this.$emit('submit', this.selectedPath, writable);
+          }
+        });
+      },
+    },
     $trs: {
       removeStorageLocation: {
         message: 'Remove storage location',
@@ -40,3 +71,12 @@
   };
 
 </script>
+
+
+<style lang="scss" scoped>
+
+  .description {
+    margin-top: 0;
+  }
+
+</style>
diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/ServerRestartModal.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/ServerRestartModal.vue
index 5f63aa9e0fc..322f94c2760 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/ServerRestartModal.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/ServerRestartModal.vue
@@ -7,18 +7,18 @@
     @submit="handleSubmit"
     @cancel="$emit('cancel')"
   >
-    <p v-if="changedSetting === 'primary'">
-      {{ $tr('selectedPath', { path: path.name }) }}
+    <p v-if="changedSetting === 'add'" class="description">
+      {{ $tr('selectedPath', { path: path.path }) }}
     </p>
-    <p>{{ getMessage() }}</p>
-    <div v-if="changedSetting === 'primary'">
+    <p class="description">
+      {{ getMessage() }}
+    </p>
+    <div v-if="changedSetting === 'add' && path.writable === true">
       <KCheckbox
         :checked="confirmationChecked"
         :label="$tr('makePrimary')"
+        :description="$tr('labelPrimary')"
       />
-      <p :style="{ color: $themeTokens.textDisabled }">
-        {{ $tr('labelPrimary') }}
-      </p>
     </div>
   </KModal>
 
@@ -62,7 +62,7 @@
         return message + this.$tr('serverRestartDecription');
       },
       handleSubmit() {
-        if (this.changedSetting === 'primary') {
+        if (this.changedSetting === 'add') {
           this.$emit('submit', this.confirmationChecked);
         } else {
           this.$emit('submit');
@@ -107,3 +107,12 @@
   };
 
 </script>
+
+
+<style lang="scss" scoped>
+
+  .description {
+    margin-top: 0;
+  }
+
+</style>
diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
index 897aeb7fae4..13e82c04688 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
@@ -143,11 +143,11 @@
           />
         </div>
 
-        <div v-if="browserLocationMatchesServerURL">
+        <div v-show="browserLocationMatchesServerURL && (secondaryStorageLocations.length > 0)">
           <h2>
             {{ $tr('secondaryStorage') }}
           </h2>
-          <p class="info-description">
+          <p v-show="!multipleReadOnlyPaths" class="info-description">
             {{ $tr('secondaryStorageDescription') }}
           </p>
           <p v-for="path in secondaryStorageLocations" :key="path.index">
@@ -253,8 +253,10 @@
 
       <PrimaryStorageLocationModal
         v-if="showChangePrimaryLocationModal"
+        :primaryPath="primaryStorageLocation"
+        :storageLocations="storageLocations.filter(el => el.writable)"
         @cancel="showChangePrimaryLocationModal = false"
-        @submit="handleSubmit"
+        @submit="changePrimaryLocation"
       />
 
       <AddStorageLocationModal
@@ -266,8 +268,9 @@
 
       <RemoveStorageLocationModal
         v-if="showRemoveStorageLocationModal"
+        :storageLocations="secondaryStorageLocations"
         @cancel="showRemoveStorageLocationModal = false"
-        @submit="handleSubmit"
+        @submit="removeStorageLocation"
       />
 
       <ServerRestartModal
@@ -619,8 +622,15 @@
           this.showAddStorageLocationModal = false;
         }
       },
-      handleSubmit(e) {
-        e.preventDefault();
+      changePrimaryLocation(path) {
+        const writable = true;
+        this.restartPath = {
+          path,
+          writable,
+        };
+        this.restartSetting = 'primary';
+        this.showRestartModal = true;
+        this.showChangePrimaryLocationModal = false;
       },
       addStorageLocation(path, writable) {
         this.restartPath = {
@@ -631,22 +641,43 @@
         this.restartSetting = 'add';
         this.showRestartModal = true;
         this.showAddStorageLocationModal = false;
-        this.showAddStorageServerRestartModal = true;
       },
+      removeStorageLocation(path, writable) {
+        this.restartPath = {
+          path,
+          writable,
+        };
 
-      handleServerRestart() {
+        this.restartSetting = 'remove';
+        this.showRestartModal = true;
+        this.showRemoveStorageLocationModal = false;
+      },
+      handleServerRestart(confirmationChecked) {
         this.showRestartModal = false;
         if (this.restartSetting === 'add') {
           this.storageLocations.push(this.restartPath);
           this.secondaryStorageLocations.push(this.restartPath.path);
+          if (confirmationChecked === true) {
+            this.primaryStorageLocation = this.restartPath.path;
+          }
           this.handleClickSave();
         } else if (this.restartSetting === 'remove') {
           this.storageLocations = this.storageLocations.filter(
             el => el.path !== this.restartPath.path
           );
           // TODO: remove location
+          this.secondaryStorageLocations = this.secondaryStorageLocations.filter(
+            el => el !== this.restartPath.path
+          );
+          this.handleClickSave();
         } else if (this.restartSetting === 'primary') {
           // TODO: set primary location
+          this.secondaryStorageLocations.push(this.primaryStorageLocation);
+          this.secondaryStorageLocations = this.secondaryStorageLocations.filter(
+            el => el !== this.restartPath.path
+          );
+          this.primaryStorageLocation = this.restartPath.path;
+          this.handleClickSave();
         }
       },
       isWritablePath(path) {
@@ -656,6 +687,13 @@
         }
         return '';
       },
+      multipleReadOnlyPaths() {
+        if (this.storageLocations.filter(el => el.writeable).length === 0) {
+          return true;
+        } else {
+          return false;
+        }
+      },
     },
     $trs: {
       browserDefaultLanguage: {