feat: better github integration release management

now using a table that visually pairs releases on either side

* also added support for going straight to the github integration setup
  from codebase creation form, for people who would like to import their
  work from there

Author: sgfost

django/library/models.py

@@ -1402,14 +1402,20 @@ def import_media(self, fileobj, user=None, title=None, images_only=True):
             return image_metadata
 
     @transaction.atomic
-    def get_or_create_draft(self):
+    def get_or_create_draft(self, initial_version: str | None = None):
         existing_draft = self.releases.filter(
             status=CodebaseRelease.Status.DRAFT
         ).first()
         if existing_draft:
             return existing_draft
 
-        draft_release = self.create_release()
+        # allow for overriding the version number of the initial draft
+        # this is currently used to create a less conflict-prone 0.0.1 draft when 
+        # someone wants to import all their work with the github integration
+        if initial_version:
+            draft_release = self.create_release(version_number=initial_version)
+        else:
+            draft_release = self.create_release()
         # reset fields that should not be copied over to a new draft
         draft_release.doi = None
         draft_release.release_notes = ""

django/library/views.py

@@ -546,7 +546,8 @@ def get_queryset(self):
     def perform_create(self, serializer):
         super().perform_create(serializer)
         codebase = serializer.instance
-        return codebase.get_or_create_draft()
+        initial_version = self.request.query_params.get("initial_version")
+        return codebase.get_or_create_draft(initial_version=initial_version)
 
     def retrieve(self, request, *args, **kwargs):
         instance = self.get_object()
@@ -788,16 +789,16 @@ def submitter_installation_status(self, request, *args, **kwargs):
     @action(detail=False, methods=["post"])
     def setup_user_github_remote(self, request, *args, **kwargs):
         codebase = self.get_codebase()
-        if not codebase.live:
-            raise ValidationError("This model does not have any published releases")
-
         installation = codebase.submitter.github_integration_app_installation
         if not installation:
             raise ValidationError(
                 "Installation of the Github integration app is required"
             )
 
         is_preexisting = bool(request.data.get("is_preexisting", False))
+        if not codebase.live and not is_preexisting:
+            raise ValidationError("This model does not have any published releases")
+
         repo_name = request.data.get("repo_name")
         if not repo_name:
             raise ValidationError("Repository name is required")

frontend/src/components/CodebaseEditForm.vue

@@ -51,32 +51,39 @@
       class="mb-3"
       name="repositoryUrl"
       label="Version Control Repository URL (reference only)"
-      help="Link to your model's version control repository (GitHub, GitLab, BitBucket, etc.) for reference only that will not be used for synchronization."
+      help="Link to your model's version control repository (GitHub, GitLab, BitBucket, etc.). For reference only, you can connect a GitHub repository with the button below, or later on."
     />
     <FormAlert :validation-errors="Object.values(errors)" :server-errors="serverErrors" />
-    <button
-      v-if="!asModal"
-      type="submit"
-      class="btn btn-primary"
-      :disabled="isLoading"
-      data-cy="next"
-    >
-      {{ props.identifier ? "Update" : "Next" }}
-    </button>
+    <div v-if="!asModal" class="d-flex gap-2">
+      <button type="submit" class="btn btn-primary" :disabled="isLoading" data-cy="next">
+        {{ props.identifier ? "Update" : "Continue to upload model" }}
+      </button>
+      <button
+        v-if="!props.identifier"
+        type="submit"
+        class="btn btn-outline-gray"
+        :disabled="isLoading"
+        data-cy="go-github-config"
+        @click="goToGithubConfig = true"
+      >
+        Import model from GitHub
+      </button>
+    </div>
   </form>
 </template>
 
 <script setup lang="ts">
 import * as yup from "yup";
-import { onBeforeUnmount, onMounted } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import TextField from "@/components/form/TextField.vue";
 import TextareaField from "@/components/form/TextareaField.vue";
 import MarkdownField from "@/components/form/MarkdownField.vue";
 import TaggerField from "@/components/form/TaggerField.vue";
 import HoneypotField from "@/components/form/HoneypotField.vue";
 import FormAlert from "@/components/form/FormAlert.vue";
 import { useForm } from "@/composables/form";
