From ab62f136be32114d8ae0082a0a36126194527f13 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Sat, 21 Dec 2024 13:24:23 -0500
Subject: [PATCH 1/3] Refactor DLP validation error UI into its own component

---
 .../DandisetLandingView/DandisetPublish.vue   | 145 +----------------
 .../DandisetValidationErrors.vue              | 152 ++++++++++++++++++
 2 files changed, 156 insertions(+), 141 deletions(-)
 create mode 100644 web/src/views/DandisetLandingView/DandisetValidationErrors.vue

diff --git a/web/src/views/DandisetLandingView/DandisetPublish.vue b/web/src/views/DandisetLandingView/DandisetPublish.vue
index d2a587e73..5a1572af4 100644
--- a/web/src/views/DandisetLandingView/DandisetPublish.vue
+++ b/web/src/views/DandisetLandingView/DandisetPublish.vue
@@ -153,124 +153,7 @@
       </v-tooltip>
     </v-row>
 
-    <v-row
-      v-if="currentDandiset.status === 'Pending'"
-      class="my-2 px-1"
-      no-gutters
-    >
-      <v-menu
-        :nudge-width="200"
-      >
-        <template #activator="{ on: menu, attrs }">
-          <v-tooltip bottom>
-            <template #activator="{ on: tooltip }">
-              <v-card
-                class="amber lighten-5 no-text-transform"
-                outlined
-                v-bind="attrs"
-                v-on="{ ...tooltip, ...menu }"
-              >
-                <v-row class="align-center px-4">
-                  <v-col
-                    cols="1"
-                    class="justify-center py-0"
-                  >
-                    <v-icon
-                      color="warning"
-                      class="mr-1"
-                    >
-                      mdi-playlist-remove
-                    </v-icon>
-                  </v-col>
-                  <v-spacer />
-                  <v-col cols="9">
-                    <div
-                      v-if="currentDandiset"
-                      class="text-caption"
-                    >
-                      Validation of the dandiset is pending.
-                    </div>
-                  </v-col>
-                </v-row>
-              </v-card>
-            </template>
-            <span>Reload the page to see if validation is over.</span>
-          </v-tooltip>
-        </template>
-      </v-menu>
-    </v-row>
-
-    <!-- Dialog where version and asset errors are shown -->
-    <v-dialog v-model="errorDialogOpen">
-      <ValidationErrorDialog
-        :selected-tab="selectedTab"
-        :asset-validation-errors="currentDandiset.asset_validation_errors"
-        :version-validation-errors="currentDandiset.version_validation_errors"
-        :owner="isOwner"
-        @openMeditor="openMeditor"
-      />
-    </v-dialog>
-
-    <!-- Version Validation Errors Button -->
-    <v-card
-      v-if="currentDandiset.version_validation_errors.length"
-      class="my-2 px-1 amber lighten-5 no-text-transform"
-      outlined
-      @click="openErrorDialog('metadata')"
-    >
-      <v-row class="align-center px-4">
-        <v-col
-          cols="1"
-          class="justify-center py-0"
-        >
-          <v-icon
-            color="warning"
-            class="mr-1"
-          >
-            mdi-playlist-remove
-          </v-icon>
-        </v-col>
-        <v-spacer />
-        <v-col cols="9">
-          <div
-            v-if="currentDandiset"
-            class="text-caption"
-          >
-            This Dandiset has {{ currentDandiset.version_validation_errors.length }}
-            metadata validation error(s).
-          </div>
-        </v-col>
-      </v-row>
-    </v-card>
-
-    <!-- Asset Validation Errors Button -->
-    <v-card
-      v-if="numAssetValidationErrors"
-      class="my-2 px-1 amber lighten-5 no-text-transform"
-      outlined
-      @click="openErrorDialog('assets')"
-    >
-      <v-row class="align-center px-4">
-        <v-col
-          cols="1"
-          class="justify-center py-0"
-        >
-          <v-icon
-            color="warning"
-            class="mr-1"
-          >
-            mdi-database-remove
-          </v-icon>
-        </v-col>
-        <v-spacer />
-        <v-col cols="9">
-          <div class="text-caption">
-            This Dandiset has {{ numAssetValidationErrors }}
-            asset validation error(s).
-          </div>
-        </v-col>
-      </v-row>
-    </v-card>
+    <DandisetValidationErrors :dandiset="currentDandiset" :isOwner="isOwner" />
 
     <v-row>
       <v-subheader class="mb-2 black--text text-h5">
