chore: add playground alert

undb-io · Dec 9, 2024 · ce1c141 · ce1c141
1 parent f996759
commit ce1c141
Show file tree

Hide file tree

Showing 15 changed files with 133 additions and 16 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte b/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte
@@ -184,11 +184,11 @@
       <AlertDialog.Header>
         <AlertDialog.Title>{$LL.table.record.confirmDuplicateRecords({ n: ids.length })}</AlertDialog.Title>
         <AlertDialog.Description>
-          {$LL.table.record.confirmDuplicateRecordsDescription({ n: ids.length })}
+          {$LL.table.record.confirmDuplicateRecordsDescription({ table: $table.name.value, n: ids.length })}
         </AlertDialog.Description>
       </AlertDialog.Header>
       <AlertDialog.Footer>
-        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+        <AlertDialog.Cancel>{$LL.common.cancel()}</AlertDialog.Cancel>
         <AlertDialog.Action disabled={$duplicateRecordsMutation.isPending} on:click={duplicateRecords}>
           {#if $duplicateRecordsMutation.isPending}
             <LoaderCircleIcon class="mr-2 h-5 w-5 animate-spin" />

diff --git a/apps/frontend/src/lib/components/blocks/playground/playground-alert.svelte b/apps/frontend/src/lib/components/blocks/playground/playground-alert.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { LL } from "@undb/i18n/client"
+  import { preferences } from "$lib/store/persisted.store"
+</script>
+
+{#if !$preferences.playgroundModeDismissed}
+  <div
+    id="banner"
+    tabindex="-1"
+    class="z-50 flex w-full items-start justify-between gap-8 border border-b border-gray-200 bg-gray-50 px-4 py-2 sm:items-center lg:py-3 dark:border-gray-700 dark:bg-gray-800"
+  >
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+      {$LL.playground.playgroundModeDescription()}
+    </p>
+    <button
+      data-collapse-toggle="banner"
+      type="button"
+      class="flex items-center rounded-lg p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+      on:click={() => {
+        $preferences.playgroundModeDismissed = true
+      }}
+    >
+      <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        ></path></svg
+      >
+    </button>
+  </div>
+{/if}
diff --git a/apps/frontend/src/lib/components/blocks/playground/playground-menubar.svelte b/apps/frontend/src/lib/components/blocks/playground/playground-menubar.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import * as Menubar from "$lib/components/ui/menubar"
+  import { IMPORT_TEMPLATE_MODAL, openModal } from "$lib/store/modal.store"
+</script>
+
+<Menubar.Root>
+  <Menubar.Menu>
+    <Menubar.Trigger>Data</Menubar.Trigger>
+    <Menubar.Content>
+      <Menubar.Item
+        class="text-sm"
+        on:click={() => {
+          openModal(IMPORT_TEMPLATE_MODAL)
+        }}
+      >
+        Import From Template
+      </Menubar.Item>
+      <Menubar.Separator />
+      <Menubar.Item>Share</Menubar.Item>
+    </Menubar.Content>
+  </Menubar.Menu>
+</Menubar.Root>
diff --git a/apps/frontend/src/lib/components/blocks/playground/playground.svelte b/apps/frontend/src/lib/components/blocks/playground/playground.svelte
@@ -16,12 +16,4 @@
       {$LL.base.importFromTemplate()}
     </Button>
   </div>
