@plutocms/supabase 0.30.0 → 0.31.0

package/app/pages/admin/users.vue

@@ -266,183 +266,185 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
 </script>
 
 <template>
-  <main>
-    <AdminView>
-      <!-- The section (the Users item of the menu) and its tabs, like Settings. -->
-      <h1 class="text-3xl font-bold lg:text-4xl">
-        {{ t('supabase.access.users.title') }}
-      </h1>
-
-      <PlutoAdminNavTabs />
-
-      <div class="flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <h2 class="text-xl font-semibold">
-            {{ t('supabase.access.users.title') }}
-          </h2>
-          <p class="text-muted text-sm">
-            {{ t('supabase.access.users.description') }}
-          </p>
-        </div>
-
-        <UButton v-if="isAdmin" icon="lucide:user-plus" @click="openInvite">
-          {{ t('supabase.access.users.invite') }}
-        </UButton>
-      </div>
-
-      <UAlert
-        v-if="!allowed"
-        :title="t('pluto.settings.noPermission.title')"
-        :description="
-          t('pluto.settings.noPermission.description', {
-            page: t('supabase.access.users.title'),
-          })
-        "
-        icon="lucide:lock"
-        color="warning"
-      />
-
-      <!-- Loading -->
-      <div
-        v-else-if="status === 'loading'"
-        class="flex flex-col gap-y-3"
-        aria-busy="true"
-      >
-        <USkeleton v-for="row in 4" :key="row" class="h-12 w-full" />
-      </div>
-
-      <!-- Error -->
-      <UAlert
-        v-else-if="status === 'error'"
-        :title="t('supabase.access.users.error.title')"
-        :description="loadError"
-        :actions="[
-          {
-            label: t('pluto.common.tryAgain'),
-            color: 'neutral',
-            variant: 'outline',
-            onClick: load,
-          },
-        ]"
-        color="error"
-        variant="subtle"
-        icon="lucide:circle-x"
-      />
-
-      <!-- Empty -->
-      <UEmpty
-        v-else-if="users.length === 0"
-        :title="t('supabase.access.users.empty.title')"
-        :description="t('supabase.access.users.empty.description')"
-        :actions="
-          isAdmin
-            ? [
-                {
-                  label: t('supabase.access.users.invite'),
-                  icon: 'lucide:user-plus',
-                  onClick: openInvite,
-                },
-              ]
-            : []
-        "
+  <PlutoViewAdminPanel>
+    <!-- The section (the Users item of the menu) and its tabs, like Settings. -->
+    <template #toolbar>
+      <PlutoViewToolbar
+        :title="t('supabase.access.users.title')"
         icon="lucide:users"
-      />
-
-      <!-- The list -->
-      <UTable
-        v-else
-        :data="users"
-        :columns="columns"
-        class="border-default rounded-lg border"
       >
-        <template #user-cell="{ row }">
-          <div class="flex min-w-0 flex-col">
-            <span class="flex items-center gap-2">
-              <span class="text-highlighted truncate font-medium">{{
-                userDisplayName(row.original)
-              }}</span>
-              <UBadge
-                v-if="row.original.id === selfId"
-                :label="t('supabase.access.users.you')"
-                color="primary"
-                variant="subtle"
-                size="sm"
-              />
-            </span>
-            <span
-              v-if="row.original.email"
-              class="text-muted truncate text-sm"
-              >{{ row.original.email }}</span
-            >
-          </div>
+        <template #right>
+          <UButton v-if="isAdmin" icon="lucide:user-plus" @click="openInvite">
+            {{ t('supabase.access.users.invite') }}
+          </UButton>
         </template>
+      </PlutoViewToolbar>
 