@@ -354,15 +237,14 @@ import moment from 'moment';
 
 import type { RawLocation } from 'vue-router';
 import { useRoute } from 'vue-router/composables';
+
 import { dandiRest, loggedIn as loggedInFunc, user } from '@/rest';
 import { useDandisetStore } from '@/stores/dandiset';
 import router from '@/router';
 import type { User, Version } from '@/types';
-
 import { draftVersion } from '@/utils/constants';
-import { open as meditorOpen } from '@/components/Meditor/state';
+import DandisetValidationErrors from './DandisetValidationErrors.vue';
 
-import ValidationErrorDialog from '@/components/DLP/ValidationErrorDialog.vue';
 
 const PUBLISH_CHECKLIST = [
   'A descriptive title (e.g., <span class="font-italic">Data related to foraging behavior in bees</span> rather than <span class="font-italic">Smith et al 2022</span>)',
@@ -490,30 +372,11 @@ onUnmounted(() => {
   window.clearInterval(timer);
 });
 
-// Error dialog
-const errorDialogOpen = ref(false);
-type ErrorCategory = 'metadata' | 'assets';
-const selectedTab = ref<ErrorCategory>('metadata');
-function openErrorDialog(tab: ErrorCategory) {
-  errorDialogOpen.value = true;
-  selectedTab.value = tab;
-}
 
-function openMeditor() {
-  errorDialogOpen.value = false;
-  meditorOpen.value = true;
-}
 
-const numAssetValidationErrors = computed(() => {
-  if (currentDandiset.value === null) {
-    return 0;
-  }
-
-  return currentDandiset.value.asset_validation_errors.length;
-});
 const publishButtonDisabled = computed(() => !!(
   currentDandiset.value?.version_validation_errors.length
-      || numAssetValidationErrors.value
+      || currentDandiset.value?.asset_validation_errors.length
       || currentDandiset.value?.dandiset.embargo_status !== 'OPEN'
       || publishDisabledMessage.value
 ));
diff --git a/web/src/views/DandisetLandingView/DandisetValidationErrors.vue b/web/src/views/DandisetLandingView/DandisetValidationErrors.vue
new file mode 100644
index 000000000..80d2aa9dc
--- /dev/null
+++ b/web/src/views/DandisetLandingView/DandisetValidationErrors.vue
@@ -0,0 +1,152 @@
+<template>
+  <v-container>
+    <v-row
+      v-if="dandiset.status === 'Pending'"
+      class="my-2 px-1"
+      no-gutters
+    >
+      <v-menu
+        :nudge-width="200"
+      >
+        <template #activator="{ on: menu, attrs }">
+          <v-tooltip bottom>
+            <template #activator="{ on: tooltip }">
+              <v-card
+                class="amber lighten-5 no-text-transform"
+                outlined
+                v-bind="attrs"
+                v-on="{ ...tooltip, ...menu }"
+              >
+                <v-row class="align-center px-4">
+                  <v-col
+                    cols="1"
+                    class="justify-center py-0"
+                  >
+                    <v-icon
+                      color="warning"
+                      class="mr-1"
+                    >
+                      mdi-playlist-remove
+                    </v-icon>
+                  </v-col>
+                  <v-spacer />
+                  <v-col cols="9">
+                    <div class="text-caption">
+                      Validation of the dandiset is pending.
+                    </div>
+                  </v-col>
+                </v-row>
+              </v-card>
+            </template>
+            <span>Reload the page to see if validation is over.</span>
+          </v-tooltip>
+        </template>
+      </v-menu>
+    </v-row>
+
+    <!-- Dialog where version and asset errors are shown -->
+    <v-dialog v-model="errorDialogOpen">
+      <ValidationErrorDialog
+        :selected-tab="selectedTab"
+        :asset-validation-errors="dandiset.asset_validation_errors"
+        :version-validation-errors="dandiset.version_validation_errors"
+        :owner="isOwner"
+        @openMeditor="openMeditor"
+      />
+    </v-dialog>
+
+    <!-- Version Validation Errors Button -->
+    <v-card
+      v-if="dandiset.version_validation_errors.length"
+      class="my-2 px-1 amber lighten-5 no-text-transform"
+      outlined
+      @click="openErrorDialog('metadata')"
+    >
+      <v-row class="align-center px-4">
+        <v-col
+          cols="1"
+          class="justify-center py-0"
+        >
+          <v-icon
+            color="warning"
+            class="mr-1"
+          >
+            mdi-playlist-remove
+          </v-icon>
+        </v-col>
+        <v-spacer />
+        <v-col cols="9">
+          <div class="text-caption">
+            This Dandiset has {{ dandiset.version_validation_errors.length }}
+            metadata validation error(s).
+          </div>
+        </v-col>
+      </v-row>
+    </v-card>
+
+    <!-- Asset Validation Errors Button -->
+    <v-card
+      v-if="numAssetValidationErrors"
+      class="my-2 px-1 amber lighten-5 no-text-transform"
+      outlined
+      @click="openErrorDialog('assets')"
+    >
+      <v-row class="align-center px-4">
+        <v-col
+          cols="1"
+          class="justify-center py-0"
+        >
+          <v-icon
+            color="warning"
+            class="mr-1"
+          >
+            mdi-database-remove
+          </v-icon>
+        </v-col>
+        <v-spacer />
+        <v-col cols="9">
+          <div class="text-caption">
+            This Dandiset has {{ numAssetValidationErrors }}
+            asset validation error(s).
+          </div>
+        </v-col>
+      </v-row>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, ref} from 'vue';
+import type { PropType } from 'vue';
+
+import ValidationErrorDialog from '@/components/DLP/ValidationErrorDialog.vue';
+import { open as meditorOpen } from '@/components/Meditor/state';
+import type { Version } from '@/types';
+
+const props = defineProps({
+  dandiset: {
+    type: Object as PropType<Version>,
+      required: true,
+  },
+  isOwner: {
+    type: Boolean as PropType<boolean>,
+    required: true,
+  },
+});
+
+const numAssetValidationErrors = computed(() => props.dandiset.asset_validation_errors.length);
+
+// Error dialog
+const errorDialogOpen = ref(false);
+type ErrorCategory = 'metadata' | 'assets';
+const selectedTab = ref<ErrorCategory>('metadata');
+function openErrorDialog(tab: ErrorCategory) {
+  errorDialogOpen.value = true;
+  selectedTab.value = tab;
+}
+
+function openMeditor() {
+  errorDialogOpen.value = false;
+  meditorOpen.value = true;
+}
+</script>

