From ab86ed206fbd15be018d6fc14992f039ce0bc3fc Mon Sep 17 00:00:00 2001
From: Adam Jacob <adam@systeminit.com>
Date: Wed, 24 Jul 2024 11:18:22 -0700
Subject: [PATCH] feat(app): add tutorial link and fix popovers for docs and
 discord

This PR adds a short sentence and a hyperlink to watch the tutorial on
the docs site, fixes a bug with having the modal reappear properly, and
removes "SI" from the Documentation and Discord pop-overs.

Signed-off-by: Adam Jacob <adam@systeminit.com>
---
 .../components/layout/navbar/NavbarPanelRight.vue   |  4 ++--
 app/web/src/pages/WorkspaceSinglePage.vue           | 13 +++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/web/src/components/layout/navbar/NavbarPanelRight.vue b/app/web/src/components/layout/navbar/NavbarPanelRight.vue
index daed43ab58..edeb02d54a 100644
--- a/app/web/src/components/layout/navbar/NavbarPanelRight.vue
+++ b/app/web/src/components/layout/navbar/NavbarPanelRight.vue
@@ -3,14 +3,14 @@
     <Collaborators />
 
     <NavbarButton
-      tooltipText="SI Documentation"
+      tooltipText="Documentation"
       externalLinkTo="https://docs.systeminit.com/"
     >
       <Icon name="question-circle" />
     </NavbarButton>
 
     <NavbarButton
-      tooltipText="SI Discord Community"
+      tooltipText="Discord Community"
       externalLinkTo="https://discord.gg/system-init"
     >
       <Icon name="logo-discord" />
diff --git a/app/web/src/pages/WorkspaceSinglePage.vue b/app/web/src/pages/WorkspaceSinglePage.vue
index 4cdcb3aa86..7d590bbae2 100644
--- a/app/web/src/pages/WorkspaceSinglePage.vue
+++ b/app/web/src/pages/WorkspaceSinglePage.vue
@@ -87,12 +87,21 @@
           referrerpolicy="strict-origin-when-cross-origin"
           allowfullscreen
         ></iframe>
+        <div class="flex flex-row justify-center pt-5 pb-5">
+          <a
+            href="https://docs.systeminit.com/tutorials/getting-started"
+            target="_blank"
+            class="underline hover:text-blue-50"
+          >
+            Follow along with the tutorial on the documentation site
+          </a>
+        </div>
         <div class="flex flex-row gap-sm mt-xs">
           <VormInput
             v-model="firstTimeModalCheckbox"
             class="flex flex-row-reverse gap-0 italic"
             type="checkbox"
-            label="Don't show me this video again."
+            label="Don't show me this again."
             inlineLabel
           />
           <VButton
@@ -159,7 +168,6 @@ onMounted(async () => {
     if (!firstTimeModalFired.value && showModal && !hasServedModal) {
       firstTimeModalRef.value?.open();
       firstTimeModalFired.value = true;
-      storage.setItem("SI_FIRST_TIME_MODAL_SHOWN", "1");
     }
   }
 });
@@ -168,6 +176,7 @@ const firstTimeModalCheckbox = ref(false);
 const closeFirstTimeModal = () => {
   if (authStore.user && firstTimeModalCheckbox.value) {
     authStore.DISMISS_FIRST_TIME_MODAL(authStore.user.pk);
+    storage.setItem("SI_FIRST_TIME_MODAL_SHOWN", "1");
   }
   firstTimeModalRef.value?.close();
 };