fix: improve messaging and feedback for github connections

- give hint if no github releases are found for connected repo
- add repo connection success message with info about returning to the
  management page
- fix issue where deactivated remotes couldn't be re-activated for the
  same codebase
- link to/explain how to submit new models straight from github
- spell out more requirements for making new repos and disable
  continuing until "create a new blank repo" is clicked on

Author: sgfost

django/library/jinja2/library/github_overview.jinja

@@ -27,12 +27,9 @@
     {% if video.title %}
     <h5 class="mb-2 fw-bold">{{ video.title }}</h5>
     {% endif %}
-    <iframe src="https://www.youtube.com/embed/{{ video.youtube_id }}"
-        title="{{ video.title or '' }}"
-        style="display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;"
-        allow="picture-in-picture; web-share"
-        referrerpolicy="strict-origin-when-cross-origin"
-        allowfullscreen></iframe>
+    <iframe src="https://www.youtube.com/embed/{{ video.youtube_id }}" title="{{ video.title or '' }}"
+        style="display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;" allow="picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
     {% if video.caption and video.caption.raw %}
     <div class="text-muted small">{{ video.caption.rendered|safe }}</div>
     {% endif %}
@@ -54,7 +51,8 @@
                 </button>
             </h5>
         </div>
-        <div id="{{ entry_id }}" class="collapse" aria-labelledby="{{ heading_id }}" data-bs-parent="#{{ accordion_id }}">
+        <div id="{{ entry_id }}" class="collapse" aria-labelledby="{{ heading_id }}"
+            data-bs-parent="#{{ accordion_id }}">
             <div class="card-body">
                 {{ entry.answer.rendered|safe }}
             </div>
@@ -75,12 +73,14 @@
                 </p>
                 <p>
                     Get started by pressing
-                    <span class="text-secondary opacity-75">
+                    <small class="text-secondary opacity-75">
                         <i class="fas fa-cog"></i> Connect a repository
-                    </span>
-                    for one of your models listed below or on the <strong><i class="fab fa-github"></i> GitHub</strong>
-                    tab on a model's
-                    page. Once you have an active synced repository, it will be linked in the same tab and
+                    </small>
+                    for one of your models listed below or on the model's
+                    page. You can also import directly from an existing GitHub repository when submitting a new model by selecting
+                    <span class="badge bg-secondary opacity-50"><i class="fab fa-github"></i> Import model from GitHub</span>
+                    on the new model form.
+                    Once you have a connected repository, it will be linked on the model's page and
                     visible to others.
                 </p>
             </div>
@@ -98,8 +98,8 @@
                     <div class="card h-100">
                         <div class="card-body d-flex flex-column">
                             <h4 class="h6 mb-2">Import model code from GitHub</h4>
-                            <p class="text-muted small mb-0">Already use GitHub? You can import GitHub releases straight
-                                into the CoMSES Model Library.</p>
+                            <p class="text-muted small mb-0">Have an existing GitHub repository for your model? Connect
+                                it to import releases straight into the CoMSES Model Library.</p>
                             <div class="mt-auto">
                                 <a class="text-decoration-none" href="#import-existing">
                                     Read more <i class="fas fa-arrow-right small ms-1"></i>
@@ -112,8 +112,8 @@
                     <div class="card h-100">
                         <div class="card-body d-flex flex-column">
                             <h4 class="h6 mb-2">Set up a new GitHub repository</h4>
-                            <p class="text-muted small mb-0">New to GitHub? We'll build a git repository for your model
-                                and let you push it to your own GitHub account.</p>
+                            <p class="text-muted small mb-0">Don't have a repository yet? We'll build a git repository
+                                from your existing releases and let you push it to your own GitHub account.</p>
                             <div class="mt-auto">
                                 <a class="text-decoration-none" href="#connect-new">
                                     Read more <i class="fas fa-arrow-right small ms-1"></i>

django/library/models.py

