Environment variables management (#6012)

* initial setup

* clean up

* more layout

* empty state touch up

* wip

* key and activity cell

* nit

* add dialog wip

* value cell

* add and delete kv field

* actions cell, edit, delete dialog

* wip add new variable

* delete dialog

* environment types

* add multiple variables, handle empty value cell

* filter by environment dropdown

* trigger text

* slight uxqa, reset form variables on outside click

* edit dialog wip

* wip edit

* check for key already exists

* fix add dialog errors

* file upload .env

* unused

* fix dup form id

* lint

* copy treatment for value cell

* cast input element to event

* disable create when no new changes

* omit empty variables

* omit draft vars without key

* polish add dialog

* pitstop

* fix process env in add dialog

* allow to set the correct initial environments in edit dialog

* wip

* truncate value cell

* has changes, update project variables based on feedback

* no unchecked env checkboxes

* wip

* pass environment in when unsetting variable

* check for dups when key is modified in edit dialog

* error input wrapper on edit key

* fix

* clean up

* validate special chars, use reset from superform

* special char error message

* update errors index for error message

* consistent eye icons in value cell

* update activity cell

* add dialog tweaks

* feedback

* filter out empty kv pair when parsing file

* scrollable in add dialog

* trim comments when parsing, edit error input wrapper style

* fix handle remove

* dropdown environment filter

* sorted, singular, clean up

* tooltip title in activity cell

web-admin/src/components/nav/LeftNav.svelte

@@ -8,9 +8,10 @@
     label: string;
     route: string;
   }[];
+  export let minWidth: string = "150px";
 </script>
 
-<div class="nav-items">
+<div class="nav-items" style:min-width={minWidth}>
   {#each navItems as { label, route } (route)}
     <LeftNavItem
       {label}
@@ -23,6 +24,5 @@
 <style lang="postcss">
   .nav-items {
     @apply flex flex-col gap-y-2;
-    @apply min-w-[150px];
   }
 </style>

web-admin/src/features/navigation/nav-utils.ts

@@ -21,6 +21,8 @@ export function isProjectPage(page: Page): boolean {
     page.route.id === "/[organization]/[project]/-/status" ||
     page.route.id === "/[organization]/[project]/-/settings" ||
     page.route.id === "/[organization]/[project]/-/settings/public-urls" ||
+    page.route.id ===
+      "/[organization]/[project]/-/settings/environment-variables" ||
     !!page.route?.id?.startsWith("/[organization]/[project]/-/request-access")
   );
 }

web-admin/src/features/organizations/users/OrgUsersTable.svelte

@@ -31,7 +31,6 @@
         widthPercent: 5,
       },
     },
-
     {
       accessorKey: "roleName",
       header: "Role",

web-admin/src/features/projects/ProjectTabs.svelte

@@ -40,7 +40,7 @@
             {
               // TODO: Change this back to `/${organization}/${project}/-/settings`
               // Once project settings are implemented
-              route: `/${organization}/${project}/-/settings/public-urls`,
+              route: `/${organization}/${project}/-/settings/environment-variables`,
               label: "Settings",
             },
           ];

web-admin/src/features/projects/environment-variables/ActionsCell.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
+  import { Trash2Icon, Pencil } from "lucide-svelte";
+  import EditDialog from "./EditDialog.svelte";
+  import DeleteDialog from "./DeleteDialog.svelte";
+
+  export let id: string;
+  export let environment: string;
+  export let name: string;
+  export let value: string;
+  export let variableNames: string[] = [];
+
+  let isDropdownOpen = false;
+  let isEditDialogOpen = false;
+  let isDeleteDialogOpen = false;
+</script>
+
+<DropdownMenu.Root bind:open={isDropdownOpen}>
+  <DropdownMenu.Trigger class="flex-none">
+    <IconButton rounded active={isDropdownOpen}>
+      <ThreeDot size="16px" />
+    </IconButton>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="start">
+    <DropdownMenu.Item
+      class="font-normal flex items-center"
+      on:click={() => {
+        isEditDialogOpen = true;
+      }}
+    >
+      <Pencil size="12px" />
+      <span class="ml-2">Edit</span>
+    </DropdownMenu.Item>
+    <DropdownMenu.Item
+      class="font-normal flex items-center"
+      type="destructive"
+      on:click={() => {
+        isDeleteDialogOpen = true;
+      }}
+    >
+      <Trash2Icon size="12px" />
+      <span class="ml-2">Delete</span>
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<EditDialog
+  bind:open={isEditDialogOpen}
+  {id}
+  {environment}
+  {name}
+  {value}
+  {variableNames}
+/>
+<DeleteDialog bind:open={isDeleteDialogOpen} {name} {environment} />

web-admin/src/features/projects/environment-variables/ActivityCell.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import { timeAgo } from "../../dashboards/listing/utils";
+
+  export let updatedOn: string;
+
+  function formatText() {
+    const updatedDate = new Date(updatedOn);
+
+    // FIXME: `updateProjectVariables` does not update the `updatedOn` timestamp correctly
+    // if (createdDate.getTime() === updatedDate.getTime()) {
+    //   return `Added ${timeAgo(createdDate)}`;
+    // }
+
+    return `Updated ${timeAgo(updatedDate)}`;
+  }
+
+  $: formattedText = formatText();
+</script>
+
+<Tooltip distance={8} location="top" alignment="start">
+  <div class="text-xs text-gray-500 cursor-pointer">
+    {formattedText}
+  </div>
+  <TooltipContent slot="tooltip-content">
+    <span class="text-xs text-gray-50 font-medium"
+      >{new Date(updatedOn).toLocaleString()}</span
+    >
+  </TooltipContent>
+</Tooltip>