-        <template #roles-cell="{ row }">
-          <div class="flex flex-wrap gap-1">
+      <PlutoAdminNavTabs />
+    </template>
+
+    <p class="text-muted text-sm">
+      {{ t('supabase.access.users.description') }}
+    </p>
+
+    <UAlert
+      v-if="!allowed"
+      :title="t('pluto.settings.noPermission.title')"
+      :description="
+        t('pluto.settings.noPermission.description', {
+          page: t('supabase.access.users.title'),
+        })
+      "
+      icon="lucide:lock"
+      color="warning"
+    />
+
+    <!-- Loading -->
+    <div
+      v-else-if="status === 'loading'"
+      class="flex flex-col gap-y-3"
+      aria-busy="true"
+    >
+      <USkeleton v-for="row in 4" :key="row" class="h-12 w-full" />
+    </div>
+
+    <!-- Error -->
+    <UAlert
+      v-else-if="status === 'error'"
+      :title="t('supabase.access.users.error.title')"
+      :description="loadError"
+      :actions="[
+        {
+          label: t('pluto.common.tryAgain'),
+          color: 'neutral',
+          variant: 'outline',
+          onClick: load,
+        },
+      ]"
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-x"
+    />
+
+    <!-- Empty -->
+    <UEmpty
+      v-else-if="users.length === 0"
+      :title="t('supabase.access.users.empty.title')"
+      :description="t('supabase.access.users.empty.description')"
+      :actions="
+        isAdmin
+          ? [
+              {
+                label: t('supabase.access.users.invite'),
+                icon: 'lucide:user-plus',
+                onClick: openInvite,
+              },
+            ]
+          : []
+      "
+      icon="lucide:users"
+    />
+
+    <!-- The list -->
+    <UTable
+      v-else
+      :data="users"
+      :columns="columns"
+      class="border-default rounded-lg border"
+    >
+      <template #user-cell="{ row }">
+        <div class="flex min-w-0 flex-col">
+          <span class="flex items-center gap-2">
+            <span class="text-highlighted truncate font-medium">{{
+              userDisplayName(row.original)
+            }}</span>
             <UBadge
-              v-if="isAdminUser(row.original)"
-              :label="t('supabase.access.users.administrator')"
+              v-if="row.original.id === selfId"
+              :label="t('supabase.access.users.you')"
               color="primary"
               variant="subtle"
+              size="sm"
             />
-            <template v-else>
-              <UBadge
-                v-for="key in row.original.roles"
-                :key="key"
-                :label="roleLabelOf(roles, key)"
-                color="neutral"
-                variant="subtle"
-              />
-            </template>
-          </div>
-        </template>
-
-        <template #status-cell="{ row }">
-          <div class="flex flex-col items-start gap-1">
+          </span>
+          <span v-if="row.original.email" class="text-muted truncate text-sm">{{
+            row.original.email
+          }}</span>
+        </div>
+      </template>
+
+      <template #roles-cell="{ row }">
+        <div class="flex flex-wrap gap-1">
+          <UBadge
+            v-if="isAdminUser(row.original)"
+            :label="t('supabase.access.users.administrator')"
+            color="primary"
+            variant="subtle"
+          />
+          <template v-else>
             <UBadge
-              v-if="userStatus(row.original) === 'active'"
-              :label="t('supabase.access.users.status.active')"
-              color="success"
+              v-for="key in row.original.roles"
+              :key="key"
+              :label="roleLabelOf(roles, key)"
+              color="neutral"
               variant="subtle"
             />
-            <template v-else>
-              <UBadge
-                :label="t('supabase.access.users.status.invited')"
-                color="warning"
-                variant="subtle"
-              />
-              <span v-if="row.original.invited_at" class="text-muted text-xs">
-                {{
-                  t('supabase.access.users.status.invitedOn', {
-                    date: dateText(row.original.invited_at, {
-                      dateStyle: 'medium',
-                    }),
-                  })
-                }}
-              </span>
-            </template>
-          </div>
-        </template>
-
-        <template #lastSignIn-cell="{ row }">
-          <span v-if="row.original.last_sign_in_at" class="text-sm">
-            {{
-              dateText(row.original.last_sign_in_at, {
-                dateStyle: 'medium',
-                timeStyle: 'short',
-              })
-            }}
-          </span>
-          <span v-else class="text-muted text-sm">{{
-            t('supabase.access.users.neverSignedIn')
-          }}</span>
-        </template>
-
-        <template #actions-cell="{ row }">
-          <div v-if="isAdmin" class="flex justify-end">
-            <UDropdownMenu
-              :items="menuItems(row.original)"
-              :content="{ align: 'end' }"
+          </template>
+        </div>
+      </template>
+
+      <template #status-cell="{ row }">
+        <div class="flex flex-col items-start gap-1">
+          <UBadge
+            v-if="userStatus(row.original) === 'active'"
+            :label="t('supabase.access.users.status.active')"
+            color="success"
+            variant="subtle"
+          />
+          <template v-else>
+            <UBadge
+              :label="t('supabase.access.users.status.invited')"
+              color="warning"
+              variant="subtle"
+            />
+            <span v-if="row.original.invited_at" class="text-muted text-xs">
+              {{
+                t('supabase.access.users.status.invitedOn', {
+                  date: dateText(row.original.invited_at, {
+                    dateStyle: 'medium',
+                  }),
+                })
+              }}
+            </span>
+          </template>
+        </div>
+      </template>
+
+      <template #lastSignIn-cell="{ row }">
+        <span v-if="row.original.last_sign_in_at" class="text-sm">
+          {{
+            dateText(row.original.last_sign_in_at, {
+              dateStyle: 'medium',
+              timeStyle: 'short',
+            })
+          }}
+        </span>
+        <span v-else class="text-muted text-sm">{{
+          t('supabase.access.users.neverSignedIn')
+        }}</span>
+      </template>
+
+      <template #actions-cell="{ row }">
+        <div v-if="isAdmin" class="flex justify-end">
+          <UDropdownMenu
+            :items="menuItems(row.original)"
+            :content="{ align: 'end' }"
+          >
+            <UTooltip
+              :text="
+                t('supabase.access.users.actionsLabel', {
+                  name: userDisplayName(row.original),
+                })
+              "
             >
               <UButton
                 :aria-label="
