From 8832864eec53aa7ef78f700f64e4533c3c62a6ce Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Dec 2022 15:54:34 +0000 Subject: [PATCH] Add initial rewrite of app overview section --- packages/bbui/src/Button/Button.svelte | 6 +- .../src/components/common/AppLockModal.svelte | 126 +++--- .../src/components/common/EditableIcon.svelte | 3 +- .../src/components/portal/page/Header.svelte | 8 +- .../components/start/CreateAppModal.svelte | 1 + .../_components/AssignmentModal.svelte | 0 .../_components/AutomationTab.svelte | 0 .../_components/SettingsTab.svelte | 0 .../portal/overview/[appId]/_layout.svelte | 238 ++++++++++ .../portal/overview/[appId]/access.svelte | 207 +++++++++ .../portal/overview/[appId]/index.svelte | 4 + .../overview.svelte} | 112 +++-- .../overview/[application]/index.svelte | 417 ------------------ .../overview/_components/AccessTab.svelte | 223 ---------- .../builder/portal/overview/_layout.svelte | 20 + packages/builder/src/stores/portal/index.js | 1 + .../builder/src/stores/portal/overview.js | 21 + 17 files changed, 646 insertions(+), 741 deletions(-) rename packages/builder/src/pages/builder/portal/overview/{ => [appId]}/_components/AssignmentModal.svelte (100%) rename packages/builder/src/pages/builder/portal/overview/{ => [appId]}/_components/AutomationTab.svelte (100%) rename packages/builder/src/pages/builder/portal/overview/{ => [appId]}/_components/SettingsTab.svelte (100%) create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte rename packages/builder/src/pages/builder/portal/overview/{_components/OverviewTab.svelte => [appId]/overview.svelte} (78%) delete mode 100644 packages/builder/src/pages/builder/portal/overview/[application]/index.svelte delete mode 100644 packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/_layout.svelte create mode 100644 packages/builder/src/stores/portal/overview.js diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index ad86535bfa..979ec6a728 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -28,6 +28,7 @@ class:spectrum-Button--quiet={quiet} class:new-styles={newStyles} class:active + class:disabled class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" {disabled} data-cy={dataCy} @@ -108,7 +109,10 @@ border-color: transparent; color: var(--spectrum-global-color-gray-900); } - .spectrum-Button--secondary.new-styles:hover { + .spectrum-Button--secondary.new-styles:not(.disabled):hover { background: var(--spectrum-global-color-gray-300); } + .spectrum-Button--secondary.new-styles.disabled { + color: var(--spectrum-global-color-gray-500); + } diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte index 4a708fbd83..74e1b12615 100644 --- a/packages/builder/src/components/common/AppLockModal.svelte +++ b/packages/builder/src/components/common/AppLockModal.svelte @@ -57,8 +57,8 @@ } -
- {#if lockedBy} +{#if lockedBy} +
- {/if} -
- -{#key app} -
- - - - - Apps are locked to prevent work from being lost from overlapping - changes between your team. - - {#if lockedByYou && getExpiryDuration(app) > 0} - - {processStringSync( - "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ", - { - time: getExpiryDuration(app), - } - )} - - {/if} -
- - - {#if lockedByYou} - - {/if} - -
- - -
-{/key} +{/if} + + + + + + Apps are locked to prevent work being lost from overlapping changes + between your team. + + {#if lockedByYou && getExpiryDuration(app) > 0} + + {processStringSync( + "This lock will expire in {{ duration time 'millisecond' }} from now.", + { + time: getExpiryDuration(app), + } + )} + + {/if} +
+ + + {#if lockedByYou} + + {/if} + +
+ + + diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte new file mode 100644 index 0000000000..437a0663c0 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte @@ -0,0 +1,4 @@ + diff --git a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte similarity index 78% rename from packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte rename to packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte index 37c45e7854..385784ff2d 100644 --- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte @@ -1,47 +1,54 @@
- +
@@ -77,7 +115,7 @@ Published {:else} - Unpublished + Unpublished {/if}
@@ -92,7 +130,7 @@ } )} {#if isPublished} - - Unpublish + - Unpublish {/if} {/if} {#if !deployments?.length} @@ -127,10 +165,10 @@ {/if} { - navigateTab("Settings") + $goto("../version") }} dataCy={"app-version"} > @@ -142,9 +180,7 @@ - { - if (typeof navigateTab === "function") { - navigateTab("Settings") - } + $goto("../version") }} > Update @@ -160,7 +196,7 @@ title={"Access"} showIcon={true} action={() => { - navigateTab("Access") + $goto("../access") }} dataCy={"access"} > @@ -211,7 +247,7 @@ { - navigateTab("Automation History") + $goto("../automation-history") }} dataCy={"automation-history"} > @@ -237,7 +273,7 @@ { - navigateTab("Backups") + $goto("../backups") }} dataCy={"backups"} > @@ -248,6 +284,16 @@
+ + Are you sure you want to unpublish the app {app?.name}? + + diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte deleted file mode 100644 index 71a86f2fca..0000000000 --- a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte +++ /dev/null @@ -1,223 +0,0 @@ - - -
- - {#if appGroups.length || appUsers.length} -
- Access -
- - Assign users and groups to your app and define their access here - - -
-
- {#if $licensing.groupsEnabled && appGroups.length} - - {#each appGroups as group} - - updateGroupRole(e.detail, group)} - autoWidth - quiet - value={group.roles[ - groups.actions - .getGroupAppIds(group) - .find(x => x === fixedAppId) - ]} - allowPublic={false} - /> - removeGroup(group)} - hoverable - size="S" - name="Close" - /> - - {/each} - - {/if} - {#if appUsers.length} -
- - {#each appUsers as user} - - updateUserRole(e.detail, user)} - autoWidth - quiet - value={user.roles[ - Object.keys(user.roles).find(x => x === fixedAppId) - ]} - allowPublic={false} - /> - removeUser(user)} - hoverable - size="S" - name="Close" - /> - - {/each} - - -
- {/if} - {:else} -
- - No users assigned -
- - Assign users/groups to your app and set their access here - -
-
- -
- -
- {/if} - -
- - - - - - diff --git a/packages/builder/src/pages/builder/portal/overview/_layout.svelte b/packages/builder/src/pages/builder/portal/overview/_layout.svelte new file mode 100644 index 0000000000..6427a25f4f --- /dev/null +++ b/packages/builder/src/pages/builder/portal/overview/_layout.svelte @@ -0,0 +1,20 @@ + + +{#if loaded} + +{/if} diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js index 5406ddc3dc..81d26b900e 100644 --- a/packages/builder/src/stores/portal/index.js +++ b/packages/builder/src/stores/portal/index.js @@ -10,3 +10,4 @@ export { licensing } from "./licensing" export { groups } from "./groups" export { plugins } from "./plugins" export { backups } from "./backups" +export { overview } from "./overview" diff --git a/packages/builder/src/stores/portal/overview.js b/packages/builder/src/stores/portal/overview.js new file mode 100644 index 0000000000..aa5dc4cac4 --- /dev/null +++ b/packages/builder/src/stores/portal/overview.js @@ -0,0 +1,21 @@ +import { writable, derived } from "svelte/store" +import { apps } from "./apps" + +const createOverviewStore = () => { + const store = writable({ + selectedAppId: null, + }) + const derivedStore = derived([store, apps], ([$store, $apps]) => { + return { + ...$store, + selectedApp: $apps?.find(app => app.devId === $store.selectedAppId), + } + }) + + return { + update: store.update, + subscribe: derivedStore.subscribe, + } +} + +export const overview = createOverviewStore()