From 0c57c722f369171a59cf7544cb36a891f57d624b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Sat, 25 Dec 2021 19:02:30 +0330
Subject: [PATCH 01/10] Add Back button in for Chose Remote Data when there is
 an error navigation file source

---
 .../components/FilesDialog/FilesDialog.vue    |  9 +++++--
 .../SelectionDialog/SelectionDialog.vue       | 27 ++++++++++++++++---
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index f55a3cf275a..bd0503dd4b6 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -3,7 +3,9 @@
         :error-message="errorMessage"
         :options-show="optionsShow"
         :modal-show="modalShow"
-        :hide-modal="() => (modalShow = false)">
+        :hide-modal="() => (modalShow = false)"
+        :back-func="() => load()"
+        :undo-show="undoShow">
         <template v-slot:search>
             <data-dialog-search v-model="filter" />
         </template>
@@ -261,7 +263,10 @@ export default {
             this.filter = null;
             this.optionsShow = false;
             this.undoShow = !this.urlTracker.atRoot();
-            if (this.urlTracker.atRoot()) {
+            if (this.urlTracker.atRoot() || this.errorMessage) {
+                if (this.errorMessage) {
+                  this.errorMessage = null
+                }
                 this.services
                     .getFileSources()
                     .then((items) => {
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 5227e1d4ad4..76579e9595d 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -3,8 +3,6 @@
         modal-class="selection-dialog-modal"
         v-if="modalShow"
         visible
-        ok-only
-        ok-title="Close"
         :static="modalStatic"
         @hide="hideModal">
         <template v-slot:modal-header>
@@ -15,11 +13,20 @@
             <slot name="options" v-if="optionsShow"> </slot>
             <div v-else><span class="fa fa-spinner fa-spin" /> <span>Please wait...</span></div>
         </div>
-        <template v-if="!errorMessage" v-slot:modal-footer>
-            <div class="w-100">
+        <template v-slot:modal-footer>
+            <div v-if="!errorMessage" class="w-100">
                 <slot name="buttons"> </slot>
                 <b-btn size="sm" class="float-right selection-dialog-modal-cancel" @click="hideModal"> Cancel </b-btn>
             </div>
+            <div v-else class="w-100">
+              <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="backFunc()">
+                <font-awesome-icon :icon="['fas', 'caret-left']"/>
+                Back
+              </b-btn>
+              <b-btn size="sm" class="float-right" variant="primary" id="close-btn" @click="hideModal">
+                Close
+              </b-btn>
+            </div>
         </template>
     </b-modal>
 </template>
@@ -27,6 +34,7 @@
 <script>
 import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 Vue.use(BootstrapVue);
 
@@ -56,6 +64,17 @@ export default {
             type: Function,
             required: true,
         },
+        backFunc: {
+          type: Function,
+          required: true,
+        },
+        undoShow: {
+          type: Boolean,
+          required: true,
+        },
+    },
+    components: {
+      FontAwesomeIcon,
     },
 };
 </script>

From 50d39d787ed2ce16754f25e8571a3fc42f1260fa Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Sat, 25 Dec 2021 19:05:06 +0330
Subject: [PATCH 02/10] Show ftp helper text in when navigating file source and
 oidc help text when enabled

---
 .../src/components/FilesDialog/FilesDialog.vue  |  5 ++++-
 .../SelectionDialog/SelectionDialog.vue         | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index bd0503dd4b6..258c2412e4c 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -5,7 +5,8 @@
         :modal-show="modalShow"
         :hide-modal="() => (modalShow = false)"
         :back-func="() => load()"
-        :undo-show="undoShow">
+        :undo-show="undoShow"
+        :show-ftp-helper="showFTPHelper">
         <template v-slot:search>
             <data-dialog-search v-model="filter" />
         </template>
@@ -91,6 +92,7 @@ export default {
             showDetails: true,
             isBusy: false,
             currentDirectory: undefined,
+            showFTPHelper: false,
             selectAllIcon: selectionStates.unselected,
         };
     },
@@ -260,6 +262,7 @@ export default {
         /** Performs server request to retrieve data records **/
         load: function (record) {
             this.currentDirectory = this.urlTracker.getUrl(record);
+            this.showFTPHelper = record?.url === 'gxftp://';
             this.filter = null;
             this.optionsShow = false;
             this.undoShow = !this.urlTracker.atRoot();
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 76579e9595d..42541f77847 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -8,6 +8,12 @@
         <template v-slot:modal-header>
             <slot name="search"> </slot>
         </template>
+        <b-alert v-if="showFtpHelper" variant="info" show>
+          This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at
+          <strong>{{ ftpUploadSite }}</strong> using your Galaxy credentials.
+          For help visit the <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.
+          <span v-if="oidcEnabled"><br/>If you are signed-in to Galaxy using a third-party identity and you <strong>do not have a Galaxy password</strong> please use the reset password option in the login form with your email to create a password for your account.</span>
+        </b-alert>
         <b-alert v-if="errorMessage" variant="danger" show v-html="errorMessage" />
         <div v-else>
             <slot name="options" v-if="optionsShow"> </slot>
@@ -33,6 +39,7 @@
 
 <script>
 import Vue from "vue";
+import { getGalaxyInstance } from "app";
 import BootstrapVue from "bootstrap-vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -72,10 +79,20 @@ export default {
           type: Boolean,
           required: true,
         },
+        showFtpHelper: {
+          type: Boolean,
+          required: false,
+        },
     },
     components: {
       FontAwesomeIcon,
     },
+    data() {
+      return {
+        ftpUploadSite: getGalaxyInstance().config.ftp_upload_site,
+        oidcEnabled: getGalaxyInstance().config.enable_oidc,
+      }
+    },
 };
 </script>
 

From 7f6c388d256639cf22492a5c8877875a19acecd1 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Sun, 26 Dec 2021 14:40:40 +0330
Subject: [PATCH 03/10] Check and format code style

---
 .../components/FilesDialog/FilesDialog.vue    |  4 +-
 .../SelectionDialog/SelectionDialog.vue       | 53 +++++++++----------
 2 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index 258c2412e4c..f6e534a57e6 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -262,13 +262,13 @@ export default {
         /** Performs server request to retrieve data records **/
         load: function (record) {
             this.currentDirectory = this.urlTracker.getUrl(record);
-            this.showFTPHelper = record?.url === 'gxftp://';
+            this.showFTPHelper = record?.url === "gxftp://";
             this.filter = null;
             this.optionsShow = false;
             this.undoShow = !this.urlTracker.atRoot();
             if (this.urlTracker.atRoot() || this.errorMessage) {
                 if (this.errorMessage) {
-                  this.errorMessage = null
+                    this.errorMessage = null;
                 }
                 this.services
                     .getFileSources()
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 42541f77847..95e25fd38bf 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -1,18 +1,17 @@
 <template>
-    <b-modal
-        modal-class="selection-dialog-modal"
-        v-if="modalShow"
-        visible
-        :static="modalStatic"
-        @hide="hideModal">
+    <b-modal modal-class="selection-dialog-modal" v-if="modalShow" visible :static="modalStatic" @hide="hideModal">
         <template v-slot:modal-header>
             <slot name="search"> </slot>
         </template>
         <b-alert v-if="showFtpHelper" variant="info" show>
-          This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at
-          <strong>{{ ftpUploadSite }}</strong> using your Galaxy credentials.
-          For help visit the <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.
-          <span v-if="oidcEnabled"><br/>If you are signed-in to Galaxy using a third-party identity and you <strong>do not have a Galaxy password</strong> please use the reset password option in the login form with your email to create a password for your account.</span>
+            This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at
+            <strong>{{ ftpUploadSite }}</strong> using your Galaxy credentials. For help visit the
+            <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.
+            <span v-if="oidcEnabled"
+                ><br />If you are signed-in to Galaxy using a third-party identity and you
+                <strong>do not have a Galaxy password</strong> please use the reset password option in the login form
+                with your email to create a password for your account.</span
+            >
         </b-alert>
         <b-alert v-if="errorMessage" variant="danger" show v-html="errorMessage" />
         <div v-else>
@@ -25,13 +24,11 @@
                 <b-btn size="sm" class="float-right selection-dialog-modal-cancel" @click="hideModal"> Cancel </b-btn>
             </div>
             <div v-else class="w-100">
-              <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="backFunc()">
-                <font-awesome-icon :icon="['fas', 'caret-left']"/>
-                Back
-              </b-btn>
-              <b-btn size="sm" class="float-right" variant="primary" id="close-btn" @click="hideModal">
-                Close
-              </b-btn>
+                <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="backFunc()">
+                    <font-awesome-icon :icon="['fas', 'caret-left']" />
+                    Back
+                </b-btn>
+                <b-btn size="sm" class="float-right" variant="primary" id="close-btn" @click="hideModal"> Close </b-btn>
             </div>
         </template>
     </b-modal>
@@ -72,26 +69,26 @@ export default {
             required: true,
         },
         backFunc: {
-          type: Function,
-          required: true,
+            type: Function,
+            required: true,
         },
         undoShow: {
-          type: Boolean,
-          required: true,
+            type: Boolean,
+            required: true,
         },
         showFtpHelper: {
-          type: Boolean,
-          required: false,
+            type: Boolean,
+            required: false,
         },
     },
     components: {
-      FontAwesomeIcon,
+        FontAwesomeIcon,
     },
     data() {
-      return {
-        ftpUploadSite: getGalaxyInstance().config.ftp_upload_site,
-        oidcEnabled: getGalaxyInstance().config.enable_oidc,
-      }
+        return {
+            ftpUploadSite: getGalaxyInstance().config.ftp_upload_site,
+            oidcEnabled: getGalaxyInstance().config.enable_oidc,
+        };
     },
 };
 </script>

From d6e1a82249239e6009f15bbecbf9e1e44fe3a6b8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 27 Dec 2021 22:32:54 +0330
Subject: [PATCH 04/10] SelectionDialog: set default for `backFunc`, make
 `undoShow` optional and optional chaining for getGalaxyInstance to preventing
 raise an error during initializing

---
 .../src/components/SelectionDialog/SelectionDialog.vue   | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 95e25fd38bf..94decc84fd1 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -70,11 +70,12 @@ export default {
         },
         backFunc: {
             type: Function,
-            required: true,
+            required: false,
+            default: () => {},
         },
         undoShow: {
             type: Boolean,
-            required: true,
+            required: false,
         },
         showFtpHelper: {
             type: Boolean,
@@ -86,8 +87,8 @@ export default {
     },
     data() {
         return {
-            ftpUploadSite: getGalaxyInstance().config.ftp_upload_site,
-            oidcEnabled: getGalaxyInstance().config.enable_oidc,
+            ftpUploadSite: getGalaxyInstance()?.config?.ftp_upload_site,
+            oidcEnabled: getGalaxyInstance()?.config?.enable_oidc,
         };
     },
 };

From 73de30a53cef66bf06edbd003142c7d6c77c6493 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 29 Dec 2021 18:18:12 +0330
Subject: [PATCH 05/10] Add new slot 'helper' to SelectionDialog and other
 improvements

in modal-fotter, wrap 'w-100' class to the parent div, delete showFtpHelper prop and data(), delete ftp alert
---
 .../SelectionDialog/SelectionDialog.vue       | 48 +++++++------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 94decc84fd1..3be581bd1ee 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -3,32 +3,29 @@
         <template v-slot:modal-header>
             <slot name="search"> </slot>
         </template>
-        <b-alert v-if="showFtpHelper" variant="info" show>
-            This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at
-            <strong>{{ ftpUploadSite }}</strong> using your Galaxy credentials. For help visit the
-            <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.
-            <span v-if="oidcEnabled"
-                ><br />If you are signed-in to Galaxy using a third-party identity and you
-                <strong>do not have a Galaxy password</strong> please use the reset password option in the login form
-                with your email to create a password for your account.</span
-            >
-        </b-alert>
+        <slot name="helper"> </slot>
         <b-alert v-if="errorMessage" variant="danger" show v-html="errorMessage" />
         <div v-else>
             <slot name="options" v-if="optionsShow"> </slot>
             <div v-else><span class="fa fa-spinner fa-spin" /> <span>Please wait...</span></div>
         </div>
         <template v-slot:modal-footer>
-            <div v-if="!errorMessage" class="w-100">
-                <slot name="buttons"> </slot>
-                <b-btn size="sm" class="float-right selection-dialog-modal-cancel" @click="hideModal"> Cancel </b-btn>
-            </div>
-            <div v-else class="w-100">
-                <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="backFunc()">
-                    <font-awesome-icon :icon="['fas', 'caret-left']" />
-                    Back
-                </b-btn>
-                <b-btn size="sm" class="float-right" variant="primary" id="close-btn" @click="hideModal"> Close </b-btn>
+            <div class="w-100">
+                <div v-if="!errorMessage">
+                    <slot name="buttons"> </slot>
+                    <b-btn size="sm" class="float-right selection-dialog-modal-cancel" @click="hideModal">
+                        Cancel
+                    </b-btn>
+                </div>
+                <div v-else>
+                    <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="backFunc()">
+                        <font-awesome-icon :icon="['fas', 'caret-left']" />
+                        Back
+                    </b-btn>
+                    <b-btn size="sm" class="float-right" variant="primary" id="close-btn" @click="hideModal">
+                        Close
+                    </b-btn>
+                </div>
             </div>
         </template>
     </b-modal>
@@ -36,7 +33,6 @@
 
 <script>
 import Vue from "vue";
-import { getGalaxyInstance } from "app";
 import BootstrapVue from "bootstrap-vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -77,20 +73,10 @@ export default {
             type: Boolean,
             required: false,
         },
-        showFtpHelper: {
-            type: Boolean,
-            required: false,
-        },
     },
     components: {
         FontAwesomeIcon,
     },