-import { useCodebaseAPI, useReleaseEditorAPI } from "@/composables/api";
+import { RequestOptions, useCodebaseAPI, useReleaseEditorAPI } from "@/composables/api";
+import { useGitRemotesAPI } from "@/composables/api/git";
 
 const props = withDefaults(
   defineProps<{
@@ -106,6 +113,7 @@ type CodebaseEditFields = yup.InferType<typeof schema>;
 
 const { data, serverErrors, create, retrieve, update, isLoading, detailUrl } = useCodebaseAPI();
 const { editUrl } = useReleaseEditorAPI();
+const goToGithubConfig = ref(false);
 
 const {
   errors,
@@ -137,27 +145,40 @@ onBeforeUnmount(() => {
   removeUnsavedAlertListener();
 });
 
-function nextUrl(identifier: string) {
-  if (props.identifier) {
-    return detailUrl(props.identifier);
-  } else {
-    const versionNumber = values.latestVersionNumber || "1.0.0";
-    return editUrl(identifier, versionNumber);
-  }
+function githubConfigUrl(identifier: string) {
+  const { detailUrl: gitDetailUrl } = useGitRemotesAPI(identifier);
+  return gitDetailUrl("");
+}
+
+function redirectUrl(identifier: string, useGithubConfig: boolean) {
+  if (useGithubConfig) return githubConfigUrl(identifier);
+  if (props.identifier) return detailUrl(props.identifier);
+  const versionNumber = values.latestVersionNumber || "1.0.0";
+  return editUrl(identifier, versionNumber);
 }
 
 async function createOrUpdate() {
+  const useGithubConfig = goToGithubConfig.value && !props.identifier;
   const onSuccess = (response: any) => {
+    const destination = useGithubConfig;
     if (props.asModal) {
       emit("success");
     } else {
-      window.location.href = nextUrl(response.data.identifier);
+      window.location.href = redirectUrl(response.data.identifier, destination);
     }
   };
-  if (props.identifier) {
-    await update(props.identifier, values, { onSuccess });
-  } else {
-    await create(values, { onSuccess });
+  const requestOptions: RequestOptions = { onSuccess };
+  if (useGithubConfig) {
+    requestOptions.config = { params: { initial_version: "0.0.1" } };
+  }
+  try {
+    if (props.identifier) {
+      await update(props.identifier, values, requestOptions);
+    } else {
+      await create(values, requestOptions);
+    }
+  } finally {
+    goToGithubConfig.value = false;
   }
 }
 </script>

frontend/src/components/GitHubIntegrationConfiguration.vue

@@ -32,7 +32,7 @@
       </div>
       <FormAlert :validation-errors="[]" :server-errors="serverErrors" />
     </div>
-    <div v-if="showReleaseManagement">
+    <div v-if="showReleaseManagement" class="border rounded p-3">
       <ReleaseManagementSection
         :codebase-identifier="codebaseIdentifier"
         :active-remote="activeRemote"

frontend/src/components/githubIntegration/GitHubReleaseItem.vue

@@ -1,104 +1,26 @@
 <template>
-  <li
-    class="list-group-item"
-    :class="{
-      'opacity-50': release.createdByIntegration,
-    }"
-  >
-    <div class="d-flex align-items-center justify-content-between mb-2">
+  <li class="list-group-item border-0 p-2 rounded" :class="itemClass">
+    <div class="d-flex flex-column gap-1">
       <div class="d-flex align-items-center gap-2">
         <a :href="release.htmlUrl" target="_blank">
           <i class="fab fa-github"></i>
         </a>
         <h6 class="mb-0 fw-bold">{{ release.name || release.tagName }}</h6>
-        <span v-if="release.createdByIntegration" class="badge bg-secondary"
-          ><i class="fas fa-download"></i> Created by integration</span
-        >
+        <span class="badge bg-gray">
+          <i class="fas fa-tag"></i>
+          {{ release.tagName }}
+        </span>
       </div>
-      <div class="d-flex align-items-center gap-2">
-        <span v-if="release.importedSyncState?.status" class="badge" :class="statusBadgeClass">{{
-          statusLabel
-        }}</span>
-        <BootstrapTooltip
-          v-if="release.importedSyncState?.status === 'ERROR' && errorMessage"
-          :title="errorMessage"
-          icon-class="fas fa-exclamation-triangle text-danger"
-          placement="bottom"
-        />
-        <button
-          v-if="release.importedSyncState?.canReimport && release.importedSyncState?.status"
-          class="btn btn-link btn-sm"
-          :disabled="isImporting"
-          title="Retry import"
-          @click="handleImport"
-        >
-          <i v-if="!isImporting" class="fas fa-redo"></i>
-          <span
-            v-else
-            class="spinner-border spinner-border-sm"
-            role="status"
-            aria-hidden="true"
-          ></span>
-        </button>
-        <button
-          v-else-if="!release.createdByIntegration"
-          class="btn btn-primary btn-sm"
-          :disabled="isImporting"
-          @click="handleImport"
-        >
-          <span
-            v-if="isImporting"
-            class="spinner-border spinner-border-sm me-2"
-            role="status"
-            aria-hidden="true"
-          ></span>
-          <i v-else class="fas fa-download me-1"></i>
-          Import
-        </button>
+      <div class="text-muted small">
+        Released {{ (release.publishedAt || release.createdAt)?.split("T")[0] }}
       </div>
     </div>
-
-    <div class="d-flex align-items-center gap-2 text-muted small">
-      <span>Released {{ (release.publishedAt || release.createdAt)?.split("T")[0] }}</span>
-    </div>
-
-    <BootstrapModal id="versionModal" title="Specify Version" ref="versionModal" centered>
-      <template #body>
-        <p class="text-muted mb-3">
-          This release does not conform to semantic versioning. Please specify a version number.
-        </p>
-        <div class="mb-3">
-          <label for="custom-version" class="form-label">Version Number</label>
-          <input
-            id="custom-version"
-            type="text"
-            class="form-control"
-            placeholder="e.g., 1.0.0"
-            v-model="customVersion"
-          />
-        </div>
-      </template>
-      <template #footer>
-        <button type="button" class="btn btn-outline-gray" data-bs-dismiss="modal">Cancel</button>
-        <button
-          type="button"
-          class="btn btn-primary"
-          :disabled="!customVersion.trim()"
-          @click="handleVersionSubmit"
-        >
-          Pull Release
-        </button>
-      </template>
-    </BootstrapModal>
   </li>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { useGitRemotesAPI } from "@/composables/api/git";
+import { computed } from "vue";
 import type { GitHubRelease } from "@/types";
-import BootstrapModal from "@/components/BootstrapModal.vue";
-import BootstrapTooltip from "@/components/BootstrapTooltip.vue";
 
 export interface GitHubReleaseItemProps {
   release: GitHubRelease;
@@ -107,71 +29,6 @@ export interface GitHubReleaseItemProps {
 
 const props = defineProps<GitHubReleaseItemProps>();
 
-const emit = defineEmits<{
-  "import-started": [release: GitHubReleaseItemProps["release"]];
-}>();
-
-const isImporting = ref(false);
-const versionModal = ref();
-const customVersion = ref("");
-
-const { importGitHubRelease } = useGitRemotesAPI(props.codebaseIdentifier);
-
-const statusLabel = computed(() => {
-  const state = props.release.importedSyncState;
-  if (!state) return "";
-  switch (state.status) {
-    case "SUCCESS":
-      return "Success";
-    case "RUNNING":
-      return "In Progress";
-    case "ERROR":
-      return "Failed";
-    default:
-      return null;
-  }
-});
-
-const statusBadgeClass = computed(() => {
-  const state = props.release.importedSyncState;
-  if (!state) return null;
-  switch (state.status) {
-    case "SUCCESS":
-      return "bg-success";
-    case "RUNNING":
-      return "bg-warning";
-    case "ERROR":
-      return "bg-danger";
-    default:
-      return null;
-  }
-});
-
-const errorMessage = computed(() => props.release.importedSyncState?.errorMessage || "");
-
-const handleImport = async () => {
-  if (!props.release.hasSemanticVersioning) {
-    customVersion.value = "";
-    versionModal.value?.show();
-    return;
-  }
-  await importRelease();
-};
-
-async function importRelease(version?: string) {
-  isImporting.value = true;
-  try {
-    await importGitHubRelease(props.release.id, version);
-    emit("import-started", props.release);
-  } finally {
-    isImporting.value = false;
-  }
-}
-
-async function handleVersionSubmit() {
-  if (!customVersion.value.trim()) return;
-  await importRelease(customVersion.value);
-  versionModal.value?.hide();
-  customVersion.value = "";
-}
+const isOriginal = computed(() => !props.release.createdByIntegration);
+const itemClass = computed(() => (isOriginal.value ? "bg-blue-gray" : "border"));
 </script>