Update DANDI API Workflow

schemas/json/dandi/global.json

@@ -11,7 +11,7 @@
                 "staging_api_key": {
                     "type": "string",
                     "format": "password",
-                    "description": "Your DANDI API key from the <a href='https://gui-staging.dandiarchive.org' target='_blank'>staging (testing) server</a>"
+                    "description": "Your DANDI API key from the <a href='https://gui-staging.dandiarchive.org' target='_blank'>staging server</a>"
                 }
             },
             "required": ["main_api_key"]

schemas/json/dandi/upload.json

@@ -2,7 +2,7 @@
     "properties": {
         "dandiset_id": {
             "type": "string",
-            "description": "The unique identifier for your dandiset. Will automatically determine whether to upload to the main DANDI archive or the development staging server."
+            "description": "The unique identifier for your Dandiset, manually created on the <a href='https://dandiarchive.org' target='_blank'>main archive</a> or <a href='https://gui-staging.dandiarchive.org' target='_blank'>staging server</a>."
         },
         "cleanup": {
             "type": "boolean",

src/renderer/src/stories/Modal.ts

@@ -12,6 +12,7 @@ export interface ModalProps {
   showCloseButton?: boolean,
   width?: string
   height?: string
+  closeText?: string
 }
 
 export class Modal extends LitElement {
@@ -128,6 +129,10 @@ export class Modal extends LitElement {
         height: {
           type: String,
           reflext: true
+        },
+        closeText: {
+          type: String,
+          reflect: true
         }
       };
     }
@@ -141,6 +146,8 @@ export class Modal extends LitElement {
     declare width: ModalProps['width']
     declare height: ModalProps['height']
 
+    declare closeText: ModalProps['closeText']
+
     constructor(props: ModalProps = {}) {
       super();
 
@@ -150,6 +157,7 @@ export class Modal extends LitElement {
       this.onClose = props.onClose
       this.onOpen = props.onOpen
       this.showCloseButton = props.showCloseButton ?? true
+      this.closeText = props.closeText
 
       this.width = props.width
       this.height = props.height
@@ -173,7 +181,7 @@ export class Modal extends LitElement {
         <div class="modal-content ${this.open ? 'open' : ''}" style="${this.width ? `width: ${this.width};` : ''} ${this.height ? `height: ${this.height};` : ''}">
           <div class="modal-header">
               <span title="${this.header}">${this.header}</span>
-              ${this.showCloseButton ? html`<nwb-button secondary size="extra-small" @click="${this.toggle}">Close</nwb-button>` : ''}
+              ${this.showCloseButton ? html`<nwb-button secondary size="extra-small" @click="${this.toggle}">${this.closeText ?? 'Close'}</nwb-button>` : ''}
             </div>
             <div class="modal-body">
               <slot>No content</slot>

src/renderer/src/stories/pages/guided-mode/GuidedStart.js

@@ -92,7 +92,7 @@ export class GuidedStartPage extends Page {
                         </p>
                         <h4>4. Final Review</h4>
                         <p>
-                            Finally, you will upload your conversion to DANDI and review the resulting dandiset.
+                            Finally, you will upload your conversion to DANDI and review the resulting Dandiset.
                         </p>
 
                         <br>

src/renderer/src/stories/pages/guided-mode/options/GuidedStubPreview.js

@@ -38,10 +38,14 @@ export class GuidedStubPreviewPage extends Page {
         next: "Run Conversion",
         onNext: async () => {
             await this.save(); // Save in case the conversion fails
+
             delete this.info.globalState.conversion;
             this.info.globalState.conversion = await this.runConversions({}, true, {
                 title: "Running all conversions",
             });
+
+            await this.save(); // Save the conversion results
+
             this.to(1);
         },
     };

src/renderer/src/stories/pages/guided-mode/options/GuidedUpload.js

@@ -6,7 +6,8 @@ import { onThrow } from "../../../../errors";
 import { merge } from "../../utils.js";
 import Swal from "sweetalert2";
 import dandiUploadSchema from "../../../../../../../schemas/json/dandi/upload.json";
-import { uploadToDandi } from "../../uploads/UploadsPage.js";
+import { dandisetInfoContent, uploadToDandi } from "../../uploads/UploadsPage.js";
+import { InfoBox } from "../../../InfoBox.js";
 
 export class GuidedUploadPage extends Page {
     constructor(...args) {
@@ -19,7 +20,7 @@ export class GuidedUploadPage extends Page {
         const globalState = this.info.globalState;
         const isNewDandiset = globalState.upload?.dandiset_id !== this.localState.dandiset_id;
         merge({ upload: this.localState }, globalState); // Merge the local and global states
-        if (isNewDandiset) delete globalState.upload.results; // Clear the preview results entirely if a new dandiset
+        if (isNewDandiset) delete globalState.upload.results; // Clear the preview results entirely if a new Dandiset
     };
 
     header = {
@@ -36,7 +37,7 @@ export class GuidedUploadPage extends Page {
             const globalState = this.info.globalState;
             const globalUploadInfo = globalState.upload;
 
-            // Catch if dandiset is already uploaded
+            // Catch if Dandiset is already uploaded
             if ("results" in globalUploadInfo) {
                 const result = await Swal.fire({
                     title: "This pipeline has already uploaded to DANDI",
@@ -70,7 +71,10 @@ export class GuidedUploadPage extends Page {
             onThrow,
         });
 
-        return html` ${this.form} `;
+        return html`${new InfoBox({
+                header: "How do I create a Dandiset?",
+                content: dandisetInfoContent,
+            })}<br /><br />${this.form} `;
     }
 }
 

src/renderer/src/stories/pages/guided-mode/results/GuidedResults.js

@@ -11,6 +11,8 @@ export class GuidedResultsPage extends Page {
     render() {
         const { conversion } = this.info.globalState;
 
+        console.log(this.info.globalState);
+
         if (!conversion)
             return html`<div style="text-align: center;"><p>Your conversion failed. Please try again.</p></div>`;
 

src/renderer/src/stories/pages/settings/SettingsPage.js

@@ -5,6 +5,8 @@ import { onThrow } from "../../../errors";
 import dandiGlobalSchema from "../../../../../../schemas/json/dandi/global.json";
 import projectGlobalSchema from "../../../../../../schemas/json/project/globals.json" assert { type: "json" };
 
+import { validateDANDIApiKey } from "../../../validation/dandi";
+
 const schema = {
     properties: {
         output_locations: projectGlobalSchema,
@@ -17,13 +19,10 @@ import { global } from "../../../progress/index.js";
 import { merge } from "../utils.js";
 
 import { notyf } from "../../../dependencies/globals.js";
-import { header } from "../../forms/utils";
-
-const dandiAPITokenRegex = /^[a-f0-9]{40}$/;
 
-const setUndefinedIfNotDeclared = (schema, resolved) => {
-    for (let prop in schema.properties) {
-        const propInfo = schema.properties[prop];
+const setUndefinedIfNotDeclared = (schemaProps, resolved) => {
+    for (const prop in schemaProps) {
+        const propInfo = schemaProps[prop]?.properties;
         if (propInfo) setUndefinedIfNotDeclared(propInfo, resolved[prop]);
         else if (!(prop in resolved)) resolved[prop] = undefined;
     }
@@ -46,15 +45,13 @@ export class SettingsPage extends Page {
         return (this.#notification = this.notify(message, type));
     };
 
-    beforeSave = () => {
+    beforeSave = async () => {
+        await this.form.validate();
+
         const { resolved } = this.form;
-        for (let prop in schema.properties) {
-            const propInfo = schema.properties[prop];
-            const res = resolved[prop];
-            if (propInfo) setUndefinedIfNotDeclared(propInfo, res);
-        }
+        setUndefinedIfNotDeclared(schema.properties, resolved);
 
-        merge(this.form.resolved, global.data);
+        merge(resolved, global.data);
 
         global.save(); // Save the changes, even if invalid on the form
         this.#openNotyf("Global settings changes saved", "success");
@@ -77,10 +74,9 @@ export class SettingsPage extends Page {
             schema,
             mode: "accordion",
             onUpdate: () => (this.unsavedUpdates = true),
-            validateOnChange: (name, parent) => {
+            validateOnChange: async (name, parent) => {
                 const value = parent[name];
-                if (value && name.includes("api_key") && !dandiAPITokenRegex.test(value))
-                    return [{ type: "error", message: `${header(name)} must be a 40 character hexadecimal string` }];
+                if (name.includes("api_key")) return await validateDANDIApiKey(value, name.includes("staging"));
                 return true;
             },
             onThrow,

src/renderer/src/stories/pages/uploads/UploadsPage.js

@@ -13,29 +13,95 @@ import { global } from "../../../progress/index.js";
 import { merge } from "../utils.js";
 
 import { run } from "../guided-mode/options/utils.js";
-import Swal from "sweetalert2";
 import { Modal } from "../../Modal";
 import { DandiResults } from "../../DandiResults.js";
 
+import dandiGlobalSchema from "../../../../../../schemas/json/dandi/global.json";
+import { JSONSchemaInput } from "../../JSONSchemaInput.js";
+import { header } from "../../forms/utils";
+
+import { validateDANDIApiKey } from "../../../validation/dandi";
+import { InfoBox } from "../../InfoBox.js";
+
 export const isStaging = (id) => parseInt(id) >= 100000;
 
+export const dandisetInfoContent = html`<span>
+        You can create a new Dandiset on the <a href="http://dandiarchive.org" target="_blank">main DANDI archive</a>.
+        This Dandiset can be fully public or embargoed according to NIH policy. When you create a Dandiset, a permanent
+        ID is automatically assigned to it.
+    </span>
+    <hr />
+    <small
+        >To prevent the production server from being inundated with test Dandisets, we encourage developers to develop
+        against the <a href="http://gui-staging.dandiarchive.org" target="_blank">development server</a>. Note that the
+        development server should not be used to stage your data. All data are uploaded as draft and can be adjusted
+        before publishing on the production server. The development server is primarily used by users learning to use
+        DANDI or by developers.</small
+    > `;
+
 export async function uploadToDandi(info, type = "project" in info ? "project" : "") {
     const { dandiset_id } = info;
 
     const staging = isStaging(dandiset_id); // Automatically detect staging IDs
 
     const whichAPIKey = staging ? "staging_api_key" : "main_api_key";
-    const api_key = global.data.DANDI?.api_keys?.[whichAPIKey];
-
-    if (!api_key) {
-        await Swal.fire({
-            title: `Your DANDI API key (${whichAPIKey}) is not configured.`,
-            html: "Edit your settings to include this value.",
-            icon: "warning",
-            confirmButtonText: "Go to Settings",
+    let api_key = global.data.DANDI?.api_keys?.[whichAPIKey];
+
+    const errors = await validateDANDIApiKey(api_key, staging);
+
+    const isInvalid = !errors || errors.length;
+
+    if (isInvalid) {
+        const modal = new Modal({
+            header: `${api_key ? "Update" : "Provide"} your ${header(whichAPIKey)}`,
+            open: true,
         });
 
-        return this.to("settings");
+        const input = new JSONSchemaInput({
+            path: [whichAPIKey],
+            info: dandiGlobalSchema.properties.api_keys.properties[whichAPIKey],
+        });
+
+        input.style.padding = "25px";
+
+        modal.append(input);
+
+        let notification;
+
+        const notify = (message, type) => {
+            if (notification) this.dismiss(notification);
+            return (notification = this.notify(message, type));
+        };
+
+        modal.onClose = async () => notify("Your DANDI API key was not set", "error");
+
+        api_key = await new Promise((resolve) => {
+            const button = new Button({
+                label: "Save",
+                primary: true,
+                onClick: async () => {
+                    const value = input.value;
+                    if (value) {
+                        const errors = await validateDANDIApiKey(input.value, staging);
+                        if (!errors || !errors.length) {
+                            modal.remove();
+                            global.data.DANDI.api_keys[whichAPIKey] = value;
+                            global.save();
+                            resolve(value);
+                        } else {
+                            notify(errors[0].message, "error");
+                            return false;
+                        }
+                    } else {
+                        notify("Your DANDI API key was not set", "error");
+                    }
+                },
+            });
+
+            modal.footer = button;
+
+            document.body.append(modal);
+        });
     }
 
     const result = await run(
@@ -117,6 +183,12 @@ export class UploadsPage extends Page {
         });
 
         return html`
+            ${new InfoBox({
+                header: "How do I create a Dandiset?",
+                content: dandisetInfoContent,
+            })}
+            <br />
+            <br />
             ${this.form}
             <hr />
             ${button}

src/renderer/src/stories/preview/inspector/InspectorList.js

@@ -2,6 +2,8 @@ import { LitElement, css, html } from "lit";
 import { List } from "../../List";
 import { getMessageType, isErrorImportance } from "../../../validation";
 
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
 const sortList = (items) => {
     return items
         .sort((a, b) => {
@@ -140,7 +142,9 @@ export class InspectorListItem extends LitElement {
 
         return html`
             ${hasMetadata ? html`<span id="objectType">${hasObjectType ? `${this.object_type}` : ""} </span>` : ""}
-            ${hasMetadata ? html`<span id="message">${this.message}</span>` : html`<p>${this.message}</p>`}
+            ${hasMetadata
+                ? html`<span id="message">${unsafeHTML(this.message)}</span>`
+                : html`<p>${unsafeHTML(this.message)}</p>`}
             ${this.file_path
                 ? html`<span id="filepath"
                       >${this.files && this.files.length > 1

src/renderer/src/validation/dandi.ts

@@ -0,0 +1,19 @@
+
+const dandiAPITokenRegex = /^[a-f0-9]{40}$/;
+
+
+export const validateDANDIApiKey = async (apiKey: string, staging = false) => {
+    if (apiKey) {
+
+        if (!dandiAPITokenRegex.test(apiKey)) return [{ type: "error", message: `Invalid API key format. Must be a 40 character hexadecimal string` }];
+
+        const authFailedError = {type: 'error', message: `Authorization failed. Make sure you're providing an API key for the <a href='https://${staging ? 'gui-staging.' : ''}dandiarchive.org' target='_blank'>${staging ? 'staging' : 'main'} archive</a>.`}
+
+        return fetch(`https://api${staging ? '-staging' : ''}.dandiarchive.org/api/auth/token/`, {headers: {Authorization: `token ${apiKey}`}})
+        .then((res) => {
+            if (!res.ok) return [authFailedError]
+            return true
+        })
+        .catch(() => [authFailedError])
+    }
+}