From c2d0914f14b4357e995cd3239c05a12030c0c0d0 Mon Sep 17 00:00:00 2001
From: Sanjay Soundarajan <sanjay.16@live.com>
Date: Fri, 12 Jul 2024 15:56:23 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20modals=20for=20confir?=
 =?UTF-8?q?mation=20of=20PRs=20(#33)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/pages/add/code-metadata/[identifier].vue |  35 ++-
 ui/pages/add/license/[identifier].vue       | 283 +++++++++++---------
 ui/pages/fairsoftware.vue                   |   2 +-
 3 files changed, 192 insertions(+), 128 deletions(-)

diff --git a/ui/pages/add/code-metadata/[identifier].vue b/ui/pages/add/code-metadata/[identifier].vue
index 4178dee6..a9e9055a 100644
--- a/ui/pages/add/code-metadata/[identifier].vue
+++ b/ui/pages/add/code-metadata/[identifier].vue
@@ -129,6 +129,9 @@ const rules = ref<FormRules>({
 
 const submitLoading = ref(false);
 
+const showSuccessModal = ref(false);
+const pullRequestURL = ref<string>("");
+
 const { identifier } = route.params as { identifier: string };
 
 const { data, error } = await useFetch(`/api/codeMetadata/${identifier}`, {
@@ -254,7 +257,8 @@ const pushToRepository = (e: MouseEvent) => {
                   message: "Review the changes in the repository",
                 });
 
-                window.open(response.prUrl, "_blank");
+                showSuccessModal.value = true;
+                pullRequestURL.value = response.prUrl;
               } else {
                 console.error(
                   "Failed to push code metadata to repository:",
@@ -305,6 +309,11 @@ const handleApplicationCategoryChange = (value: string) => {
 const handleDevelopmentStatusChange = (value: string) => {
   formValue.value.developmentStatus = value;
 };
+
+const navigateToPR = () => {
+  showSuccessModal.value = false;
+  window.open(pullRequestURL.value, "_blank");
+};
 </script>
 
 <template>
@@ -1183,5 +1192,29 @@ const handleDevelopmentStatusChange = (value: string) => {
         </n-flex>
       </n-form>
     </div>
+
+    <n-modal v-model:show="showSuccessModal" transform-origin="center">
+      <n-card
+        style="width: 600px"
+        title="One more thing!"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        A pull request to update the code metadata files has been submitted.
+        Please approve the pull request to make the changes live.
+        <template #footer>
+          <n-flex justify="end">
+            <n-button type="success" @click="navigateToPR">
+              <template #icon>
+                <Icon name="icon-park-outline:success" />
+              </template>
+              View Pull Request
+            </n-button>
+          </n-flex>
+        </template>
+      </n-card>
+    </n-modal>
   </main>
 </template>
diff --git a/ui/pages/add/license/[identifier].vue b/ui/pages/add/license/[identifier].vue
index ca1e801a..9c4a83e4 100644
--- a/ui/pages/add/license/[identifier].vue
+++ b/ui/pages/add/license/[identifier].vue
@@ -43,6 +43,9 @@ const displayLicenseEditor = ref(false);
 const getLicenseLoading = ref(false);
 const submitLoading = ref(false);
 
+const showSuccessModal = ref(false);
+const pullRequestURL = ref<string>("");
+
 const { data, error } = await useFetch(`/api/license/${identifier}`, {
   headers: useRequestHeaders(["cookie"]),
 });
@@ -163,7 +166,8 @@ const saveLicenseAndPush = async () => {
           message: "Review the changes in the repository",
         });
 
-        window.open(response.prUrl, "_blank");
+        showSuccessModal.value = true;
+        pullRequestURL.value = response.prUrl;
       } else {
         push.error({
           title: "Failed to push license to repository",
@@ -182,138 +186,165 @@ const saveLicenseAndPush = async () => {
       submitLoading.value = false;
     });
 };
+
+const navigateToPR = () => {
+  showSuccessModal.value = false;
+  window.open(pullRequestURL.value, "_blank");
+};
 </script>
 
 <template>
-  <main class="mx-auto max-w-screen-xl">
-    <div class="bg-white p-8">
-      <n-flex vertical size="large" class="pb-5">
-        <div class="flex flex-row justify-between">
-          <h1 class="text-2xl font-bold">
-            Edit LICENSE for
-            <NuxtLink
-              :to="`https://github.com/${githubRepo}`"
-              target="_blank"
-              class="text-blue-500 underline transition-all hover:text-blue-600"
-            >
-              {{ data?.repo }}
-            </NuxtLink>
-          </h1>
-
+  <main class="mx-auto max-w-screen-xl bg-white p-8">
+    <n-flex vertical size="large" class="pb-5">
+      <div class="flex flex-row justify-between">
+        <h1 class="text-2xl font-bold">
+          Edit LICENSE for
           <NuxtLink
-            to="https://docs.codefair.io/docs/license.html"
+            :to="`https://github.com/${githubRepo}`"
             target="_blank"
-            class="text-blue-400 underline transition-all hover:text-blue-500"
-            >Need help?</NuxtLink
+            class="text-blue-500 underline transition-all hover:text-blue-600"
           >
-        </div>
-
-        <div class="border-b border-dashed py-2">
-          <p class="text-base">
-            You can select a license from the list below and edit further. Once
-            you are done, you can save the draft or push the license to the
-            repository. If you need help with with deciding which one to pick,
-            you can check out
-            <NuxtLink
-              to="https://choosealicense.com"
-              target="_blank"
-              class="text-blue-500 underline transition-all hover:text-blue-600"
-              >https://choosealicense.com</NuxtLink
-            >. To make your software reusable a license file is expected at the
-            root level of your repository, as recommended in the
-            <NuxtLink
-              to="https://fair-biors.org/docs/guidelines"
-              target="_blank"
-              class="text-sm text-blue-400 underline transition-all hover:text-blue-500"
-            >
-              FAIR-BioRS Guidelines</NuxtLink
-            >. It is important to choose your license early since it will affect
-            your software's dependencies.
-          </p>
-        </div>
-
-        <n-form-item
-          class="mb-3 mt-5 font-bold"
-          :show-feedback="false"
-          size="large"
-        >
-          <template #label>
-            <p class="pb-1 text-base font-bold">Select a license</p>
-          </template>
-          <n-select
-            v-model:value="licenseId"
-            placeholder="MIT License Modern Variant"
-            clearable
-            size="large"
-            filterable
-            @update:value="updateLicenseContent"
-            :options="licenseOptions"
-          />
-        </n-form-item>
-
-        <TransitionFade>
-          <div v-if="displayLicenseEditor">
-            <n-form-item :show-feedback="false" size="large">
-              <template #label>
-                <p class="pb-1 text-base font-bold">
-                  Edit your license if required
-                  <span class="text-right text-xs text-stone-500">
-                    (You can use the left panel to edit the content and right
-                    panel to preview the changes)
-                  </span>
-                </p>
-              </template>
-              <MdEditor
-                v-model="licenseContent"
-                language="en-US"
-                :toolbars-exclude="[
-                  'preview',
-                  'fullscreen',
-                  'save',
-                  'pageFullscreen',
-                  'github',
-                  'catalog',
-                ]"
-                preview-theme="github"
-                :show-code-row-number="true"
-                :sanitize="sanitize"
-              />
-            </n-form-item>
-          </div>
-        </TransitionFade>
-      </n-flex>
-
-      <n-divider />
-
-      <n-flex class="my-4" justify="space-between">
-        <n-button
-          size="large"
-          color="black"
-          @click="saveLicenseDraft"
-          :loading="submitLoading"
-          :disabled="!licenseId || !licenseContent"
+            {{ data?.repo }}
+          </NuxtLink>
+        </h1>
+
+        <NuxtLink
+          to="https://docs.codefair.io/docs/license.html"
+          target="_blank"
+          class="text-blue-400 underline transition-all hover:text-blue-500"
+          >Need help?</NuxtLink
         >
-          <template #icon>
-            <Icon name="material-symbols:save" />
-          </template>
-
-          Save draft
-        </n-button>
-
-        <n-button
+      </div>
+
+      <div class="border-b border-dashed py-2">
+        <p class="text-base">
+          You can select a license from the list below and edit further. Once
+          you are done, you can save the draft or push the license to the
+          repository. If you need help with with deciding which one to pick, you
+          can check out
+          <NuxtLink
+            to="https://choosealicense.com"
+            target="_blank"
+            class="text-blue-500 underline transition-all hover:text-blue-600"
+            >https://choosealicense.com</NuxtLink
+          >. To make your software reusable a license file is expected at the
+          root level of your repository, as recommended in the
+          <NuxtLink
+            to="https://fair-biors.org/docs/guidelines"
+            target="_blank"
+            class="text-sm text-blue-400 underline transition-all hover:text-blue-500"
+          >
+            FAIR-BioRS Guidelines</NuxtLink
+          >. It is important to choose your license early since it will affect
+          your software's dependencies.
+        </p>
+      </div>
+
+      <n-form-item
+        class="mb-3 mt-5 font-bold"
+        :show-feedback="false"
+        size="large"
+      >
+        <template #label>
+          <p class="pb-1 text-base font-bold">Select a license</p>
+        </template>
+        <n-select
+          v-model:value="licenseId"
+          placeholder="MIT License Modern Variant"
+          clearable
           size="large"
-          color="black"
-          x
-          @click="saveLicenseAndPush"
-          :disabled="!licenseId || !licenseContent"
-          :loading="submitLoading"
-        >
-          <template #icon>
-            <Icon name="ion:push" />
-          </template>
-          Save and push license to repository
-        </n-button>
-      </n-flex>
-    </div>
+          filterable
+          @update:value="updateLicenseContent"
+          :options="licenseOptions"
+        />
+      </n-form-item>
+
+      <TransitionFade>
+        <div v-if="displayLicenseEditor">
+          <n-form-item :show-feedback="false" size="large">
+            <template #label>
+              <p class="pb-1 text-base font-bold">
+                Edit your license if required
+                <span class="text-right text-xs text-stone-500">
+                  (You can use the left panel to edit the content and right
+                  panel to preview the changes)
+                </span>
+              </p>
+            </template>
+            <MdEditor
+              v-model="licenseContent"
+              language="en-US"
+              :toolbars-exclude="[
+                'preview',
+                'fullscreen',
+                'save',
+                'pageFullscreen',
+                'github',
+                'catalog',
+              ]"
+              preview-theme="github"
+              :show-code-row-number="true"
+              :sanitize="sanitize"
+            />
+          </n-form-item>
+        </div>
+      </TransitionFade>
+    </n-flex>
+
+    <n-divider />
+
+    <n-flex class="my-4" justify="space-between">
+      <n-button
+        size="large"
+        color="black"
+        @click="saveLicenseDraft"
+        :loading="submitLoading"
+        :disabled="!licenseId || !licenseContent"
+      >
+        <template #icon>
+          <Icon name="material-symbols:save" />
+        </template>
+
+        Save draft
+      </n-button>
+
+      <n-button
+        size="large"
+        color="black"
+        x
+        @click="saveLicenseAndPush"
+        :disabled="!licenseId || !licenseContent"
+        :loading="submitLoading"
+      >
+        <template #icon>
+          <Icon name="ion:push" />
+        </template>
+        Save and push license to repository
+      </n-button>
+    </n-flex>
+
+    <n-modal v-model:show="showSuccessModal" transform-origin="center">
+      <n-card
+        style="width: 600px"
+        title="One more thing!"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        A pull request to update the license file has been submitted. Please
+        approve the pull request to make the changes live.
+        <template #footer>
+          <n-flex justify="end">
+            <n-button type="success" @click="navigateToPR">
+              <template #icon>
+                <Icon name="icon-park-outline:success" />
+              </template>
+              View Pull Request
+            </n-button>
+          </n-flex>
+        </template>
+      </n-card>
+    </n-modal>
   </main>
 </template>
diff --git a/ui/pages/fairsoftware.vue b/ui/pages/fairsoftware.vue
index 7d99a580..7808a51c 100644
--- a/ui/pages/fairsoftware.vue
+++ b/ui/pages/fairsoftware.vue
@@ -26,7 +26,7 @@
           <p class="font-onest text-lg text-slate-800">
             The commonly accepted definition of research software is “Any
             software created during the research process or for a research
-            purpose”. It can come in many format and could be developed for
+            purpose”. It can come in many formats and could be developed for
             different applications such as artificial intelligence (AI)/machine
             learning (ML) models with Python, data visualization tools with
             Jupyter notebook, or data analysis code with R.