Skip to content

Commit

Permalink
✨ feat: add modals for confirmation of PRs (#33)
Browse files Browse the repository at this point in the history
  • Loading branch information
@megasanjay
megasanjay authored Jul 12, 2024
1 parent f51749e commit c2d0914
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 128 deletions.
35 changes: 34 additions & 1 deletion ui/pages/add/code-metadata/[identifier].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`, {
Expand Down Expand Up @@ -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:",
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
283 changes: 157 additions & 126 deletions ui/pages/add/license/[identifier].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]),
});
Expand Down Expand Up @@ -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",
Expand All @@ -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>
2 changes: 1 addition & 1 deletion ui/pages/fairsoftware.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit c2d0914

Please sign in to comment.