From 727484cc0e26650b83f1c6a07566e7fd9087d27a Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Wed, 20 Apr 2022 15:51:02 -0400
Subject: [PATCH] Improve publish button UX - After clicking the publish
 button, display a loading indicator and poll the server to determine when the
 publishing is complete - Once the publishing is complete, display a snackbar
 notification with a link to the newly published version - If the publish
 button is clicked while a publish is ongoing, display an error message and
 begin polling for the publish to complete. Once completed, display a link to
 it.

---
 .../DandisetLandingView/DandisetPublish.vue   | 95 +++++++++++++++++--
 1 file changed, 85 insertions(+), 10 deletions(-)

diff --git a/web/src/views/DandisetLandingView/DandisetPublish.vue b/web/src/views/DandisetLandingView/DandisetPublish.vue
index 84b1f0673..ea08c4df5 100644
--- a/web/src/views/DandisetLandingView/DandisetPublish.vue
+++ b/web/src/views/DandisetLandingView/DandisetPublish.vue
@@ -84,7 +84,13 @@
             >
               Publish
               <v-spacer />
-              <v-icon>mdi-upload</v-icon>
+              <v-progress-circular
+                v-if="publishing"
+                indeterminate
+              />
+              <v-icon v-else>
+                mdi-upload
+              </v-icon>
             </v-btn>
           </div>
         </template>
@@ -301,6 +307,22 @@
         </v-btn>
       </v-col>
     </v-row>
+    <v-snackbar :value="!!alreadyBeingPublishedError">
+      This dandiset is already being published. Please wait for publishing to complete.
+    </v-snackbar>
+    <v-snackbar :value="!!publishedVersion">
+      Publish complete.
+      <template #action="{ attrs }">
+        <v-btn
+          color="info lighten-2"
+          text
+          v-bind="attrs"
+          @click="navigateToPublishedVersion"
+        >
+          Go to published dandiset
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-card>
 </template>
 
@@ -367,6 +389,14 @@ export default defineComponent({
       )),
     );
 
+    // true if the dandiset is being published due to the user
+    // clicking the publish button on this page
+    const publishing = ref(false);
+    // The version that resulted from the recent publish, if applicable
+    const publishedVersion = ref('');
+
+    const alreadyBeingPublishedError = ref(false);
+
     const publishDisabledMessage: ComputedRef<string> = computed(() => {
       if (!loggedIn.value) {
         return 'You must be logged in to edit.';
@@ -392,9 +422,31 @@ export default defineComponent({
       if (currentDandiset.value?.dandiset.embargo_status === 'UNEMBARGOING') {
         return 'This dandiset is being unembargoed, please wait.';
       }
+      if (publishing.value) {
+        return 'This dandiset is being published, please wait.';
+      }
       return '';
     });
 
+    setInterval(async () => {
+      // When a dandiset is being published, poll the server to check if it's finished
+      if (publishing.value && currentDandiset.value) {
+        const { identifier } = currentDandiset.value.dandiset!;
+        const { version } = currentDandiset.value;
+        const dandiset = await dandiRest.specificVersion(identifier, version);
+
+        if (dandiset?.status === 'Published') {
+          // re-fetch current dandiset so it includes the newly published version
+          await store.dispatch.dandiset.fetchDandiset({ identifier, version });
+          await store.dispatch.dandiset.fetchDandisetVersions({ identifier });
+
+          publishedVersion.value = otherVersions.value![0].version;
+
+          publishing.value = false;
+        }
+      }
+    }, 2000);
+
     const publishButtonDisabled = computed(() => !!(
       currentDandiset.value?.version_validation_errors.length
       || currentDandiset.value?.asset_validation_errors.length
@@ -465,18 +517,37 @@ export default defineComponent({
           return;
         }
 
-        const version = await dandiRest.publish(currentDandiset.value.dandiset.identifier);
-        // navigate to the newly published version
-        router.push({
-          name: 'dandisetLanding',
-          params: {
-            identifier: currentDandiset.value?.dandiset.identifier,
-            version: version.version,
-          },
-        });
+        publishing.value = true;
+        try {
+          const { version } = await dandiRest.publish(currentDandiset.value.dandiset.identifier);
+          publishedVersion.value = version;
+        } catch (e: any) {
+          // A 423: Locked error means that the dandiset is currently undergoing publishing.
+          // If that happens, display an error.
+          if (e.response?.status === 423) {
+            alreadyBeingPublishedError.value = true;
+          } else {
+            throw e;
+          }
+        }
       }
     }
 
+    function navigateToPublishedVersion() {
+      const { identifier } = currentDandiset.value!.dandiset;
+      const version = publishedVersion.value;
+
+      // reset these for the new version
+      publishing.value = false;
+      publishedVersion.value = '';
+
+      // navigate to the newly published version
+      router.push({
+        name: 'dandisetLanding',
+        params: { identifier, version },
+      });
+    }
+
     return {
       currentDandiset,
       currentVersion,
@@ -494,6 +565,10 @@ export default defineComponent({
       draftVersion,
       showPublishWarning,
       showPublishWarningDialog,
+      publishing,
+      alreadyBeingPublishedError,
+      publishedVersion,
+      navigateToPublishedVersion,
       isOwner,
     };
   },