From e1ea6bc05e020168003c03e03aaeb3fc02907326 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Sat, 21 Dec 2024 13:28:01 -0500
Subject: [PATCH 2/3] Display validation errors on DLP for embargoed dandisets

---
 web/src/views/DandisetLandingView/DandisetUnembargo.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/views/DandisetLandingView/DandisetUnembargo.vue b/web/src/views/DandisetLandingView/DandisetUnembargo.vue
index d862d6333..e1417c0f0 100644
--- a/web/src/views/DandisetLandingView/DandisetUnembargo.vue
+++ b/web/src/views/DandisetLandingView/DandisetUnembargo.vue
@@ -146,6 +146,9 @@
         <span>This dandiset is being unembargoed, please wait.</span>
       </v-tooltip>
     </v-row>
+
+    <DandisetValidationErrors :dandiset="currentDandiset" :isOwner="true" />
+
     <v-row>
       <v-subheader class="mb-2 black--text text-h5">
         This Version
@@ -176,6 +179,7 @@ import moment from 'moment';
 import { dandiRest } from '@/rest';
 import { useDandisetStore } from '@/stores/dandiset';
 import type { IncompleteUpload } from '@/types';
+import DandisetValidationErrors from './DandisetValidationErrors.vue';
 import filesize from 'filesize';
 
 function formatDate(date: string, format: string = 'll'): string {

From 0f5bd72a2a7637c62bf3e9df0fad47807f327e60 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Sat, 21 Dec 2024 13:29:01 -0500
Subject: [PATCH 3/3] Improve wording for missing assets summary

If a dandiset has assets, but they are all in the INVALID status, it
will not have an assets summary.
---
 web/src/components/DLP/OverviewTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 4a03df129..ba2a6089e 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -165,7 +165,7 @@
               v-else-if="!assetSummary || !Object.keys(assetSummary).length"
               class="font-italic font-weight-bold"
             >
-              This Dandiset does not contain any assets.
+              This Dandiset does not contain any valid assets.
             </div>
             <div
               v-for="([type, items], i) in Object.entries(assetSummary)"