@@ -454,27 +456,27 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
                 color="neutral"
                 variant="ghost"
               />
-            </UDropdownMenu>
-          </div>
-        </template>
-      </UTable>
-
-      <!-- Lazy: the chunk loads on the first open. -->
-      <InviteModal
-        v-if="inviteMounted"
-        v-model:open="inviteOpen"
-        :roles="roles"
-        :capabilities="capabilities"
-        @done="load"
-      />
-      <EditRolesSlideover
-        v-if="editMounted"
-        v-model:open="editOpen"
-        :user="editUser"
-        :roles="roles"
-        :self="editUser?.id === selfId"
-        @saved="load"
-      />
-    </AdminView>
-  </main>
+            </UTooltip>
+          </UDropdownMenu>
+        </div>
+      </template>
+    </UTable>
+
+    <!-- Lazy: the chunk loads on the first open. -->
+    <InviteModal
+      v-if="inviteMounted"
+      v-model:open="inviteOpen"
+      :roles="roles"
+      :capabilities="capabilities"
+      @done="load"
+    />
+    <EditRolesSlideover
+      v-if="editMounted"
+      v-model:open="editOpen"
+      :user="editUser"
+      :roles="roles"
+      :self="editUser?.id === selfId"
+      @saved="load"
+    />
+  </PlutoViewAdminPanel>
 </template>

package/i18n/locales/en.json

