From 30be75155c51cab9534c374c4467e4ed7a990f60 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 24 Jun 2022 14:07:32 +0100 Subject: [PATCH 1/6] Pull in new status light from new design UI --- .../bbui/src/StatusLight/StatusLight.svelte | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/bbui/src/StatusLight/StatusLight.svelte b/packages/bbui/src/StatusLight/StatusLight.svelte index f56fee0c2a..a0c72443a6 100644 --- a/packages/bbui/src/StatusLight/StatusLight.svelte +++ b/packages/bbui/src/StatusLight/StatusLight.svelte @@ -17,10 +17,13 @@ export let negative = false export let disabled = false export let active = false + export let color = null
+ + From 36c8d91997f04e59af2c261aab8613e8124de355 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 24 Jun 2022 14:10:13 +0100 Subject: [PATCH 2/6] Pull in picker changes from new design UI --- packages/bbui/src/Form/Core/Picker.svelte | 210 ++++++++++++---------- packages/bbui/src/Form/Core/Select.svelte | 41 ++--- packages/bbui/src/Form/Select.svelte | 2 + 3 files changed, 131 insertions(+), 122 deletions(-) diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 2585f11939..a3b5c147e5 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -6,12 +6,15 @@ import { createEventDispatcher } from "svelte" import clickOutside from "../../Actions/click_outside" import Search from "./Search.svelte" + import Icon from "../../Icon/Icon.svelte" + import StatusLight from "../../StatusLight/StatusLight.svelte" export let id = null export let disabled = false export let error = null export let fieldText = "" export let fieldIcon = "" + export let fieldColour = "" export let isPlaceholder = false export let placeholderOption = null export let options = [] @@ -20,6 +23,7 @@ export let getOptionLabel = option => option export let getOptionValue = option => option export let getOptionIcon = () => null + export let getOptionColour = () => null export let open = false export let readonly = false export let quiet = false @@ -43,7 +47,7 @@ return } searchTerm = null - open = !open + open = true } const getSortedOptions = (options, getLabel, sort) => { @@ -71,73 +75,104 @@ } -
(open = false)}> - - {#if open} -
- {#if autocomplete} - (searchTerm = event.detail)} - {disabled} - placeholder="Search" - /> + {/if} + {#if fieldColour} + + + + {/if} + + +{#if open} +
(open = false)} + transition:fly|local={{ y: -20, duration: 200 }} + class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" + class:auto-width={autoWidth} + > + {#if autocomplete} + (searchTerm = event.detail)} + {disabled} + placeholder="Search" + /> + {/if} +
    + {#if placeholderOption} +
  • onSelectOption(null)} + > + {placeholderOption} + +
    • {/if} -
      - {#if placeholderOption} + {#if filteredOptions.length} + {#each filteredOptions as option, idx}
    • onSelectOption(null)} + on:click={() => onSelectOption(getOptionValue(option, idx))} > - {placeholderOption} + {#if getOptionIcon(option, idx)} + + + + {/if} + + {getOptionLabel(option, idx)} + -
      • - {/if} - {#if filteredOptions.length} - {#each filteredOptions as option, idx} -
    • onSelectOption(getOptionValue(option, idx))} - > - {#if getOptionIcon(option, idx)} - - icon - - {/if} - - {getOptionLabel(option, idx)} + {#if getOptionColour(option, idx)} + + - -
      • - {/each} - {/if} -
    -
- {/if} -
+ {/if} + + {/each} + {/if} + +
+{/if} - - -
- - 1 - 2 - 3 - 4 - - - 1 - 2 - 3 - 4 - -
- - - -
- - 1 - 2 - 3 - 4 - - - 1 - 2 - 3 - 4 - -
- diff --git a/packages/bbui/src/List/List.svelte b/packages/bbui/src/List/List.svelte new file mode 100644 index 0000000000..243b04da50 --- /dev/null +++ b/packages/bbui/src/List/List.svelte @@ -0,0 +1,28 @@ + + +
+ {#if title} +
+ {title} +
+ {/if} +
+ +
+
+ + diff --git a/packages/bbui/src/List/ListItem.svelte b/packages/bbui/src/List/ListItem.svelte new file mode 100644 index 0000000000..76a83e7b08 --- /dev/null +++ b/packages/bbui/src/List/ListItem.svelte @@ -0,0 +1,92 @@ + + +
+
+ {#if icon} +
+ +
+ {/if} + {#if avatar} + + {/if} + {#if title} + {title} + {/if} + {#if subtitle} + + {/if} +
+
+ +
+
+ + diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 97dc88030e..ea7dd88020 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -65,6 +65,8 @@ export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte" export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte" export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte" export { default as RichTextField } from "./Form/RichTextField.svelte" +export { default as List } from "./List/List.svelte" +export { default as ListItem } from "./List/ListItem.svelte" // Renderers export { default as BoldRenderer } from "./Table/BoldRenderer.svelte" From 69a3c708a7a544db4e4268d42003d19ee2cdd57a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 24 Jun 2022 14:55:49 +0100 Subject: [PATCH 6/6] Add access tab to app overview --- .../src/pages/builder/portal/_layout.svelte | 2 + .../portal/manage/groups/[groupId].svelte | 2 +- .../overview/[application]/index.svelte | 4 ++ .../overview/_components/AccessTab.svelte | 51 +++++++++++++++++++ 4 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 5da8b34700..a3cc406fcc 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -14,6 +14,7 @@ } from "@budibase/bbui" import ConfigChecklist from "components/common/ConfigChecklist.svelte" import { organisation, auth } from "stores/portal" + import { roles } from "stores/backend" import { admin as adminStore } from "stores/portal" import { onMount } from "svelte" import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte" @@ -126,6 +127,7 @@ } else { try { await organisation.init() + await roles.fetch() } catch (error) { notifications.error("Error getting org config") } diff --git a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte index 21169c6513..833d89e9b5 100644 --- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte +++ b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte @@ -139,7 +139,7 @@
- {#if group?.users.length} + {#if group?.users?.length} {#each group.users as user}
diff --git a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte index 01d4095a3f..2709c490af 100644 --- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte @@ -19,6 +19,7 @@ } from "@budibase/bbui" import OverviewTab from "../_components/OverviewTab.svelte" import SettingsTab from "../_components/SettingsTab.svelte" + import AccessTab from "../_components/AccessTab.svelte" import { API } from "api" import { store } from "builderStore" import { apps, auth } from "stores/portal" @@ -302,6 +303,9 @@ on:unpublish={e => unpublishApp(e.detail)} /> + + + {#if false}
Automation History contents
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte new file mode 100644 index 0000000000..ff3f1065fe --- /dev/null +++ b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte @@ -0,0 +1,51 @@ + + +
+ +
+ Access +
+ + Assign users to your app and define their access here + +
+
+ + + + + + + + + + + + + + + + + + + + +
+ +