-    data() {
-        return {
-            ftpUploadSite: getGalaxyInstance()?.config?.ftp_upload_site,
-            oidcEnabled: getGalaxyInstance()?.config?.enable_oidc,
-        };
-    },
 };
 </script>
 

From 2230e577b2f481eed79a1d013e18fa9118bd47d2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 29 Dec 2021 18:21:20 +0330
Subject: [PATCH 06/10] Wrap FTP alert to helper slot

Delete redundant if statement in the `load` method, add `ftpUploadSite` and `oidcEnabled` to data
---
 .../components/FilesDialog/FilesDialog.vue    | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index f6e534a57e6..ecbb7895a20 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -5,11 +5,22 @@
         :modal-show="modalShow"
         :hide-modal="() => (modalShow = false)"
         :back-func="() => load()"
-        :undo-show="undoShow"
-        :show-ftp-helper="showFTPHelper">
+        :undo-show="undoShow">
         <template v-slot:search>
             <data-dialog-search v-model="filter" />
         </template>
+        <template v-slot:helper>
+            <b-alert v-if="showFTPHelper" variant="info" show>
+                This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at
+                <strong>{{ ftpUploadSite }}</strong> using your Galaxy credentials. For help visit the
+                <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.
+                <span v-if="oidcEnabled"
+                    ><br />If you are signed-in to Galaxy using a third-party identity and you
+                    <strong>do not have a Galaxy password</strong> please use the reset password option in the login
+                    form with your email to create a password for your account.</span
+                >
+            </b-alert>
+        </template>
         <template v-slot:options>
             <data-dialog-table
                 v-if="optionsShow"