-</main>
-
-{#await import("$lib/components/blocks/create-base/create-base-dialog.svelte") then { default: CreateBaseDialog }}
-  <CreateBaseDialog baseNames={[]} />
-{/await}
-
-{#await import("$lib/components/blocks/template/template-list-sheet.svelte") then { default: TemplateListSheet }}
-  <TemplateListSheet />
-{/await}
+</main>
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
@@ -83,7 +83,7 @@
         <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
       {#if value}
-        <a href={`/t/${value}`} class="text-muted-foreground">
+        <a href={isPlayground ? `/playground/bases/${$table.baseId}/t/${value}` : `/t/${value}`} class="text-muted-foreground">
           <ExternalLinkIcon class="mr-2 h-3 w-3" />
         </a>
       {/if}

diff --git a/apps/frontend/src/lib/store/persisted.store.ts b/apps/frontend/src/lib/store/persisted.store.ts
@@ -7,6 +7,7 @@ export const preferences = persisted("undb_preferences", {
   gridViewPerPage: 50,
   panelLeftWidth: 20,
   panelLeftCollapsed: false,
+  playgroundModeDismissed: false,
 })
 
 interface LastViewed {

diff --git a/apps/frontend/src/routes/playground/+layout.svelte b/apps/frontend/src/routes/playground/+layout.svelte
@@ -1,9 +1,21 @@
 <script lang="ts">
   import { setIsLocal } from "$lib/store/data-service.store"
   import { setIsPlayground } from "$lib/store/playground.svelte"
+  import PlaygroundAlert from "$lib/components/blocks/playground/playground-alert.svelte"
 
   setIsLocal(true)
   setIsPlayground(true)
 </script>
 
-<slot />
+<main class="flex h-screen flex-col">
+  <PlaygroundAlert />
+  <slot />
+</main>
+
+{#await import("$lib/components/blocks/create-base/create-base-dialog.svelte") then { default: CreateBaseDialog }}
+  <CreateBaseDialog baseNames={[]} />
+{/await}
+
+{#await import("$lib/components/blocks/template/template-list-sheet.svelte") then { default: TemplateListSheet }}
+  <TemplateListSheet />
+{/await}
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/+layout.svelte b/apps/frontend/src/routes/playground/bases/[baseId]/+layout.svelte
@@ -20,6 +20,7 @@
   import { LL } from "@undb/i18n/client"
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js"
   import { DELETE_VIEW, DUPLICATE_VIEW, SET_DEFAULT_VIEW, toggleModal, UPDATE_VIEW } from "$lib/store/modal.store"
+  import PlaygroundMenubar from "$lib/components/blocks/playground/playground-menubar.svelte"
 
   export let data: PageData
 
@@ -49,8 +50,9 @@
   let open = {} as Record<string, boolean>
 </script>
 
-<main class="flex">
-  <Resizable.PaneGroup direction="horizontal">
+<main class="flex flex-col">
+  <PlaygroundMenubar />
+  <Resizable.PaneGroup class="flex-1" direction="horizontal">
     <Resizable.Pane
       bind:pane={panelLeft}
       collapsible
@@ -59,7 +61,7 @@
       minSize={15}
       maxSize={30}
     >
-      <nav class="flex h-full flex-col">
+      <nav class="flex h-full flex-col p-2">
         <Collapsible.Root open={true}>
           <Collapsible.Content class="space-y-1 pt-1">
             {#each dashboards as dashboard}

diff --git a/packages/i18n/src/i18n/en/index.ts b/packages/i18n/src/i18n/en/index.ts
@@ -668,7 +668,13 @@ const webhook = {
     enterYourWorkEmail: 'Enter your work email...',
   }
 
+  const playground = {
+    playgroundMode: 'Playground Mode',
+    playgroundModeDescription: 'You are in playground mode, all changes will be lost after you close or refresh the page.'
+  }
+
 const en = {
+  playground,
   auth,
   template,
   setting,

diff --git a/packages/i18n/src/i18n/es/index.ts b/packages/i18n/src/i18n/es/index.ts
@@ -661,7 +661,13 @@ const auth = {
   enterYourWorkEmail: 'Introduce tu correo electrónico de trabajo...',
 }
 
+const playground = {
+  playgroundMode: 'Modo de prueba',
+  playgroundModeDescription: 'Estás en modo de prueba, todos los cambios se perderán después de cerrar o refrescar la página.'
+}
+
 const es = {
+  playground,
   auth,
   template,
   roles,

diff --git a/packages/i18n/src/i18n/i18n-types.ts b/packages/i18n/src/i18n/i18n-types.ts
@@ -18,6 +18,16 @@ export type Translation = RootTranslation
 export type Translations = RootTranslation
 
 type RootTranslation = {
+	playground: {
+		/**
+		 * Playground Mode
+		 */
+		playgroundMode: string
+		/**
+		 * You are in playground mode, all changes will be lost after you close or refresh the page.
+		 */
+		playgroundModeDescription: string
+	}
 	auth: {
 		/**
 		 * Login
@@ -2469,6 +2479,16 @@ type RootTranslation = {
 }
 
 export type TranslationFunctions = {
+	playground: {
+		/**
+		 * Playground Mode
+		 */
+		playgroundMode: () => LocalizedString
+		/**
+		 * You are in playground mode, all changes will be lost after you close or refresh the page.
+		 */
+		playgroundModeDescription: () => LocalizedString
+	}
 	auth: {
 		/**
 		 * Login

diff --git a/packages/i18n/src/i18n/ja/index.ts b/packages/i18n/src/i18n/ja/index.ts
@@ -667,7 +667,13 @@ const auth = {
   enterYourWorkEmail: '作業用メールアドレスを入力してください...',
 }
 
+const playground = {
+  playgroundMode: 'プレイグラウンドモード',
+  playgroundModeDescription: 'プレイグラウンドモードです。ページを閉じるかリフレッシュするとすべての変更が失われます。'
+}
+
 const ja = {
+  playground,
 	auth,
   template,
   roles,

diff --git a/packages/i18n/src/i18n/ko/index.ts b/packages/i18n/src/i18n/ko/index.ts
@@ -667,7 +667,13 @@ const auth = {
   enterYourWorkEmail: '작업 이메일을 입력하세요...',
 }
 
+const playground = {
+  playgroundMode: '플레이그라운드 모드',
+  playgroundModeDescription: '플레이그라운드 모드입니다. 페이지를 닫거나 새로고침하면 모든 변경 사항이 손실됩니다.'
+}
+
 const ko = {
+  playground,
 	auth,
   template,
   roles,

diff --git a/packages/i18n/src/i18n/pt/index.ts b/packages/i18n/src/i18n/pt/index.ts
@@ -666,7 +666,13 @@ const auth = {
   enterYourWorkEmail: 'Digite seu email de trabalho...',
 }
 
+const playground = {
+  playgroundMode: 'Modo de teste',
+  playgroundModeDescription: 'Você está no modo de teste, todos os seus dados serão perdidos após você fechar ou atualizar a página.'
+}
+
 const pt = {
+  playground,
   auth,
   template,
   setting,

diff --git a/packages/i18n/src/i18n/zh/index.ts b/packages/i18n/src/i18n/zh/index.ts
@@ -669,7 +669,13 @@ const auth = {
   enterYourWorkEmail: '输入您的工作电子邮件...',
 }
 
+const playground = {
+  playgroundMode: '沙盒模式',
+  playgroundModeDescription: '您处于沙盒模式，所有更改将在您关闭或刷新页面后丢失。'
+}
+
 const zh = {
+  playground,
   auth,
   template,
   roles,