@@ -146,22 +146,20 @@
       "checkConsole": "Please check the console for more details."
     },
     "setup": {
-      "title": "Setup Wizard",
-      "steps": {
-        "database": "Database Setup",
-        "complete": "Complete Setup"
-      },
-      "submit": "Set up database",
-      "next": "Submit",
-      "why": "It will be used to create your database structure. It won't be stored anywhere. That's a {promise}! 😉",
-      "promise": "promise",
-      "promiseTooltip": "Click on the 'Technical details' button for more info",
-      "technicalDetails": "Technical details",
-      "technicalDetailsRequest": "When you click \"Next\", a request to {route} will be made with the database password you provided. This API will then use this password to make a direct PostgreSQL connection to your Supabase database and run the SQL queries from this {files}.",
-      "technicalDetailsRoute": "a server route",
-      "technicalDetailsFiles": "SQL files",
-      "technicalDetailsStored": "After the setup is complete, the password will NOT be stored or used for any other purpose.",
-      "restartDescription": "Saving your connection string writes it to .env. In development, that restarts the server automatically. The page will briefly show a reconnecting message — this is expected, not an error.",
+      "title": "Set up the database",
+      "description": "Pluto creates its tables in your Supabase project. Paste the connection details of the database.",
+      "connectionHelp": "Copy the URI of the Transaction pooler from the {link} of your project.",
+      "connectionHelpLink": "Connect panel",
+      "passwordHelp": "It replaces {placeholder} in the URI. You can reset it in the {link}.",
+      "passwordHelpLink": "database settings",
+      "stored": "The connection stays on the server: it is saved in `.env` as `DATABASE_URL`, for the next updates of the tables. It is never sent back to the browser.",
+      "howItWorks": "What happens",
+      "detailsRequest": "The button sends the connection to a {route} of this site.",
+      "detailsRoute": "server route",
+      "detailsRun": "The server connects to your database and runs the {files} of Pluto and of its layers.",
+      "detailsFiles": "SQL migrations",
+      "restartNote": "In development, saving `.env` restarts the server. The page waits and reconnects.",
+      "submit": "Set up the database",
       "restartingDescription": "Setup is finishing. Reconnecting…",
       "reconnectedDescription": "The server is back. Your database has been set up.",
       "failed": "Database setup failed",
@@ -169,9 +167,9 @@
       "complete": "Database setup complete",
       "completeDescription": "Your database has been set up successfully.",
       "error": "Error setting up the database",
-      "doneTitle": "Setup Complete",
-      "doneDescription": "Your database is ready. Create your admin account by signing up.",
-      "goToSignup": "Go to sign up"
+      "doneTitle": "The database is ready",
+      "doneDescription": "Now create your administrator account.",
+      "goToSignup": "Create the account"
     },
     "migrations": {
       "title": "Migrations",

package/i18n/locales/pt-BR.json

@@ -146,22 +146,20 @@
       "checkConsole": "Verifique o console para ver mais detalhes."
     },
     "setup": {
-      "title": "Assistente de configuração",
-      "steps": {
-        "database": "Configuração do banco de dados",
-        "complete": "Concluir configuração"
-      },
-      "submit": "Configurar banco de dados",
-      "next": "Enviar",
-      "why": "Ela será usada para criar a estrutura do seu banco de dados. Ela não será armazenada em nenhum lugar. Isso é uma {promise}! 😉",
-      "promise": "promessa",
-      "promiseTooltip": "Clique no botão 'Detalhes técnicos' para saber mais",
-      "technicalDetails": "Detalhes técnicos",
-      "technicalDetailsRequest": "Ao clicar em \"Próximo\", será feita uma requisição para {route} com a senha do banco de dados que você informou. Essa API usará a senha para abrir uma conexão direta do PostgreSQL com seu banco de dados do Supabase e executar as consultas SQL destes {files}.",
-      "technicalDetailsRoute": "uma rota do servidor",
-      "technicalDetailsFiles": "arquivos SQL",
-      "technicalDetailsStored": "Depois que a configuração terminar, a senha NÃO será armazenada nem usada para nenhum outro fim.",
-      "restartDescription": "Salvar sua string de conexão a grava no arquivo .env. Em desenvolvimento, isso reinicia o servidor automaticamente. A página vai exibir brevemente uma mensagem de reconexão. Isso é esperado e não é um erro.",
+      "title": "Configure o banco de dados",
+      "description": "O Pluto cria as tabelas dele no seu projeto do Supabase. Cole os dados de conexão do banco de dados.",
+      "connectionHelp": "Copie a URI do Transaction pooler no {link} do seu projeto.",
+      "connectionHelpLink": "painel Connect",
+      "passwordHelp": "Ela substitui {placeholder} na URI. Você pode redefini-la nas {link}.",
+      "passwordHelpLink": "configurações do banco de dados",
+      "stored": "A conexão fica no servidor: ela é salva no `.env` como `DATABASE_URL`, para as próximas atualizações das tabelas. Ela nunca volta para o navegador.",
+      "howItWorks": "O que acontece",
+      "detailsRequest": "O botão envia a conexão para uma {route} deste site.",
+      "detailsRoute": "rota do servidor",
+      "detailsRun": "O servidor se conecta ao seu banco de dados e roda as {files} do Pluto e das camadas dele.",
+      "detailsFiles": "migrações SQL",
+      "restartNote": "Em desenvolvimento, salvar o `.env` reinicia o servidor. A página espera e se reconecta.",
+      "submit": "Configurar o banco de dados",
       "restartingDescription": "A configuração está terminando. Reconectando…",
       "reconnectedDescription": "O servidor voltou. Seu banco de dados foi configurado.",
       "failed": "Falha ao configurar o banco de dados",
@@ -169,9 +167,9 @@
       "complete": "Banco de dados configurado",
       "completeDescription": "Seu banco de dados foi configurado com sucesso.",
       "error": "Erro ao configurar o banco de dados",
-      "doneTitle": "Configuração concluída",
-      "doneDescription": "Seu banco de dados está pronto. Crie sua conta de administrador fazendo o cadastro.",
-      "goToSignup": "Ir para o cadastro"
+      "doneTitle": "O banco de dados está pronto",
+      "doneDescription": "Agora crie sua conta de administrador.",
+      "goToSignup": "Criar a conta"
     },
     "migrations": {
       "title": "Migrações",

package/modules/internal/supabase-types-shim.ts

@@ -0,0 +1,27 @@
+// Not a Nuxt module: Nuxt loads every file of modules/ (and modules/*/index.ts), not this folder.
+/**
+ * A shim that pluto-migrations wrote: one re-export of the types of an @plutocms/supabase copy
+ * (installed, or linked from a local checkout).
+ */
+const SEEDED_SHIM = /^export \* from '[^']*\/shared\/types\/supabase'\s*$/
+
+/**
+ * The text to write to the app's `shared/types/supabase.ts`, or `null` to leave the file as it
+ * is. A missing file gets the shim. A shim that pluto-migrations wrote earlier gets the new path
+ * when the path changed: a package manager with versioned folders (Bun's
+ * `node_modules/.bun/@plutocms+supabase@<version>...`) moves the package on each update, and the
+ * old path then has no types. A file with other text (types that the app generated) stays.
+ */
+export function supabaseTypesShim(
+  existing: string | undefined,
+  importSpecifier: string
+): string | null {
+  const shim = `export * from '${importSpecifier}'\n`
+  if (existing === undefined) {
+    return shim
+  }
+  if (SEEDED_SHIM.test(existing) && existing.trim() !== shim.trim()) {
+    return shim
+  }
+  return null
+}

