Merge remote-tracking branch 'origin/cheeks-lab-day-portal-redesign' into feature/user-onboarding-overlays

2024-08-27 07:51:37 +12:00 · 2023-01-16 10:26:52 +00:00 · 2023-01-16 10:26:52 +00:00 · 980a6d1e8f
commit 980a6d1e8f
parent 4fd91ef617 355fb6fda2
14 changed files with 52 additions and 27 deletions
--- a/hosting/docker-compose.dev.yaml
+++ b/hosting/docker-compose.dev.yaml
@ -6,7 +6,7 @@ services:
  minio-service:
    container_name: budi-minio-dev
    restart: on-failure
-    image: minio/minio
+    image: minio/minio:RELEASE.2022-10-24T18-35-07Z
    volumes:
      - minio_data:/data
    ports:
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -33,6 +33,7 @@
  export let allowSelectRows
  export let allowEditRows = true
  export let allowEditColumns = true
+  export let allowClickRows = true
  export let selectedRows = []
  export let customRenderers = []
  export let disableSorting = false
@ -373,7 +374,7 @@
        {/if}
        {#if sortedRows?.length}
          {#each sortedRows as row, idx}
-            <div class="spectrum-Table-row">
+            <div class="spectrum-Table-row" class:clickable={allowClickRows}>
              {#if showEditColumn}
                <div
                  class:noBorderCheckbox={!showHeaderBorder}
@ -566,8 +567,12 @@
  /* Table rows */
  .spectrum-Table-row {
    display: contents;
+    cursor: auto;
  }
-  .spectrum-Table-row:hover .spectrum-Table-cell {
+  .spectrum-Table-row.clickable {
+    cursor: pointer;
+  }
+  .spectrum-Table-row.clickable:hover .spectrum-Table-cell {
    background-color: var(--spectrum-global-color-gray-100);
  }
  .wrapper--quiet .spectrum-Table-row {
--- a/packages/builder/src/components/usage/Usage.svelte
+++ b/packages/builder/src/components/usage/Usage.svelte
@ -39,15 +39,21 @@
      {#if showWarning}
        <Icon name="Alert" />
      {/if}
-      <div class="heading header-item">
-        <Heading size="XS" weight="light">{usage.name}</Heading>
-      </div>
+      <Heading size="XS" weight="light">
+        <span class="nowrap">
+          {usage.name}
+        </span>
+      </Heading>
    </div>
-    {#if unlimited}
-      <Body size="S">{usage.used} / Unlimited</Body>
-    {:else}
-      <Body size="S">{usage.used} / {usage.total}</Body>
-    {/if}
+    <Body size="S">
+      <span class="nowrap">
+        {#if unlimited}
+          {usage.used} / Unlimited
+        {:else}
+          {usage.used} / {usage.total}
+        {/if}
+      </span>
+    </Body>
  </div>
  <div>
    {#if unlimited}
@ -89,13 +95,14 @@
    display: flex;
    flex-direction: row;
    justify-content: space-between;
+    align-items: flex-end;
    margin-bottom: 12px;
+    gap: var(--spacing-m);
  }
  .header-container {
    display: flex;
  }
-  .heading {
-    margin-top: 3px;
-    margin-left: 5px;
+  .nowrap {
+    white-space: nowrap;
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/_components/Logo.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/Logo.svelte
@ -1,9 +1,14 @@
 <script>
  import Logo from "assets/bb-emblem.svg"
  import { goto } from "@roxi/routify"
+  import { organisation } from "stores/portal"
 </script>

-<img src={Logo} alt="Budibase Logo" on:click={() => $goto("./apps")} />
+<img
+  src={$organisation.logoUrl || Logo}
+  alt="Budibase Logo"
+  on:click={() => $goto("./apps")}
+/>

 <style>
  img {
--- a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
@ -17,6 +17,7 @@
 {:else if !$admin.cloud && $auth.isAdmin}
  <Button
    cta
+    size="S"
    on:click={() => $goto("/builder/portal/account/upgrade")}
    on:click
  >
--- a/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte
@ -23,7 +23,7 @@

 <ActionMenu align="right" dataCy="user-menu">
  <div slot="control" class="user-dropdown">
-    <Avatar size="L" initials={$auth.initials} url={$auth.user.pictureUrl} />
+    <Avatar size="M" initials={$auth.initials} url={$auth.user.pictureUrl} />
    <Icon size="XL" name="ChevronDown" />
  </div>
  <MenuItem icon="Moon" on:click={() => themeModal.show()} dataCy="theme">
--- a/packages/builder/src/pages/builder/portal/account/usage.svelte
+++ b/packages/builder/src/pages/builder/portal/account/usage.svelte
@ -32,6 +32,8 @@
  $: license = $auth.user?.license
  $: accountPortalAccess = $auth?.user?.accountPortalAccess
  $: quotaReset = quotaUsage?.quotaReset
+  $: canManagePlan =
+    ($admin.cloud && accountPortalAccess) || (!$admin.cloud && $auth.isAdmin)

  const setMonthlyUsage = () => {
    monthlyUsage = []
@ -184,7 +186,7 @@
      </Body>
    </Layout>
    <Divider />
-    {#if $auth?.user?.accountPortalAccess}
+    {#if canManagePlan}
      <Body>
        To upgrade your plan and usage limits visit your
        <Link size="L" on:click={goToAccountPortal}>account</Link>.
@ -247,6 +249,7 @@
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
+    flex-wrap: wrap;
  }
  .column {
    flex: 1 1 0;
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte
@ -260,10 +260,16 @@
  .desktop {
    display: contents;
  }
+  .mobile {
+    display: none;
+  }

  @media (max-width: 640px) {
    .desktop {
      display: none;
    }
+    .mobile {
+      display: contents;
+    }
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte
@ -144,7 +144,7 @@

 <ModalContent
  size="M"
-  title="Assign users to your app"
+  title="Assign access to your app"
  confirmText="Done"
  cancelText="Cancel"
  onConfirm={() => addData(data)}
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte
@ -192,7 +192,7 @@
      <Layout noPadding gap="S">
        <div class="title">
          <Heading size="S">Users</Heading>
-          <Button secondary on:click={showUsersModal}>Assign user</Button>
+          <Button cta on:click={showUsersModal}>Assign user</Button>
        </div>
        <Table
          customPlaceholder
@ -217,11 +217,11 @@
      </Layout>
    {/if}

-    {#if $usersFetch.loaded && $licensing.groupsEnabled && appGroups.length}
+    {#if $usersFetch.loaded && $licensing.groupsEnabled}
      <Layout noPadding gap="S">
        <div class="title">
          <Heading size="S">Groups</Heading>
-          <Button secondary on:click={showGroupsModal}>Assign group</Button>
+          <Button cta on:click={showGroupsModal}>Assign group</Button>
        </div>
        <Table
          customPlaceholder
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
@ -1,6 +1,5 @@
 <script>
  import {
-    ActionButton,
    Button,
    DatePicker,
    Divider,
@ -246,9 +245,7 @@
          />
        </div>
        <div>
-          <ActionButton on:click={modal.show} icon="SaveAsFloppy">
-            Create new backup
-          </ActionButton>
+          <Button cta on:click={modal.show}>Create new backup</Button>
        </div>
      </div>
      <div class="table">
--- a/packages/builder/src/pages/builder/portal/plugins/index.svelte
+++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte
@ -103,6 +103,7 @@
      allowEditColumns={false}
      allowEditRows={false}
      allowSelectRows={false}
+      allowClickRows={false}
      {customRenderers}
    />
  </Layout>
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
@ -250,7 +250,7 @@
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
  }
  .header :global(.spectrum-Heading) {
    flex: 1 1 auto;
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
@ -389,6 +389,7 @@
    display: flex;
    align-items: center;
    justify-content: flex-start;
+    gap: var(--spacing-l);
  }
  .tableTitle {
    display: flex;
@ -396,7 +397,6 @@
    align-items: flex-end;
  }
  .subtitle {
-    padding: 0 0 0 var(--spacing-m);
    display: flex;
    flex-direction: column;
    justify-content: center;