@@ -1179,14 +1179,15 @@ def get_or_create_main_git_ref_sync_state(self, branch_name="main"):
 
     def create_remote(self, owner, repo_name, **kwargs):
         """create a new remote for this codebase, or get an existing one if there is a
-        matching remote that failed to actually be created at the remote location"""
+        matching remote that was previously deactivated"""
         existing_remote = CodebaseGitRemote.objects.filter(
             codebase=self,
             owner=owner,
             repo_name=repo_name,
-            url__isnull=True,  # proxy for a successful remote creation
         ).first()
         if existing_remote:
+            existing_remote.is_active = True
+            existing_remote.save(update_fields=["is_active", "last_modified"])
             return existing_remote
         remote = CodebaseGitRemote.objects.create(
             codebase=self,

django/library/views.py

@@ -646,7 +646,7 @@ def _forward_integrity_error(self, e: IntegrityError):
         if "single_active_remote" in msg:
             raise ValidationError("There can only be one active repository for a codebase at a time.")
         else:
-            raise ValidationError("A repository already exists at this location.")
+            raise ValidationError("This repository is already connected to another model.")
 
     def update(self, request, *args, **kwargs):
         try:

frontend/src/components/CodebaseEditForm.vue

@@ -48,6 +48,7 @@
       help="Add tags to categorize your model and make it more discoverable. Press enter after entering each tag."
     />
     <TextField
+      v-if="!fromGitHub"
       class="mb-3"
       name="repositoryUrl"
       label="Version Control Repository URL (reference only)"
@@ -56,16 +57,18 @@
     <FormAlert :validation-errors="Object.values(errors)" :server-errors="serverErrors" />
     <div v-if="!asModal" class="d-flex gap-2">
       <button type="submit" class="btn btn-primary" :disabled="isLoading" data-cy="next">
+        <i class="fas fa-upload"></i>
         {{ props.identifier ? "Update" : "Continue to upload model" }}
       </button>
       <button
         v-if="!props.identifier"
         type="submit"
-        class="btn btn-outline-gray"
+        class="btn btn-secondary"
         :disabled="isLoading"
         data-cy="go-github-config"
         @click="goToGithubConfig = true"
       >
+        <i class="fab fa-github"></i>
         Import model from GitHub
       </button>
     </div>
@@ -115,6 +118,8 @@ const { data, serverErrors, create, retrieve, update, isLoading, detailUrl } = u
 const { editUrl } = useReleaseEditorAPI();
 const goToGithubConfig = ref(false);
 
+const fromGitHub = new URLSearchParams(window.location.search).get("github") === "true";
+
 const {
   errors,
   handleSubmit,

frontend/src/components/GitHubIntegrationConfiguration.vue

@@ -32,6 +32,15 @@
       </div>
       <FormAlert :validation-errors="[]" :server-errors="serverErrors" />
     </div>
+    <div v-if="justConnectedRemote && activeRemote" class="alert alert-success" role="alert">
+      <i class="fas fa-check-circle me-2"></i>
+      <b>Successfully connected to {{ activeRemote.owner }}/{{ activeRemote.repoName }}</b>
+      <p class="mb-0 mt-2">
+        Manage this connection by importing releases from GitHub or pushing releases to GitHub
+        below. Return here in the future by pressing
+        <b><i class="fas fa-cog"></i> manage</b> in the GitHub panel on the model page.
+      </p>
+    </div>
     <div v-if="showReleaseManagement" class="border rounded p-3">
       <ReleaseManagementSection
         :codebase-identifier="codebaseIdentifier"
@@ -105,6 +114,7 @@ const activeRemote = ref<CodebaseGitRemote | null>(null);
 const activeRemoteLoading = ref(false);
 const repoName = ref(""); // input-only repo name
 const isValidating = ref(false);
+const justConnectedRemote = ref(false);
 // releases state is owned by ReleaseManagementSection
 
 const isGitHubConnected = computed(() => !!installationStatus.value.githubAccount);
@@ -201,6 +211,7 @@ const handleConnectRepo = async () => {
   await setupUserGithubRemote(repoName.value.trim(), selectedSyncType.value === "existing", {
     onSuccess: async () => {
       await refreshActiveRemote();
+      justConnectedRemote.value = true;
     },
   });
   isValidating.value = false;

frontend/src/components/GitHubIntegrationOverview.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="row">
-    <h4 class="fw-bold">Your submitted models</h4>
     <div class="col-md-8 col-12 order-2 order-md-1">
+      <div class="d-flex flex-row justify-content-between mb-2">
+        <h4 class="fw-bold">Your submitted models</h4>
+        <a href="/codebases/add/?github=true" class="btn btn-sm btn-secondary"
+          >Submit a new model</a
+        >
+      </div>
       <div class="card" style="height: 15rem">
         <div v-if="loadingCodebases" class="card-body text-center">
           <i class="fas fa-spinner fa-spin"></i> Loading...
@@ -17,8 +22,8 @@
           >
             <div class="w-100" style="max-width: 60%">
               <h6 class="mb-0 text-truncate">
-                <span v-if="!codebase.live" class="me-2 text-muted" title="Unpublished">
-                  <i class="fas fa-lock"></i>
+                <span v-if="!codebase.live" class="badge bg-gray me-1">
+                  <i class="fas fa-lock"></i> Private
                 </span>
                 <a :href="codebase.absoluteUrl" :title="codebase.title" class="fw-bold">
                   {{ codebase.title }}
@@ -47,6 +52,10 @@
       </div>
     </div>
     <div class="col-md-4 col-12 order-1 order-md-2">
+      <div class="d-flex flex-row justify-content-between mb-2 invisible">
+        <h4 class="fw-bold">&nbsp;</h4>
+        <span class="btn btn-sm">&nbsp;</span>
+      </div>
       <ConnectGitHubStep :installation-status="installationStatus" style="height: 15rem" />
     </div>
   </div>

frontend/src/components/ListSidebar.vue

@@ -30,7 +30,7 @@
       v-if="clearAllFilters"
       type="button"
       :class="{ disabled: isClearingFiltersLoading || isApplyingFiltersLoading }"
-      class="btn btn-secondary mt-2 w-100"
+      class="btn btn-outline-gray mt-2 w-100"
       v-on:click="isClearingFiltersLoading = true"
       @click="clearAllFilters"
     >

frontend/src/components/githubIntegration/ReleaseManagementSection.vue

@@ -60,6 +60,17 @@
                 <i class="fab fa-github"></i>
                 <span>GitHub releases</span>
               </div>
+              <div v-if="showNoGitHubReleasesMessage" class="text-muted small mt-2 fw-normal">
+                No releases found. You must
+                <a
+                  :href="`${activeRemote?.url}/releases`"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  create a release on GitHub <i class="fas fa-external-link-alt"></i
+                ></a>
+                in order to import to the model library.
+              </div>
             </th>
           </tr>
         </thead>
@@ -316,6 +327,13 @@ const hasUnpushedReleases = computed(() =>
   extractLocalReleases().some(r => Boolean(r.gitRefSyncState?.canPush))
 );
 
+const showNoGitHubReleasesMessage = computed(
+  () =>
+    props.activeRemote?.isPreexisting &&
+    extractGithubReleases().length === 0 &&
+    !githubLoading.value
+);
+
 const hasRunningPushJobs = computed(() => {
   const activeId = props.activeRemote?.id;
   if (!activeId) return false;

frontend/src/components/githubIntegration/SelectSyncTypeStep.vue

@@ -59,20 +59,30 @@
         <div class="alert alert-warning py-2 mb-3">
           <small>
             <i class="fas fa-exclamation-triangle me-2"></i>
-            <strong>Important:</strong> Do NOT initialize the repository with README, .gitignore, or
-            license files.
+            Name the repository anything you want, but make sure it is <b>public</b> and
+            <b>NOT initialized</b>
+            with anything like a README, .gitignore, or license files.
           </small>
         </div>
 
         <div class="row g-2">
           <div class="col-12 col-md-6">
-            <a :href="newRepositoryUrl" target="_blank" class="btn btn-secondary w-100">
+            <a
+              :href="newRepositoryUrl"
+              target="_blank"
+              class="btn btn-secondary w-100"
+              @click="hasClickedCreateRepo = true"
+            >
               <i class="fas fa-external-link-alt me-2"></i>
               Create New Repository
             </a>
           </div>
           <div class="col-12 col-md-6">
-            <button class="btn btn-primary w-100" @click="emit('choice', 'new')">
+            <button
+              class="btn btn-primary w-100"
+              :disabled="!hasClickedCreateRepo"
+              @click="emit('choice', 'new')"
+            >
               <i class="fas fa-arrow-right me-2"></i>
               Continue
             </button>
@@ -110,4 +120,5 @@ const emit = defineEmits<{
 
 const isCompleted = computed(() => props.selectedSyncType !== null);
 const isNewRepoPending = ref(false);
+const hasClickedCreateRepo = ref(false);
 </script>