package/modules/pluto-migrations.ts

@@ -9,6 +9,7 @@ import {
 } from 'node:fs'
 import { basename, dirname, join, relative } from 'node:path'
 import { createResolver, defineNuxtModule, getLayerDirectories } from 'nuxt/kit'
+import { supabaseTypesShim } from './internal/supabase-types-shim'
 
 const noTransactionPattern = /^--\s*pluto:no-transaction\b/
 
@@ -116,7 +117,9 @@ export default defineNuxtModule({
       nuxt.options.rootDir,
       'shared/types/supabase.ts'
     )
-    if (!existsSync(consumerTypesPath)) {
+    // Seed the shim when the app has none, and fix the path of an earlier
+    // shim (see supabaseTypesShim).
+    {
       // Resolve *this exact* @plutocms/supabase instance's own snapshot
       // (local-linked or npm-installed, whichever is actually running)
       // rather than a bare package specifier, which would re-resolve
@@ -132,15 +135,19 @@ export default defineNuxtModule({
         importSpecifier = `./${importSpecifier}`
       }
 
-      mkdirSync(consumerTypesDir, { recursive: true })
-      writeFileSync(
-        consumerTypesPath,
-        `export * from '${importSpecifier}'\n`,
-        'utf-8'
-      )
-      console.warn(
-        '[pluto-migrations] Seeded shared/types/supabase.ts (re-exporting @plutocms/supabase types; no generated types found yet).'
-      )
+      const existing = existsSync(consumerTypesPath)
+        ? readFileSync(consumerTypesPath, 'utf-8')
+        : undefined
+      const shim = supabaseTypesShim(existing, importSpecifier)
+      if (shim !== null) {
+        mkdirSync(consumerTypesDir, { recursive: true })
+        writeFileSync(consumerTypesPath, shim, 'utf-8')
+        console.warn(
+          existing === undefined
+            ? '[pluto-migrations] Seeded shared/types/supabase.ts (re-exporting @plutocms/supabase types; no generated types found yet).'
+            : '[pluto-migrations] Updated the path in shared/types/supabase.ts (the @plutocms/supabase package moved).'
+        )
+      }
     }
 
     const layerDirs = getLayerDirectories()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/supabase",
   "type": "module",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Supabase backend layer for Pluto",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@nuxt/ui": "^4.12.0",
     "@nuxtjs/supabase": "^2.1.0",
-    "@plutocms/core": ">=0.64.0 <1.0.0",
+    "@plutocms/core": ">=0.68.0 <1.0.0",
     "@supabase/supabase-js": "^2.117.3",
     "postgres": "^3.4.9",
     "supabase": "^2.121.0",

package/app/layouts/setup.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div
-    class="dark:bg-admin-content light:bg-white font-outfit flex h-full grow flex-col"
-  >
-    <div class="flex h-full justify-center">
-      <div class="grow overflow-hidden">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>