Support showing of custom logo

rilldata · Jan 29, 2025 · d1c6adc · d1c6adc
1 parent e2d3174
commit d1c6adc
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 7 deletions.
diff --git a/web-admin/src/features/navigation/TopNavigationBar.svelte b/web-admin/src/features/navigation/TopNavigationBar.svelte
@@ -38,6 +38,7 @@
   export let manageOrganization: boolean;
   export let createMagicAuthTokens: boolean;
   export let manageProjectMembers: boolean;
+  export let organizationLogoUrl: string | undefined;
 
   const user = createAdminServiceGetCurrentUser();
 
@@ -185,7 +186,11 @@
     href={rillLogoHref}
     class="hover:bg-gray-200 grid place-content-center rounded p-2"
   >
-    <Rill />
+    {#if organizationLogoUrl}
+      <img src={organizationLogoUrl} alt="logo" class="h-4" />
+    {:else}
+      <Rill />
+    {/if}
   </a>
   {#if onPublicURLPage}
     <PageTitle title={publicURLDashboardTitle} />

diff --git a/web-admin/src/features/organizations/settings/LogoSettings.svelte b/web-admin/src/features/organizations/settings/LogoSettings.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import {
+    createAdminServiceCreateAsset,
+    createAdminServiceGetOrganization,
+  } from "@rilldata/web-admin/client";
+  import SettingsContainer from "@rilldata/web-admin/features/organizations/settings/SettingsContainer.svelte";
+  import { Button } from "@rilldata/web-common/components/button";
+  import Rill from "@rilldata/web-common/components/icons/Rill.svelte";
+  import EditIcon from "@rilldata/web-common/components/icons/EditIcon.svelte";
+  import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+  } from "@rilldata/web-common/components/popover";
+  import { extractFileExtension } from "@rilldata/web-common/features/entity-management/file-path-utils";
+  import { builderActions, getAttrs } from "bits-ui";
+  import FileInput from "@rilldata/web-common/components/forms/FileInput.svelte";
+
+  export let organization: string;
+
+  $: orgResp = createAdminServiceGetOrganization(organization);
+  $: logoUrl = $orgResp.data?.organization?.logoUrl;
+
+  const assetCreator = createAdminServiceCreateAsset();
+
+  let open = false;
+
+  async function uploadFile(file: File) {
+    const ext = extractFileExtension(file.name);
+    const assetResp = await $assetCreator.mutateAsync({
+      organizationName: organization,
+      data: {
+        type: "image",
+        name: "logo",
+        extension: ext,
+        cacheable: true,
+        estimatedSizeBytes: file.size,
+      },
+    });
+
+    const formData = new FormData();
+    formData.append("file", file);
+    const resp = await fetch(assetResp.signedUrl, {
+      method: "PUT",
+      body: formData,
+      headers: assetResp.signingHeaders,
+    });
+    console.log(resp.statusText);
+  }
+</script>
+
+<SettingsContainer title="Logo" suppressFooter={!logoUrl}>
+  <div slot="body" class="flex flex-col gap-y-2">
+    <div>
+      Click to upload your logo and customize Rill for your organization.
+    </div>
+    <Popover bind:open>
+      <PopoverTrigger asChild let:builder>
+        <button
+          class="flex items-center relative group h-[72px] border border-gray-300 hover:bg-slate-100"
+          {...getAttrs([builder])}
+          use:builderActions={{ builders: [builder] }}
+          class:w-24={!logoUrl}
+          class:w-20={!!logoUrl}
+        >
+          <div class="m-auto w-fit h-10">
+            {#if logoUrl}
+              <img src={logoUrl} alt="logo" class="h-10" />
+            {:else}
+              <Rill width="64" height="40" />
+            {/if}
+          </div>
+          {#if !open}
+            <div
+              class="absolute -bottom-2 -right-2 rounded-2xl bg-slate-200 group-hover:bg-slate-500 w-6 h-6 px-1.5 py-[5px]"
+            >
+              <EditIcon
+                size="16px"
+                className="text-slate-600 group-hover:text-slate-50"
+              />
+            </div>
+          {/if}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" class="w-[400px] p-4">
+        <div>Upload org logo</div>
+        <FileInput bind:value={logoUrl} accept="image/*" {uploadFile} />
+        <div>
+          <Button type="secondary" on:click={() => (open = false)}>
+            Cancel
+          </Button>
+          {#if logoUrl}
+            <Button type="secondary">Remove</Button>
+          {/if}
+          <Button type="primary">Save</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  </div>
+  <svelte:fragment slot="action">
+    {#if logoUrl}
+      <Button type="secondary">Remove</Button>
+    {/if}
+  </svelte:fragment>
+</SettingsContainer>
diff --git a/web-admin/src/features/organizations/settings/SettingsContainer.svelte b/web-admin/src/features/organizations/settings/SettingsContainer.svelte
@@ -3,6 +3,9 @@
   import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
   export let title: string;
   export let titleIcon: "none" | "info" | "error" = "none";
+  // Edge case with slots where conditional display breaks the logic.
+  // TODO: once we move out of slots we should get rid of this.
+  export let suppressFooter = false;
 </script>
 
 <div class="settings-container">
@@ -22,7 +25,7 @@
       {/if}
     </div>
   </div>
-  {#if $$slots["contact"] || $$slots["action"]}
+  {#if ($$slots["contact"] || $$slots["action"]) && !suppressFooter}
     <div class="settings-footer">
       <slot name="contact" />
       {#if $$slots["action"]}

diff --git a/web-admin/src/routes/+layout.svelte b/web-admin/src/routes/+layout.svelte
@@ -25,7 +25,8 @@
 
   export let data;
 
-  $: ({ projectPermissions, organizationPermissions } = data);
+  $: ({ projectPermissions, organizationPermissions, organizationLogoUrl } =
+    data);
   $: ({
     params: { organization },
     url: { pathname },
@@ -89,6 +90,7 @@
           manageOrganization={organizationPermissions?.manageOrg}
           createMagicAuthTokens={projectPermissions?.createMagicAuthTokens}
           manageProjectMembers={projectPermissions?.manageProjectMembers}
+          {organizationLogoUrl}
         />
 
         {#if withinOnlyOrg}

diff --git a/web-admin/src/routes/+layout.ts b/web-admin/src/routes/+layout.ts
@@ -8,7 +8,9 @@ export const ssr = false;
 import { dev } from "$app/environment";
 import {
   adminServiceGetCurrentUser,
+  adminServiceGetOrganization,
   getAdminServiceGetCurrentUserQueryKey,
+  getAdminServiceGetOrganizationQueryKey,
   type V1GetCurrentUserResponse,
   type V1OrganizationPermissions,
   type V1ProjectPermissions,
@@ -70,15 +72,22 @@ export const load = async ({ params, url, route }) => {
       user,
       organizationPermissions: <V1OrganizationPermissions>{},
       projectPermissions: <V1ProjectPermissions>{},
+      organizationLogoUrl: undefined,
     };
   }
 
   // Get organization permissions
   let organizationPermissions: V1OrganizationPermissions = {};
+  let organizationLogoUrl: string | undefined = undefined;
   if (organization && !token) {
     try {
-      organizationPermissions =
-        await fetchOrganizationPermissions(organization);
+      const organizationResp = await queryClient.fetchQuery({
+        queryKey: getAdminServiceGetOrganizationQueryKey(organization),
+        queryFn: () => adminServiceGetOrganization(organization),
+        staleTime: Infinity,
+      });
+      organizationPermissions = organizationResp.permissions;
+      organizationLogoUrl = organizationResp.organization.logoUrl;
     } catch (e) {
       if (e.response?.status !== 403) {
         throw error(e.response.status, "Error fetching organization");
@@ -91,6 +100,7 @@ export const load = async ({ params, url, route }) => {
       user,
       organizationPermissions,
       projectPermissions: <V1ProjectPermissions>{},
+      organizationLogoUrl,
     };
   }
 
@@ -113,6 +123,7 @@ export const load = async ({ params, url, route }) => {
       user,
       organizationPermissions,
       projectPermissions,
+      organizationLogoUrl,
       project: proj,
       runtime: runtimeData,
     };

diff --git a/web-admin/src/routes/[organization]/-/settings/+page.svelte b/web-admin/src/routes/[organization]/-/settings/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import StartTeamPlanDialog from "@rilldata/web-admin/features/billing/plans/StartTeamPlanDialog.svelte";
+  import LogoSettings from "@rilldata/web-admin/features/organizations/settings/LogoSettings.svelte";
   import OrgNameSettings from "@rilldata/web-admin/features/organizations/settings/OrgNameSettings.svelte";
   import OrgDomainAllowListSettings from "@rilldata/web-admin/features/organizations/settings/OrgDomainAllowListSettings.svelte";
   import type { PageData } from "./$types";
@@ -13,6 +14,7 @@
 </script>
 
 <OrgNameSettings {organization} />
+<LogoSettings {organization} />
 <OrgDomainAllowListSettings {organization} />
 <!-- disabling for now since  there are some open questions around billing -->
 <!--  <DeleteOrg {organization} />-->

diff --git a/web-common/src/components/icons/Rill.svelte b/web-common/src/components/icons/Rill.svelte
@@ -1,6 +1,11 @@
+<script lang="ts">
+  export let width = "27";
+  export let height = "16";
+</script>
+
 <svg
-  width="27"
-  height="16"
+  {width}
+  {height}
   viewBox="0 0 27 16"
   class="mb-[1px] flex-none"
   fill="none"