@@ -46,6 +57,7 @@
 
 <script>
 import Vue from "vue";
+import { getGalaxyInstance } from "../../app";
 import SelectionDialogMixin from "components/SelectionDialog/SelectionDialogMixin";
 import { selectionStates } from "components/SelectionDialog/selectionStates";
 import { UrlTracker } from "components/DataDialog/utilities";
@@ -94,6 +106,8 @@ export default {
             currentDirectory: undefined,
             showFTPHelper: false,
             selectAllIcon: selectionStates.unselected,
+            ftpUploadSite: getGalaxyInstance()?.config?.ftp_upload_site,
+            oidcEnabled: getGalaxyInstance()?.config?.enable_oidc,
         };
     },
     created: function () {
@@ -267,9 +281,7 @@ export default {
             this.optionsShow = false;
             this.undoShow = !this.urlTracker.atRoot();
             if (this.urlTracker.atRoot() || this.errorMessage) {
-                if (this.errorMessage) {
-                    this.errorMessage = null;
-                }
+                this.errorMessage = null;
                 this.services
                     .getFileSources()
                     .then((items) => {

From ee4dc4fadedb419bf427d18158adfc1d48c9867d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 31 Dec 2021 14:04:35 +0330
Subject: [PATCH 07/10] FilesDialog: change `back-func` from callback.
 SelectionDialog: change back button @click

---
 client/src/components/FilesDialog/FilesDialog.vue         | 2 +-
 client/src/components/SelectionDialog/SelectionDialog.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index ecbb7895a20..1a9b7a3b36c 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -4,7 +4,7 @@
         :options-show="optionsShow"
         :modal-show="modalShow"
         :hide-modal="() => (modalShow = false)"
-        :back-func="() => load()"
+        :back-func="load"
         :undo-show="undoShow">
         <template v-slot:search>
             <data-dialog-search v-model="filter" />
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 3be581bd1ee..6acda0d7e73 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -18,7 +18,7 @@
                     </b-btn>
                 </div>
                 <div v-else>
-                    <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="backFunc()">
+                    <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="backFunc">
                         <font-awesome-icon :icon="['fas', 'caret-left']" />
                         Back
                     </b-btn>

From 0a391163c5b60f0f54eb50a45eb12f7293b22333 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 3 Jan 2022 21:14:08 +0330
Subject: [PATCH 08/10] FilesDialog: add id `helper` for helper alert

---
 client/src/components/FilesDialog/FilesDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index 1a9b7a3b36c..b0dd3fb4832 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -10,7 +10,7 @@
             <data-dialog-search v-model="filter" />
         </template>
         <template v-slot:helper>
-            <b-alert v-if="showFTPHelper" variant="info" show>
+            <b-alert v-if="showFTPHelper" id="helper" variant="info" show>
                 This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at
                 <strong>{{ ftpUploadSite }}</strong> using your Galaxy credentials. For help visit the
                 <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.

From 38b350c1bbe83815aa57534a3fe1b70e8e37a28d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 3 Jan 2022 21:14:58 +0330
Subject: [PATCH 09/10] testingData: add `ftpdId`, `empty-dir` in
 `rootResponse` and `someErrorText`

---
 client/src/components/FilesDialog/testingData.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/client/src/components/FilesDialog/testingData.js b/client/src/components/FilesDialog/testingData.js
index 658fb809a0e..89ff73c9292 100644
--- a/client/src/components/FilesDialog/testingData.js
+++ b/client/src/components/FilesDialog/testingData.js
@@ -1,3 +1,4 @@
+export const ftpId = "_ftp";
 export const rootId = "pdb-gzip";
 export const directoryId = "gxfiles://pdb-gzip/directory1";
 export const subDirectoryId = "gxfiles://pdb-gzip/directory1/subdirectory1";
@@ -24,6 +25,16 @@ export const rootResponse = [
         requires_roles: null,
         requires_groups: null,
     },
+    {
+        id: "empty-dir",
+        type: "posix",
+        uri_root: "gxfiles://empty-dir",
+        label: "Empty Directory",
+        doc: "Empty Directory",
+        writable: true,
+        requires_roles: null,
+        requires_groups: null,
+    },
 ];
 
 export const pdbResponse = [
@@ -172,3 +183,5 @@ export const subsubdirectoryResponse = [
         path: "directory1/subdirectory1/subsubdirectory",
     },
 ];
+
+export const someErrorText = "some error text";

From abe6120ca95e28eb663b5e9d3329dfc1daa6727d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 3 Jan 2022 21:16:10 +0330
Subject: [PATCH 10/10] FilesDialog.test: Test show ftp helper and show loading
 error and return to root directory

---
 .../FilesDialog/FilesDialog.test.js           | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/client/src/components/FilesDialog/FilesDialog.test.js b/client/src/components/FilesDialog/FilesDialog.test.js
index 31cada5b3a1..c3712832737 100644
--- a/client/src/components/FilesDialog/FilesDialog.test.js
+++ b/client/src/components/FilesDialog/FilesDialog.test.js
@@ -9,6 +9,7 @@ import axios from "axios";
 import BootstrapVue from "bootstrap-vue";
 
 import {
+    ftpId,
     rootId,
     directoryId,
     subDirectoryId,
@@ -19,6 +20,7 @@ import {
     directory2RecursiveResponse,
     directory1Response,
     subsubdirectoryResponse,
+    someErrorText,
 } from "./testingData";
 import { selectionStates } from "components/SelectionDialog/selectionStates";
 
@@ -44,6 +46,11 @@ const initComponent = async (props) => {
         axiosMock.onGet(path).reply(200, response);
     }
 
+    axiosMock.onGet("/api/remote_files?target=gxfiles://empty-dir").reply(404, {
+        err_msg: someErrorText,
+        err_code: 404,
+    });
+
     const wrapper = shallowMount(FilesDialog, {
         localVue,
         propsData: props,
@@ -193,6 +200,43 @@ describe("FilesDialog, file mode", () => {
         const rootNode = utils.getRenderedDirectory(rootId);
         expect(rootNode._rowVariant).toBe(selectionStates.selected);
     });
+
+    it("should show ftp helper only in ftp directory", async () => {
+        // open some other directory than ftp
+        await utils.open_root_folder();
+        // check that ftp helper is not visible
+        expect(wrapper.vm.showFTPHelper).toBe(false);
+        expect(wrapper.find("#helper").exists()).toBe(false);
+        // back to root folder
+        await utils.navigateBack();
+
+        // open ftp directory
+        await utils.openDirectory(ftpId);
+        // check that ftp helper is visible
+        expect(wrapper.vm.showFTPHelper).toBe(true);
+        expect(wrapper.find("#helper").exists()).toBe(true);
+    });
+
+    it("should show loading error and can return back", async () => {
+        expect(wrapper.vm.errorMessage).toBeNull();
+
+        // open directory with error
+        await utils.openDirectory("empty-dir");
+        // assert that error message is set and showed
+        expect(wrapper.vm.errorMessage).toBe(someErrorText);
+        expect(wrapper.html()).toContain(someErrorText);
+
+        // assert that OK button is disabled
+        expect(wrapper.vm.hasValue).toBe(false);
+
+        // back to the root folder
+        await wrapper.find("#back-btn").trigger("click");
+        await flushPromises();
+        expect(wrapper.vm.items.length).toBe(rootResponse.length);
+
+        // assert that OK button is disabled
+        expect(wrapper.vm.hasValue).toBe(false);
+    });
 });
 
 describe("FilesDialog, directory mode", () => {
@@ -238,6 +282,27 @@ describe("FilesDialog, directory mode", () => {
         //should close modal
         expect(wrapper.vm.modalShow).toBe(false);
     });
+
+    it("should show loading error and can return back", async () => {
+        expect(wrapper.vm.errorMessage).toBeNull();
+
+        // open directory with error
+        await utils.openDirectory("empty-dir");
+        // assert that error message is set and showed
+        expect(wrapper.vm.errorMessage).toBe(someErrorText);
+        expect(wrapper.html()).toContain(someErrorText);
+
+        // assert that OK button is disabled
+        expect(wrapper.vm.hasValue).toBe(false);
+
+        // back to the root folder
+        await wrapper.find("#back-btn").trigger("click");
+        await flushPromises();
+        expect(wrapper.vm.items.length).toBe(rootResponse.length);
+
+        // assert that OK button is disabled
+        expect(wrapper.vm.hasValue).toBe(false);
+    });
 });
 
 /** Util methods **/