Merge remote-tracking branch 'origin/cheeks-lab-day-portal-redesign' into feature/environment-variables
This commit is contained in:
Peter Clement
commit
01c0e2993b
|
|
@ -14,7 +14,7 @@
|
|||
export let active = false
|
||||
export let tooltip = undefined
|
||||
export let dataCy
|
||||
export let newStyles = false
|
||||
export let newStyles = true
|
||||
|
||||
let showTooltip = false
|
||||
</script>
|
||||
|
|
@ -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);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@
|
|||
display: none;
|
||||
}
|
||||
.main {
|
||||
font-family: var(--font-sans);
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
.main :global(textarea) {
|
||||
|
|
|
|||
|
|
@ -264,7 +264,7 @@
|
|||
max-height: 100%;
|
||||
}
|
||||
:global(.flatpickr-calendar) {
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.is-disabled {
|
||||
pointer-events: none !important;
|
||||
|
|
|
|||
|
|
@ -88,8 +88,8 @@
|
|||
on:click={onClick}
|
||||
>
|
||||
{#if fieldIcon}
|
||||
<span class="option-extra">
|
||||
<Icon name={fieldIcon} />
|
||||
<span class="option-extra icon">
|
||||
<Icon size="S" name={fieldIcon} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if fieldColour}
|
||||
|
|
@ -168,8 +168,8 @@
|
|||
class:is-disabled={!isOptionEnabled(option)}
|
||||
>
|
||||
{#if getOptionIcon(option, idx)}
|
||||
<span class="option-extra">
|
||||
<Icon name={getOptionIcon(option, idx)} />
|
||||
<span class="option-extra icon">
|
||||
<Icon size="S" name={getOptionIcon(option, idx)} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if getOptionColour(option, idx)}
|
||||
|
|
@ -241,6 +241,9 @@
|
|||
.option-extra {
|
||||
padding-right: 8px;
|
||||
}
|
||||
.option-extra.icon {
|
||||
margin: 0 -1px;
|
||||
}
|
||||
|
||||
.spectrum-Popover :global(.spectrum-Search) {
|
||||
margin-top: -1px;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: 0 0 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
.icon.size--S {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: 0 0 22px;
|
||||
}
|
||||
.icon.size--S :global(.spectrum-Icon) {
|
||||
width: 16px;
|
||||
|
|
@ -46,6 +48,7 @@
|
|||
.icon.size--L {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex: 0 0 40px;
|
||||
}
|
||||
.icon.size--L :global(.spectrum-Icon) {
|
||||
width: 28px;
|
||||
|
|
|
|||
|
|
@ -56,5 +56,6 @@
|
|||
--spectrum-semantic-positive-icon-color: #2d9d78;
|
||||
--spectrum-semantic-negative-icon-color: #e34850;
|
||||
min-width: 100px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
label {
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
|
||||
.muted {
|
||||
|
|
|
|||
|
|
@ -1,32 +1,84 @@
|
|||
<script>
|
||||
import { setContext } from "svelte"
|
||||
import clickOutside from "../Actions/click_outside"
|
||||
|
||||
export let wide = false
|
||||
export let maxWidth = "80ch"
|
||||
export let narrow = false
|
||||
export let noPadding = false
|
||||
|
||||
let sidePanelVisble = false
|
||||
|
||||
setContext("side-panel", {
|
||||
open: () => (sidePanelVisble = true),
|
||||
close: () => (sidePanelVisble = false),
|
||||
})
|
||||
</script>
|
||||
|
||||
<div style="--max-width: {maxWidth}" class:wide class:noPadding>
|
||||
<slot />
|
||||
<div class="page">
|
||||
<div class="main">
|
||||
<div class="content" class:wide class:noPadding class:narrow>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="side-panel"
|
||||
class:visible={sidePanelVisble}
|
||||
use:clickOutside={() => {
|
||||
sidePanelVisble = false
|
||||
}}
|
||||
>
|
||||
<slot name="side-panel" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
.page {
|
||||
position: relative;
|
||||
}
|
||||
.page,
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.main {
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
max-width: var(--max-width);
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: calc(var(--spacing-xl) * 2);
|
||||
min-height: calc(100% - var(--spacing-xl) * 4);
|
||||
flex: 1 1 auto;
|
||||
padding: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wide {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.noPadding {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
.narrow {
|
||||
max-width: 840px;
|
||||
}
|
||||
#side-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 24px;
|
||||
background: var(--background);
|
||||
border-left: var(--border-light);
|
||||
width: 320px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
transform: translateX(100%);
|
||||
transition: transform 130ms ease-out;
|
||||
height: calc(100% - 48px);
|
||||
z-index: 2;
|
||||
}
|
||||
#side-panel.visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,9 +30,11 @@
|
|||
<Label>{subtitle}</Label>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="right">
|
||||
<slot />
|
||||
</div>
|
||||
{#if $$slots.default}
|
||||
<div class="right">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -45,6 +47,7 @@
|
|||
justify-content: space-between;
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
transition: background 130ms ease-out;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.list-item:not(:first-child) {
|
||||
border-top: none;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
padding: 40px;
|
||||
background-color: var(--purple);
|
||||
color: white;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
|
||||
<style>
|
||||
p, span {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
{/if}
|
||||
|
||||
{#if showCancelButton}
|
||||
<Button group secondary newStyles on:click={close}>
|
||||
<Button group secondary on:click={close}>
|
||||
{cancelText}
|
||||
</Button>
|
||||
{/if}
|
||||
|
|
@ -151,7 +151,8 @@
|
|||
overflow: visible;
|
||||
}
|
||||
.spectrum-Dialog-heading {
|
||||
font-family: var(--font-sans);
|
||||
font-family: var(--font-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.spectrum-Dialog-heading.noDivider {
|
||||
margin-bottom: 12px;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
<style>
|
||||
p {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
p.error {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
font-size: var(--font-size-m);
|
||||
margin: 0 0 var(--spacing-l) 0;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.input-group-column {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<script>
|
||||
export let value
|
||||
export let schema
|
||||
</script>
|
||||
|
||||
<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
|
||||
<div class:capitalise={schema?.capitalise}>
|
||||
{typeof value === "object" ? JSON.stringify(value) : value}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
@ -10,5 +13,10 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: var(--max-cell-width);
|
||||
width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
div.capitalise {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@
|
|||
* template: a HBS or JS binding to use as the value
|
||||
* background: the background color
|
||||
* color: the text color
|
||||
* borderLeft: show a left border
|
||||
* borderRight: show a right border
|
||||
*/
|
||||
export let data = []
|
||||
export let schema = {}
|
||||
|
|
@ -270,6 +272,14 @@
|
|||
if (schema[field].align === "Right") {
|
||||
styles[field] += "justify-content: flex-end; text-align: right;"
|
||||
}
|
||||
if (schema[field].borderLeft) {
|
||||
styles[field] +=
|
||||
"border-left: 1px solid var(--spectrum-global-color-gray-200);"
|
||||
}
|
||||
if (schema[field].borderLeft) {
|
||||
styles[field] +=
|
||||
"border-right: 1px solid var(--spectrum-global-color-gray-200);"
|
||||
}
|
||||
})
|
||||
return styles
|
||||
}
|
||||
|
|
@ -290,7 +300,11 @@
|
|||
</slot>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
|
||||
<div
|
||||
class="spectrum-Table"
|
||||
class:no-scroll={!rowCount}
|
||||
style={`${heightStyle}${gridStyle}`}
|
||||
>
|
||||
{#if fields.length}
|
||||
<div class="spectrum-Table-head">
|
||||
{#if showEditColumn}
|
||||
|
|
@ -433,7 +447,6 @@
|
|||
/* Wrapper */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
--table-bg: var(--spectrum-global-color-gray-50);
|
||||
--table-border: 1px solid var(--spectrum-alias-border-color-mid);
|
||||
--cell-padding: var(--spectrum-global-dimension-size-250);
|
||||
|
|
@ -460,6 +473,9 @@
|
|||
display: grid;
|
||||
overflow: auto;
|
||||
}
|
||||
.spectrum-Table.no-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.spectrum-Table-head {
|
||||
|
|
@ -548,10 +564,7 @@
|
|||
display: contents;
|
||||
}
|
||||
.spectrum-Table-row:hover .spectrum-Table-cell {
|
||||
/*background-color: var(--hover-bg) !important;*/
|
||||
}
|
||||
.spectrum-Table-row:hover .spectrum-Table-cell:after {
|
||||
background-color: var(--spectrum-alias-highlight-hover);
|
||||
background-color: var(--spectrum-global-color-gray-100);
|
||||
}
|
||||
.wrapper--quiet .spectrum-Table-row {
|
||||
border-left: none;
|
||||
|
|
@ -584,24 +597,13 @@
|
|||
border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
|
||||
background-color: var(--table-bg);
|
||||
z-index: auto;
|
||||
transition: background-color 130ms ease-out;
|
||||
}
|
||||
.spectrum-Table-cell--edit {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.spectrum-Table-cell:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transition: background-color
|
||||
var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
.placeholder {
|
||||
|
|
|
|||
|
|
@ -82,7 +82,8 @@
|
|||
.spectrum-Tabs-item {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
.spectrum-Tabs-item.is-selected {
|
||||
.spectrum-Tabs-item.is-selected,
|
||||
.spectrum-Tabs-item:hover {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<style>
|
||||
.spectrum-Tags-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,3 +5,13 @@
|
|||
<div class="spectrum-Tags" role="list" aria-label="list">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.spectrum-Tags {
|
||||
margin-top: -8px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
.spectrum-Tags :global(.spectrum-Tags-item) {
|
||||
margin: 8px 0 0 4px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,3 +15,9 @@
|
|||
>
|
||||
<slot />
|
||||
</h1>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-family: var(--font-accent);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,12 +40,15 @@
|
|||
--rounded-medium: 8px;
|
||||
--rounded-large: 16px;
|
||||
|
||||
--font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
|
||||
--font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
--font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
--font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
|
||||
--font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
|
||||
monospace;
|
||||
--spectrum-alias-body-text-font-family: var(--font-sans);
|
||||
|
||||
font-size: 16px;
|
||||
--font-size-xs: 0.75rem;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st0{fill:#000000;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
.st2{fill:#4285F4;}
|
||||
</style>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
|
@ -87,7 +87,7 @@
|
|||
"shortid": "2.2.15",
|
||||
"svelte-dnd-action": "^0.9.8",
|
||||
"svelte-loading-spinners": "^0.1.1",
|
||||
"svelte-portal": "0.1.0",
|
||||
"svelte-portal": "1.0.0",
|
||||
"uuid": "8.3.1",
|
||||
"yup": "0.29.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,11 +11,8 @@
|
|||
|
||||
<div class="banner-container" />
|
||||
<BannerDisplay />
|
||||
|
||||
<NotificationDisplay />
|
||||
|
||||
<LicensingOverlays />
|
||||
|
||||
<Router {routes} config={{ queryHandler }} />
|
||||
<div class="modal-container" />
|
||||
<HelpIcon />
|
||||
|
|
|
|||
|
|
@ -218,7 +218,6 @@
|
|||
}
|
||||
|
||||
label {
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
ProgressCircle,
|
||||
Layout,
|
||||
Body,
|
||||
Icon,
|
||||
} from "@budibase/bbui"
|
||||
import { auth, apps } from "stores/portal"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
|
|
@ -56,85 +57,76 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="lock-status">
|
||||
{#if lockedBy}
|
||||
<Button
|
||||
quiet
|
||||
secondary
|
||||
icon="LockClosed"
|
||||
{#if lockedBy}
|
||||
<div class="lock-status">
|
||||
<Icon
|
||||
name="LockClosed"
|
||||
hoverable
|
||||
size={buttonSize}
|
||||
on:click={() => {
|
||||
appLockModal.show()
|
||||
}}
|
||||
>
|
||||
<span class="lock-status-text">
|
||||
{lockedByHeading}
|
||||
</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#key app}
|
||||
<div>
|
||||
<Modal bind:this={appLockModal}>
|
||||
<ModalContent
|
||||
title={lockedByHeading}
|
||||
dataCy={"app-lock-modal"}
|
||||
showConfirmButton={false}
|
||||
showCancelButton={false}
|
||||
>
|
||||
<Layout noPadding>
|
||||
<Body size="S">
|
||||
Apps are locked to prevent work from being lost from overlapping
|
||||
changes between your team.
|
||||
</Body>
|
||||
{#if lockedByYou && getExpiryDuration(app) > 0}
|
||||
<span class="lock-expiry-body">
|
||||
{processStringSync(
|
||||
"This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
|
||||
{
|
||||
time: getExpiryDuration(app),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
{/if}
|
||||
<div class="lock-modal-actions">
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
secondary
|
||||
quiet={lockedBy && lockedByYou}
|
||||
disabled={processing}
|
||||
on:click={() => {
|
||||
appLockModal.hide()
|
||||
}}
|
||||
>
|
||||
<span class="cancel"
|
||||
>{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
|
||||
>
|
||||
</Button>
|
||||
{#if lockedByYou}
|
||||
<Button
|
||||
secondary
|
||||
disabled={processing}
|
||||
on:click={() => {
|
||||
releaseLock()
|
||||
appLockModal.hide()
|
||||
}}
|
||||
>
|
||||
{#if processing}
|
||||
<ProgressCircle overBackground={true} size="S" />
|
||||
{:else}
|
||||
<span class="unlock">Release Lock</span>
|
||||
{/if}
|
||||
</Button>
|
||||
{/if}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
/>
|
||||
</div>
|
||||
{/key}
|
||||
{/if}
|
||||
|
||||
<Modal bind:this={appLockModal}>
|
||||
<ModalContent
|
||||
title={lockedByHeading}
|
||||
dataCy={"app-lock-modal"}
|
||||
showConfirmButton={false}
|
||||
showCancelButton={false}
|
||||
>
|
||||
<Layout noPadding>
|
||||
<Body size="S">
|
||||
Apps are locked to prevent work being lost from overlapping changes
|
||||
between your team.
|
||||
</Body>
|
||||
{#if lockedByYou && getExpiryDuration(app) > 0}
|
||||
<span class="lock-expiry-body">
|
||||
{processStringSync(
|
||||
"This lock will expire in {{ duration time 'millisecond' }} from now.",
|
||||
{
|
||||
time: getExpiryDuration(app),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
{/if}
|
||||
<div class="lock-modal-actions">
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
secondary
|
||||
quiet={lockedBy && lockedByYou}
|
||||
disabled={processing}
|
||||
on:click={() => {
|
||||
appLockModal.hide()
|
||||
}}
|
||||
>
|
||||
<span class="cancel"
|
||||
>{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
|
||||
>
|
||||
</Button>
|
||||
{#if lockedByYou}
|
||||
<Button
|
||||
cta
|
||||
disabled={processing}
|
||||
on:click={() => {
|
||||
releaseLock()
|
||||
appLockModal.hide()
|
||||
}}
|
||||
>
|
||||
{#if processing}
|
||||
<ProgressCircle overBackground={true} size="S" />
|
||||
{:else}
|
||||
<span class="unlock">Release Lock</span>
|
||||
{/if}
|
||||
</Button>
|
||||
{/if}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.lock-modal-actions {
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
div :global(.CodeMirror) {
|
||||
height: var(--code-mirror-height);
|
||||
min-height: var(--code-mirror-height);
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.3;
|
||||
border: var(--spectrum-alias-border-size-thin) solid;
|
||||
border-color: var(--spectrum-alias-border-color);
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
ActionMenu,
|
||||
Checkbox,
|
||||
MenuItem,
|
||||
Heading,
|
||||
ProgressCircle,
|
||||
} from "@budibase/bbui"
|
||||
import { admin } from "stores/portal"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let width = window.innerWidth
|
||||
$: side = width < 500 ? "right" : "left"
|
||||
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
if (entries?.[0]) {
|
||||
width = entries[0].contentRect?.width
|
||||
}
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
const doc = document.documentElement
|
||||
resizeObserver.observe(doc)
|
||||
|
||||
return () => {
|
||||
resizeObserver.unobserve(doc)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<ActionMenu align={side}>
|
||||
<div slot="control" class="icon">
|
||||
<ProgressCircle size="S" value={$admin.onboardingProgress} />
|
||||
</div>
|
||||
<MenuItem disabled>
|
||||
<header class="item">
|
||||
<Heading size="XXS">Get Started Checklist</Heading>
|
||||
<ProgressCircle size="S" value={$admin.onboardingProgress} />
|
||||
</header>
|
||||
</MenuItem>
|
||||
{#each Object.keys($admin.checklist) as checklistItem, idx}
|
||||
<MenuItem>
|
||||
<div
|
||||
class="item"
|
||||
on:click={() => $goto($admin.checklist[checklistItem].link)}
|
||||
>
|
||||
<span>{idx + 1}. {$admin.checklist[checklistItem].label}</span>
|
||||
<Checkbox value={$admin.checklist[checklistItem].checked} />
|
||||
</div>
|
||||
</MenuItem>
|
||||
{/each}
|
||||
</ActionMenu>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 175px 20px;
|
||||
}
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +1,46 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
import { Icon, Modal } from "@budibase/bbui"
|
||||
import ChooseIconModal from "components/start/ChooseIconModal.svelte"
|
||||
|
||||
export let name
|
||||
export let size
|
||||
export let size = "M"
|
||||
export let app
|
||||
export let color
|
||||
export let autoSave = false
|
||||
|
||||
let iconModal
|
||||
let modal
|
||||
</script>
|
||||
|
||||
<div class="editable-icon">
|
||||
<div
|
||||
class="edit-hover"
|
||||
on:click={() => {
|
||||
iconModal.show()
|
||||
}}
|
||||
>
|
||||
<Icon name={"Edit"} size={"L"} />
|
||||
<div class="hover" on:click={modal.show}>
|
||||
<Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
|
||||
</div>
|
||||
<div class="app-icon">
|
||||
<Icon {name} {size} />
|
||||
<div class="normal">
|
||||
<Icon {name} {size} {color} />
|
||||
</div>
|
||||
</div>
|
||||
<ChooseIconModal {app} bind:this={iconModal} />
|
||||
|
||||
<Modal bind:this={modal}>
|
||||
<ChooseIconModal {name} {color} {app} {autoSave} on:change />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.editable-icon:hover .app-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
.editable-icon {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.editable-icon:hover .edit-hover {
|
||||
opacity: 1;
|
||||
.normal {
|
||||
display: block;
|
||||
}
|
||||
.edit-hover {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
.hover {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
/* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
|
||||
}
|
||||
.editable-icon:hover .normal {
|
||||
display: none;
|
||||
}
|
||||
.editable-icon:hover .hover {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { Select } from "@budibase/bbui"
|
||||
import { roles } from "stores/backend"
|
||||
import { Constants, RoleUtils } from "@budibase/frontend-core"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let value
|
||||
export let error
|
||||
|
|
@ -9,26 +10,62 @@
|
|||
export let autoWidth = false
|
||||
export let quiet = false
|
||||
export let allowPublic = true
|
||||
export let allowRemove = false
|
||||
|
||||
$: options = getOptions($roles, allowPublic)
|
||||
const dispatch = createEventDispatcher()
|
||||
const RemoveID = "remove"
|
||||
|
||||
$: options = getOptions($roles, allowPublic, allowRemove)
|
||||
|
||||
const getOptions = (roles, allowPublic) => {
|
||||
if (allowRemove) {
|
||||
roles = [
|
||||
...roles,
|
||||
{
|
||||
_id: RemoveID,
|
||||
name: "Remove",
|
||||
},
|
||||
]
|
||||
}
|
||||
if (allowPublic) {
|
||||
return roles
|
||||
}
|
||||
return roles.filter(role => role._id !== Constants.Roles.PUBLIC)
|
||||
}
|
||||
|
||||
const getColor = role => {
|
||||
if (allowRemove && role._id === RemoveID) {
|
||||
return null
|
||||
}
|
||||
return RoleUtils.getRoleColour(role._id)
|
||||
}
|
||||
|
||||
const getIcon = role => {
|
||||
if (allowRemove && role._id === RemoveID) {
|
||||
return "Close"
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const onChange = e => {
|
||||
if (allowRemove && e.detail === RemoveID) {
|
||||
dispatch("remove")
|
||||
} else {
|
||||
dispatch("change", e.detail)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Select
|
||||
{autoWidth}
|
||||
{quiet}
|
||||
bind:value
|
||||
on:change
|
||||
on:change={onChange}
|
||||
{options}
|
||||
getOptionLabel={role => role.name}
|
||||
getOptionValue={role => role._id}
|
||||
getOptionColour={role => RoleUtils.getRoleColour(role._id)}
|
||||
getOptionColour={getColor}
|
||||
getOptionIcon={getIcon}
|
||||
{placeholder}
|
||||
{error}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,128 +1,110 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Detail,
|
||||
Heading,
|
||||
Button,
|
||||
Modal,
|
||||
ActionGroup,
|
||||
ActionButton,
|
||||
} from "@budibase/bbui"
|
||||
import { Layout, Detail, Button, Modal } from "@budibase/bbui"
|
||||
import TemplateCard from "components/common/TemplateCard.svelte"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import { licensing } from "stores/portal"
|
||||
import { Content, SideNav, SideNavItem } from "components/portal/page"
|
||||
|
||||
export let templates
|
||||
|
||||
let selectedTemplateCategory
|
||||
let selectedCategory
|
||||
let creationModal
|
||||
let template
|
||||
|
||||
const groupTemplatesByCategory = (templates, categoryFilter) => {
|
||||
let grouped = templates.reduce((acc, template) => {
|
||||
if (
|
||||
typeof categoryFilter === "string" &&
|
||||
[categoryFilter].indexOf(template.category) < 0
|
||||
) {
|
||||
return acc
|
||||
$: categories = getCategories(templates)
|
||||
$: filteredCategories = getFilteredCategories(categories, selectedCategory)
|
||||
|
||||
const getCategories = templates => {
|
||||
let categories = {}
|
||||
templates?.forEach(template => {
|
||||
if (!categories[template.category]) {
|
||||
categories[template.category] = []
|
||||
}
|
||||
|
||||
acc[template.category] = !acc[template.category]
|
||||
? []
|
||||
: acc[template.category]
|
||||
acc[template.category].push(template)
|
||||
|
||||
return acc
|
||||
}, {})
|
||||
return grouped
|
||||
categories[template.category].push(template)
|
||||
})
|
||||
categories = Object.entries(categories).map(
|
||||
([category, categoryTemplates]) => {
|
||||
return {
|
||||
name: category,
|
||||
templates: categoryTemplates,
|
||||
}
|
||||
}
|
||||
)
|
||||
categories.sort((a, b) => {
|
||||
return a.name < b.name ? -1 : 1
|
||||
})
|
||||
return categories
|
||||
}
|
||||
|
||||
$: filteredTemplates = groupTemplatesByCategory(
|
||||
templates,
|
||||
selectedTemplateCategory
|
||||
)
|
||||
|
||||
$: filteredTemplateCategories = filteredTemplates
|
||||
? Object.keys(filteredTemplates).sort()
|
||||
: []
|
||||
|
||||
$: templateCategories = templates
|
||||
? Object.keys(groupTemplatesByCategory(templates)).sort()
|
||||
: []
|
||||
const getFilteredCategories = (categories, selectedCategory) => {
|
||||
if (!selectedCategory) {
|
||||
return categories
|
||||
}
|
||||
return categories.filter(x => x.name === selectedCategory)
|
||||
}
|
||||
|
||||
const stopAppCreation = () => {
|
||||
template = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="template-header">
|
||||
<Layout noPadding gap="S">
|
||||
<Heading size="S">Templates</Heading>
|
||||
<div class="template-category-filters spectrum-ActionGroup">
|
||||
<ActionGroup>
|
||||
<ActionButton
|
||||
selected={!selectedTemplateCategory}
|
||||
on:click={() => {
|
||||
selectedTemplateCategory = null
|
||||
}}
|
||||
>
|
||||
All
|
||||
</ActionButton>
|
||||
{#each templateCategories as templateCategoryKey}
|
||||
<ActionButton
|
||||
dataCy={templateCategoryKey}
|
||||
selected={templateCategoryKey == selectedTemplateCategory}
|
||||
on:click={() => {
|
||||
selectedTemplateCategory = templateCategoryKey
|
||||
}}
|
||||
>
|
||||
{templateCategoryKey}
|
||||
</ActionButton>
|
||||
{/each}
|
||||
</ActionGroup>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
<div class="template-categories">
|
||||
<Layout gap="XL" noPadding>
|
||||
{#each filteredTemplateCategories as templateCategoryKey}
|
||||
<div class="template-category" data-cy={templateCategoryKey}>
|
||||
<Detail size="M">{templateCategoryKey}</Detail>
|
||||
<div class="template-grid">
|
||||
{#each filteredTemplates[templateCategoryKey] as templateEntry}
|
||||
<TemplateCard
|
||||
name={templateEntry.name}
|
||||
imageSrc={templateEntry.image}
|
||||
backgroundColour={templateEntry.background}
|
||||
icon={templateEntry.icon}
|
||||
>
|
||||
{#if !($licensing?.usageMetrics?.apps >= 100)}
|
||||
<Button
|
||||
cta
|
||||
on:click={() => {
|
||||
template = templateEntry
|
||||
creationModal.show()
|
||||
}}
|
||||
>
|
||||
Use template
|
||||
</Button>
|
||||
{/if}
|
||||
<a
|
||||
href={templateEntry.url}
|
||||
target="_blank"
|
||||
class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
|
||||
on:click|stopPropagation
|
||||
<Content>
|
||||
<div slot="side-nav">
|
||||
<SideNav>
|
||||
<SideNavItem
|
||||
on:click={() => (selectedCategory = null)}
|
||||
text="All"
|
||||
active={selectedCategory == null}
|
||||
/>
|
||||
{#each categories as category}
|
||||
<SideNavItem
|
||||
on:click={() => (selectedCategory = category.name)}
|
||||
text={category.name}
|
||||
active={selectedCategory === category.name}
|
||||
/>
|
||||
{/each}
|
||||
</SideNav>
|
||||
</div>
|
||||
<div class="template-categories">
|
||||
<Layout gap="XL" noPadding>
|
||||
{#each filteredCategories as category}
|
||||
<div class="template-category" data-cy={category.name}>
|
||||
<Detail size="M">{category.name}</Detail>
|
||||
<div class="template-grid">
|
||||
{#each category.templates as templateEntry}
|
||||
<TemplateCard
|
||||
name={templateEntry.name}
|
||||
imageSrc={templateEntry.image}
|
||||
backgroundColour={templateEntry.background}
|
||||
icon={templateEntry.icon}
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</TemplateCard>
|
||||
{/each}
|
||||
{#if !($licensing?.usageMetrics?.apps >= 100)}
|
||||
<Button
|
||||
cta
|
||||
on:click={() => {
|
||||
template = templateEntry
|
||||
creationModal.show()
|
||||
}}
|
||||
>
|
||||
Use template
|
||||
</Button>
|
||||
{/if}
|
||||
<a
|
||||
href={templateEntry.url}
|
||||
target="_blank"
|
||||
class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
|
||||
on:click|stopPropagation
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</TemplateCard>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<Modal
|
||||
bind:this={creationModal}
|
||||
|
|
|
|||
|
|
@ -469,7 +469,7 @@
|
|||
}
|
||||
|
||||
.binding__type {
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono);
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
border-radius: var(--border-radius-s);
|
||||
padding: 2px 4px;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
dummy.select()
|
||||
document.execCommand("copy")
|
||||
document.body.removeChild(dummy)
|
||||
notifications.success(`URL copied to clipboard`)
|
||||
notifications.success(`Copied to clipboard`)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -57,15 +57,13 @@
|
|||
<Button cta on:click={publishModal.show}>Publish</Button>
|
||||
<Modal bind:this={publishModal}>
|
||||
<ModalContent
|
||||
title="Publish to Production"
|
||||
title="Publish to production"
|
||||
confirmText="Publish"
|
||||
onConfirm={publishApp}
|
||||
dataCy={"deploy-app-modal"}
|
||||
>
|
||||
<span
|
||||
>The changes you have made will be published to the production version of
|
||||
the application.</span
|
||||
>
|
||||
The changes you have made will be published to the production version of the
|
||||
application.
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@
|
|||
</ConfirmDialog>
|
||||
|
||||
<div class="buttons">
|
||||
<Button on:click={previewApp} newStyles secondary>Preview</Button>
|
||||
<Button on:click={previewApp} secondary>Preview</Button>
|
||||
<DeployModal onOk={completePublish} />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@
|
|||
div :global(.CodeMirror) {
|
||||
height: var(--code-mirror-height) !important;
|
||||
border-radius: var(--border-radius-s);
|
||||
font-family: monospace !important;
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,106 +0,0 @@
|
|||
<script>
|
||||
import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
export let history
|
||||
export let appId
|
||||
export let close
|
||||
const STOPPED_ERROR = "stopped_error"
|
||||
|
||||
$: exists = $automationStore.automations?.find(
|
||||
auto => auto._id === history?.automationId
|
||||
)
|
||||
</script>
|
||||
|
||||
{#if history}
|
||||
<div class="body">
|
||||
<div class="top">
|
||||
<div class="controls">
|
||||
<StatusRenderer value={history.status} />
|
||||
<ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
|
||||
</div>
|
||||
</div>
|
||||
<Layout paddingY="XL" paddingX="XL" gap="S">
|
||||
<div class="icon">
|
||||
<Icon name="Clock" />
|
||||
<DateTimeRenderer value={history.createdAt} />
|
||||
</div>
|
||||
<div class="icon">
|
||||
<Icon name="JourneyVoyager" />
|
||||
<div>{history.automationName}</div>
|
||||
</div>
|
||||
{#if history.status === STOPPED_ERROR}
|
||||
<div class="cron-error">
|
||||
<InlineAlert
|
||||
type="error"
|
||||
header="CRON automation disabled"
|
||||
message="Fix the error and re-publish your app to re-activate."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
{#if exists}
|
||||
<ActionButton
|
||||
icon="Edit"
|
||||
fullWidth={false}
|
||||
on:click={() =>
|
||||
$goto(`../../../app/${appId}/automate/${history.automationId}`)}
|
||||
>Edit automation</ActionButton
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<div class="bottom">
|
||||
{#key history}
|
||||
<TestDisplay testResults={history} width="100%" />
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div>No details found</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.body {
|
||||
right: 0;
|
||||
background-color: var(--background);
|
||||
border-left: var(--border-light);
|
||||
width: 420px;
|
||||
height: calc(100vh - 240px);
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding: var(--spacing-m) 0 var(--spacing-m) 0;
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: var(--border-light);
|
||||
padding-top: calc(var(--spacing-xl) * 2);
|
||||
padding-bottom: calc(var(--spacing-xl) * 2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 0 var(--spacing-l) 0 var(--spacing-l);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
|
||||
.cron-error {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
export let value
|
||||
|
||||
$: isError = !value || value.toLowerCase() === "error"
|
||||
$: isStoppedError = value?.toLowerCase() === "stopped_error"
|
||||
$: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
|
||||
$: status = getStatus(isError, isStopped)
|
||||
|
||||
function getStatus(error, stopped) {
|
||||
if (error) {
|
||||
return { color: "var(--red)", message: "Error", icon: "Alert" }
|
||||
} else if (stopped) {
|
||||
return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
|
||||
} else {
|
||||
return {
|
||||
color: "var(--green)",
|
||||
message: "Success",
|
||||
icon: "CheckmarkCircle",
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="cell">
|
||||
<Icon color={status.color} name={status.icon} />
|
||||
<div style={`color: ${status.color};`}>
|
||||
{status.message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
|
||||
export let url
|
||||
export let text
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a href={url}>
|
||||
{text}
|
||||
</a>
|
||||
<Icon name="ChevronRight" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
gap: var(--spacing-m);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
div :global(.spectrum-Icon),
|
||||
a {
|
||||
color: inherit;
|
||||
transition: color 130ms ease-out;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
div :global(> *:last-child .spectrum-Icon) {
|
||||
display: none;
|
||||
}
|
||||
div :global(> *:last-child) {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
export let narrow = false
|
||||
</script>
|
||||
|
||||
<div class="content">
|
||||
<div class="side-nav">
|
||||
<slot name="side-nav" />
|
||||
</div>
|
||||
<div class="main" class:narrow>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 40px;
|
||||
}
|
||||
.side-nav {
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.main.narrow {
|
||||
max-width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<script>
|
||||
import { Heading } from "@budibase/bbui"
|
||||
|
||||
export let title
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<slot name="icon" />
|
||||
<Heading size="L">{title}</Heading>
|
||||
<div class="buttons">
|
||||
<slot name="buttons" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
.header :global(.spectrum-Heading) {
|
||||
flex: 1 1 auto;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
.buttons :global(> div) {
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let title
|
||||
</script>
|
||||
|
||||
<div class="side-nav">
|
||||
{#if title}
|
||||
<div class="title">{title}</div>
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.side-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
}
|
||||
.title {
|
||||
margin-left: var(--spacing-m);
|
||||
font-size: 12px;
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export let text
|
||||
export let url
|
||||
export let active = false
|
||||
</script>
|
||||
|
||||
<a on:click href={url} class:active>
|
||||
{text}
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
border-radius: 4px;
|
||||
transition: background 130ms ease-out;
|
||||
}
|
||||
.active,
|
||||
a:hover {
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export { default as Breadcrumb } from "./Breadcrumb.svelte"
|
||||
export { default as Breadcrumbs } from "./Breadcrumbs.svelte"
|
||||
export { default as Header } from "./Header.svelte"
|
||||
export { default as Content } from "./Content.svelte"
|
||||
export { default as SideNavItem } from "./SideNavItem.svelte"
|
||||
export { default as SideNav } from "./SideNav.svelte"
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { ModalContent, Body, notifications } from "@budibase/bbui"
|
||||
import { ModalContent } from "@budibase/bbui"
|
||||
import { Body, notifications } from "@budibase/bbui"
|
||||
import { auth } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import CopyInput from "components/common/inputs/CopyInput.svelte"
|
||||
|
|
@ -27,15 +28,13 @@
|
|||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Developer information"
|
||||
showConfirmButton={false}
|
||||
showSecondaryButton={true}
|
||||
secondaryButtonText="Re-generate key"
|
||||
title="API Key"
|
||||
showSecondaryButton
|
||||
secondaryButtonText="Regenerate key"
|
||||
secondaryAction={generateAPIKey}
|
||||
showCancelButton={false}
|
||||
confirmText="Close"
|
||||
>
|
||||
<Body size="S">
|
||||
You can find information about your developer account here, such as the API
|
||||
key used to access the Budibase API.
|
||||
</Body>
|
||||
<CopyInput bind:value={apiKey} label="API key" />
|
||||
<Body size="S">Your API key for accessing the Budibase public API:</Body>
|
||||
<CopyInput bind:value={apiKey} />
|
||||
</ModalContent>
|
||||
|
|
@ -18,11 +18,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Update user information"
|
||||
confirmText="Update information"
|
||||
onConfirm={updateInfo}
|
||||
>
|
||||
<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
|
||||
<Body size="S">
|
||||
Personalise the platform by adding your first name and last name.
|
||||
</Body>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import { ModalContent } from "@budibase/bbui"
|
||||
import { Label, Select } from "@budibase/bbui"
|
||||
import { themeStore } from "builderStore"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
</script>
|
||||
|
||||
<ModalContent title="Theme">
|
||||
<Select
|
||||
options={Constants.Themes}
|
||||
bind:value={$themeStore.theme}
|
||||
placeholder={null}
|
||||
getOptionLabel={x => x.name}
|
||||
getOptionValue={x => x.class}
|
||||
/>
|
||||
</ModalContent>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Heading, Button, Icon } from "@budibase/bbui"
|
||||
import { Heading, Body, Button, Icon } from "@budibase/bbui"
|
||||
import AppLockModal from "../common/AppLockModal.svelte"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
|
||||
|
|
@ -8,78 +8,109 @@
|
|||
export let appOverview
|
||||
</script>
|
||||
|
||||
<div class="title" data-cy={`${app.devId}`}>
|
||||
<div>
|
||||
<div class="app-icon" style="color: {app.icon?.color || ''}">
|
||||
<Icon size="XL" name={app.icon?.name || "Apps"} />
|
||||
<div class="app-row">
|
||||
<div class="header">
|
||||
<div class="title" data-cy={`${app.devId}`}>
|
||||
<div class="app-icon">
|
||||
<Icon
|
||||
size="L"
|
||||
name={app.icon?.name || "Apps"}
|
||||
color={app.icon?.color}
|
||||
/>
|
||||
</div>
|
||||
<div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
|
||||
<Heading size="S">
|
||||
{app.name}
|
||||
</Heading>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
|
||||
<Heading size="XS">
|
||||
{app.name}
|
||||
</Heading>
|
||||
|
||||
<div class="updated">
|
||||
{#if app.updatedAt}
|
||||
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
|
||||
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
|
||||
})}
|
||||
{:else}
|
||||
Never updated
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
{#if app.updatedAt}
|
||||
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
|
||||
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
|
||||
})}
|
||||
{:else}
|
||||
Never updated
|
||||
{/if}
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<span><AppLockModal {app} buttonSize="M" /></span>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<div class="app-status">
|
||||
{#if app.deployed}
|
||||
<Icon name="Globe" disabled={false} />
|
||||
Published
|
||||
{:else}
|
||||
<Icon name="GlobeStrike" disabled={true} />
|
||||
<span class="disabled"> Unpublished </span>
|
||||
{/if}
|
||||
|
||||
<div class="title app-status" class:deployed={app.deployed}>
|
||||
<Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
|
||||
<Body size="S">{`${window.origin}/app${app.url}`}</Body>
|
||||
</div>
|
||||
</div>
|
||||
<div data-cy={`row_actions_${app.appId}`}>
|
||||
<div class="app-row-actions">
|
||||
<Button size="S" secondary newStyles on:click={() => appOverview(app)}>
|
||||
Manage
|
||||
</Button>
|
||||
<Button
|
||||
size="S"
|
||||
primary
|
||||
newStyles
|
||||
disabled={app.lockedOther}
|
||||
on:click={() => editApp(app)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
|
||||
<div data-cy={`row_actions_${app.appId}`}>
|
||||
<div class="app-row-actions">
|
||||
<Button
|
||||
size="S"
|
||||
primary
|
||||
disabled={app.lockedOther}
|
||||
on:click={() => editApp(app)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button size="S" secondary on:click={() => appOverview(app)}>
|
||||
Manage
|
||||
</Button>
|
||||
<AppLockModal {app} buttonSize="M" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div.title,
|
||||
div.title > div {
|
||||
.app-row {
|
||||
background: var(--background);
|
||||
padding: 24px 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.app-row-actions {
|
||||
grid-gap: var(--spacing-s);
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.updated {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
}
|
||||
|
||||
.title,
|
||||
.app-status {
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-s);
|
||||
grid-template-columns: 24px 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.app-status span.disabled {
|
||||
opacity: 0.3;
|
||||
|
||||
.title :global(.spectrum-Heading),
|
||||
.title :global(.spectrum-Icon),
|
||||
.title :global(.spectrum-Body) {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
|
||||
.app-status:not(.deployed) :global(.spectrum-Icon),
|
||||
.app-status:not(.deployed) :global(.spectrum-Body) {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
|
||||
.app-row-actions {
|
||||
gap: var(--spacing-m);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
.name {
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -88,7 +119,6 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: calc(1.5 * var(--spacing-xl));
|
||||
}
|
||||
.title :global(h1:hover) {
|
||||
color: var(--spectrum-global-color-blue-600);
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<script>
|
||||
import {
|
||||
ModalContent,
|
||||
Modal,
|
||||
Icon,
|
||||
ColorPicker,
|
||||
Label,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import { apps } from "stores/portal"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let app
|
||||
let modal
|
||||
$: selectedIcon = app?.icon?.name || "Apps"
|
||||
$: selectedColor = app?.icon?.color
|
||||
export let name
|
||||
export let color
|
||||
export let autoSave = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let iconsList = [
|
||||
"Apps",
|
||||
|
|
@ -40,30 +42,15 @@
|
|||
"GraphBarHorizontal",
|
||||
"Demographic",
|
||||
]
|
||||
export const show = () => {
|
||||
modal.show()
|
||||
}
|
||||
export const hide = () => {
|
||||
modal.hide()
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
selectedIcon = ""
|
||||
selectedColor = ""
|
||||
hide()
|
||||
}
|
||||
|
||||
const changeColor = val => {
|
||||
selectedColor = val
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
if (!autoSave) {
|
||||
dispatch("change", { color, name })
|
||||
return
|
||||
}
|
||||
try {
|
||||
await apps.update(app.instance._id, {
|
||||
icon: {
|
||||
name: selectedIcon,
|
||||
color: selectedColor,
|
||||
},
|
||||
icon: { name, color },
|
||||
})
|
||||
} catch (error) {
|
||||
notifications.error("Error updating app")
|
||||
|
|
@ -71,41 +58,32 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:this={modal} on:hide={onCancel}>
|
||||
<ModalContent
|
||||
title={"Edit Icon"}
|
||||
confirmText={"Save"}
|
||||
onConfirm={() => save()}
|
||||
>
|
||||
<div class="scrollable-icons">
|
||||
<div class="title-spacing">
|
||||
<Label>Select an icon</Label>
|
||||
</div>
|
||||
<div class="grid">
|
||||
{#each iconsList as item}
|
||||
<div
|
||||
class="icon-item"
|
||||
class:selected={item === selectedIcon}
|
||||
on:click={() => (selectedIcon = item)}
|
||||
>
|
||||
<Icon name={item} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
|
||||
<div class="scrollable-icons">
|
||||
<div class="title-spacing">
|
||||
<Label>Select an icon</Label>
|
||||
</div>
|
||||
<div class="color-selection">
|
||||
<div>
|
||||
<Label>Select a color</Label>
|
||||
</div>
|
||||
<div class="color-selection-item">
|
||||
<ColorPicker
|
||||
bind:value={selectedColor}
|
||||
on:change={e => changeColor(e.detail)}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid">
|
||||
{#each iconsList as item}
|
||||
<div
|
||||
class="icon-item"
|
||||
class:selected={item === name}
|
||||
on:click={() => (name = item)}
|
||||
>
|
||||
<Icon name={item} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</div>
|
||||
<div class="color-selection">
|
||||
<div>
|
||||
<Label>Select a color</Label>
|
||||
</div>
|
||||
<div class="color-selection-item">
|
||||
<ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
|
||||
</div>
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.scrollable-icons {
|
||||
|
|
|
|||
|
|
@ -138,6 +138,7 @@
|
|||
}
|
||||
|
||||
$goto(`/builder/app/${createdApp.instance._id}`)
|
||||
// apps.load()
|
||||
} catch (error) {
|
||||
creating = false
|
||||
console.error(error)
|
||||
|
|
|
|||
|
|
@ -1,22 +1,29 @@
|
|||
<script>
|
||||
import { writable, get as svelteGet } from "svelte/store"
|
||||
import { notifications, Input, ModalContent, Body } from "@budibase/bbui"
|
||||
import {
|
||||
notifications,
|
||||
Input,
|
||||
ModalContent,
|
||||
Layout,
|
||||
Label,
|
||||
} from "@budibase/bbui"
|
||||
import { apps } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { createValidationStore } from "helpers/validation/yup"
|
||||
import * as appValidation from "helpers/validation/yup/app"
|
||||
import EditableIcon from "../common/EditableIcon.svelte"
|
||||
|
||||
export let app
|
||||
|
||||
const values = writable({ name: "", url: null })
|
||||
const validation = createValidationStore()
|
||||
$: validation.check($values)
|
||||
|
||||
onMount(async () => {
|
||||
$values.name = app.name
|
||||
$values.url = app.url
|
||||
setupValidation()
|
||||
const values = writable({
|
||||
name: app.name,
|
||||
url: app.url,
|
||||
iconName: app.icon?.name,
|
||||
iconColor: app.icon?.color,
|
||||
})
|
||||
const validation = createValidationStore()
|
||||
|
||||
$: validation.check($values)
|
||||
|
||||
const setupValidation = async () => {
|
||||
const applications = svelteGet(apps)
|
||||
|
|
@ -28,14 +35,14 @@
|
|||
|
||||
async function updateApp() {
|
||||
try {
|
||||
// Update App
|
||||
const body = {
|
||||
name: $values.name.trim(),
|
||||
}
|
||||
if ($values.url) {
|
||||
body.url = $values.url.trim()
|
||||
}
|
||||
await apps.update(app.instance._id, body)
|
||||
await apps.update(app.instance._id, {
|
||||
name: $values.name?.trim(),
|
||||
url: $values.url?.trim(),
|
||||
icon: {
|
||||
name: $values.iconName,
|
||||
color: $values.iconColor,
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
notifications.error("Error updating app")
|
||||
|
|
@ -68,15 +75,22 @@
|
|||
let resolvedUrl = resolveAppUrl(null, appName)
|
||||
tidyUrl(resolvedUrl)
|
||||
}
|
||||
|
||||
const updateIcon = e => {
|
||||
const { name, color } = e.detail
|
||||
$values.iconColor = color
|
||||
$values.iconName = name
|
||||
}
|
||||
|
||||
onMount(setupValidation)
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title={"Edit app"}
|
||||
confirmText={"Save"}
|
||||
title="Edit name and URL"
|
||||
confirmText="Save"
|
||||
onConfirm={updateApp}
|
||||
disabled={!$validation.valid}
|
||||
>
|
||||
<Body size="S">Update the name of your app.</Body>
|
||||
<Input
|
||||
bind:value={$values.name}
|
||||
error={$validation.touched.name && $validation.errors.name}
|
||||
|
|
@ -84,6 +98,16 @@
|
|||
on:change={nameToUrl($values.name)}
|
||||
label="Name"
|
||||
/>
|
||||
<Layout noPadding gap="XS">
|
||||
<Label>Icon</Label>
|
||||
<EditableIcon
|
||||
{app}
|
||||
size="XL"
|
||||
name={$values.iconName}
|
||||
color={$values.iconColor}
|
||||
on:change={updateIcon}
|
||||
/>
|
||||
</Layout>
|
||||
<Input
|
||||
bind:value={$values.url}
|
||||
error={$validation.touched.url && $validation.errors.url}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
<div class="header-actions">
|
||||
{#if secondaryDefined}
|
||||
<div>
|
||||
<Button newStyles secondary on:click={secondaryAction}
|
||||
<Button secondary on:click={secondaryAction}
|
||||
>{secondaryActionText}</Button
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ body {
|
|||
--grey-8: var(--spectrum-global-color-gray-800);
|
||||
--grey-9: var(--spectrum-global-color-gray-900);
|
||||
|
||||
font-family: var(--font-sans);
|
||||
color: var(--ink);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,32 +105,34 @@
|
|||
</MenuItem>
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(`../../portal/overview/${application}?tab=Access`)}
|
||||
$goto(`../../portal/overview/${application}/access`)}
|
||||
>
|
||||
Access
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(
|
||||
`../../portal/overview/${application}?tab=${encodeURIComponent(
|
||||
"Automation History"
|
||||
)}`
|
||||
)}
|
||||
$goto(`../../portal/overview/${application}/automation-history`)}
|
||||
>
|
||||
Automation history
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(`../../portal/overview/${application}?tab=Backups`)}
|
||||
$goto(`../../portal/overview/${application}/backups`)}
|
||||
>
|
||||
Backups
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(`../../portal/overview/${application}?tab=Settings`)}
|
||||
$goto(`../../portal/overview/${application}/name-and-url`)}
|
||||
>
|
||||
Settings
|
||||
Name and URL
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
on:click={() =>
|
||||
$goto(`../../portal/overview/${application}/version`)}
|
||||
>
|
||||
Version
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
<Heading size="XS">{$store.name || "App"}</Heading>
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@
|
|||
{bindings}
|
||||
/>
|
||||
{/each}
|
||||
<Button secondary newStyles on:click={() => $goto("../components")}>
|
||||
<Button secondary on:click={() => $goto("../components")}>
|
||||
View components
|
||||
</Button>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="container">
|
||||
<Slider min={0} max={3} step={1} value={index} on:change={onChange} />
|
||||
<div class="button" style="--radius: {customTheme.buttonBorderRadius};">
|
||||
<Button primary newStyles>Button</Button>
|
||||
<Button primary>Button</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
import { goto } from "@roxi/routify"
|
||||
import { AppStatus } from "constants"
|
||||
import { gradient } from "actions"
|
||||
import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
|
||||
import ProfileModal from "components/settings/ProfileModal.svelte"
|
||||
import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
import Spaceman from "assets/bb-space-man.svg"
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
|
||||
{#if $auth.user && loaded}
|
||||
<div class="container">
|
||||
<Page>
|
||||
<Page narrow>
|
||||
<div class="content">
|
||||
<Layout noPadding>
|
||||
<div class="header">
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
</Page>
|
||||
</div>
|
||||
<Modal bind:this={userInfoModal}>
|
||||
<UpdateUserInfoModal />
|
||||
<ProfileModal />
|
||||
</Modal>
|
||||
<Modal bind:this={changePasswordModal}>
|
||||
<ChangePasswordModal />
|
||||
|
|
@ -196,6 +196,11 @@
|
|||
.container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 80px;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,146 +1,93 @@
|
|||
<script>
|
||||
import { isActive, redirect, goto } from "@roxi/routify"
|
||||
import { isActive, redirect, goto, url } from "@roxi/routify"
|
||||
import {
|
||||
Icon,
|
||||
Avatar,
|
||||
Layout,
|
||||
SideNavigation as Navigation,
|
||||
SideNavigationItem as Item,
|
||||
ActionMenu,
|
||||
MenuItem,
|
||||
Modal,
|
||||
clickOutside,
|
||||
notifications,
|
||||
Tabs,
|
||||
Tab,
|
||||
Button,
|
||||
} from "@budibase/bbui"
|
||||
import ConfigChecklist from "components/common/ConfigChecklist.svelte"
|
||||
import { organisation, auth, admin as adminStore } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
|
||||
import ProfileModal from "components/settings/ProfileModal.svelte"
|
||||
import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
|
||||
import UpdateAPIKeyModal from "components/settings/UpdateAPIKeyModal.svelte"
|
||||
import ThemeModal from "components/settings/ThemeModal.svelte"
|
||||
import APIKeyModal from "components/settings/APIKeyModal.svelte"
|
||||
import Logo from "assets/bb-emblem.svg"
|
||||
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||
|
||||
let loaded = false
|
||||
let userInfoModal
|
||||
let changePasswordModal
|
||||
let themeModal
|
||||
let profileModal
|
||||
let updatePasswordModal
|
||||
let apiKeyModal
|
||||
let mobileMenuVisible = false
|
||||
let activeTab = "Apps"
|
||||
|
||||
$: menu = buildMenu($auth.isAdmin)
|
||||
$: $url(), updateActiveTab()
|
||||
|
||||
const updateActiveTab = () => {
|
||||
for (let entry of menu) {
|
||||
if ($isActive(entry.href)) {
|
||||
if (activeTab !== entry.title) {
|
||||
activeTab = entry.title
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const buildMenu = admin => {
|
||||
// Standard user and developer pages
|
||||
let menu = [
|
||||
{
|
||||
title: "Apps",
|
||||
href: "/builder/portal/apps",
|
||||
},
|
||||
{
|
||||
title: "Plugins",
|
||||
href: "/builder/portal/plugins",
|
||||
},
|
||||
]
|
||||
|
||||
// Admin only pages
|
||||
if (admin) {
|
||||
menu = menu.concat([
|
||||
menu = [
|
||||
{
|
||||
title: "Apps",
|
||||
href: "/builder/portal/apps",
|
||||
},
|
||||
{
|
||||
title: "Users",
|
||||
href: "/builder/portal/manage/users",
|
||||
heading: "Manage",
|
||||
href: "/builder/portal/users/users",
|
||||
},
|
||||
isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)
|
||||
? {
|
||||
title: "User Groups",
|
||||
href: "/builder/portal/manage/groups",
|
||||
}
|
||||
: undefined,
|
||||
{ title: "Auth", href: "/builder/portal/manage/auth" },
|
||||
{ title: "Email", href: "/builder/portal/manage/email" },
|
||||
{
|
||||
title: "Plugins",
|
||||
href: "/builder/portal/manage/plugins",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Organisation",
|
||||
href: "/builder/portal/settings/organisation",
|
||||
heading: "Settings",
|
||||
href: "/builder/portal/plugins",
|
||||
},
|
||||
{
|
||||
title: "Theming",
|
||||
href: "/builder/portal/settings/theming",
|
||||
title: "Settings",
|
||||
href: "/builder/portal/settings",
|
||||
},
|
||||
])
|
||||
|
||||
if (!$adminStore.cloud) {
|
||||
menu = menu.concat([
|
||||
{
|
||||
title: "Update",
|
||||
href: "/builder/portal/settings/update",
|
||||
},
|
||||
])
|
||||
}
|
||||
} else {
|
||||
menu = menu.concat([
|
||||
{
|
||||
title: "Theming",
|
||||
href: "/builder/portal/settings/theming",
|
||||
heading: "Settings",
|
||||
},
|
||||
])
|
||||
]
|
||||
}
|
||||
|
||||
// add link to account portal if the user has access
|
||||
let accountSectionAdded = false
|
||||
|
||||
// link out to account-portal if account holder in cloud or always in self-host
|
||||
if ($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin)) {
|
||||
accountSectionAdded = true
|
||||
menu = menu.concat([
|
||||
{
|
||||
title: "Account",
|
||||
href: $adminStore.accountPortalUrl,
|
||||
heading: "Account",
|
||||
},
|
||||
])
|
||||
// Check if allowed access to account section
|
||||
if (
|
||||
isEnabled(TENANT_FEATURE_FLAGS.LICENSING) &&
|
||||
($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin))
|
||||
) {
|
||||
menu.push({
|
||||
title: "Account",
|
||||
href: "/builder/portal/account",
|
||||
})
|
||||
}
|
||||
|
||||
if (isEnabled(TENANT_FEATURE_FLAGS.LICENSING)) {
|
||||
// always show usage in self-host or cloud if licensing enabled
|
||||
menu = menu.concat([
|
||||
{
|
||||
title: "Usage",
|
||||
href: "/builder/portal/settings/usage",
|
||||
heading: accountSectionAdded ? "" : "Account",
|
||||
},
|
||||
])
|
||||
|
||||
// show the relevant hosting upgrade page
|
||||
if ($adminStore.cloud && $auth?.user?.accountPortalAccess) {
|
||||
menu = menu.concat([
|
||||
{
|
||||
title: "Upgrade",
|
||||
href: $adminStore.accountPortalUrl + "/portal/upgrade",
|
||||
},
|
||||
])
|
||||
} else if (!$adminStore.cloud && admin) {
|
||||
menu = menu.concat({
|
||||
title: "Upgrade",
|
||||
href: "/builder/portal/settings/upgrade",
|
||||
})
|
||||
}
|
||||
|
||||
// show the billing page to licensed account holders in cloud
|
||||
if (
|
||||
$auth?.user?.accountPortalAccess &&
|
||||
$auth.user.account.stripeCustomerId
|
||||
) {
|
||||
menu = menu.concat([
|
||||
{
|
||||
title: "Billing",
|
||||
href: $adminStore.accountPortalUrl + "/portal/billing",
|
||||
},
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
menu = menu.filter(item => !!item)
|
||||
return menu
|
||||
}
|
||||
|
||||
|
|
@ -174,39 +121,15 @@
|
|||
|
||||
{#if $auth.user && loaded}
|
||||
<div class="container">
|
||||
<div
|
||||
class="nav"
|
||||
class:visible={mobileMenuVisible}
|
||||
use:clickOutside={hideMobileMenu}
|
||||
>
|
||||
<Layout paddingX="L" paddingY="L">
|
||||
<div class="branding">
|
||||
<div class="name" on:click={() => $goto("./apps")}>
|
||||
<img src={$organisation?.logoUrl || Logo} alt="Logotype" />
|
||||
<span>{$organisation?.company || "Budibase"}</span>
|
||||
</div>
|
||||
<div class="onboarding">
|
||||
{#if $auth.user?.admin?.global}
|
||||
<ConfigChecklist />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<Navigation>
|
||||
{#each menu as { title, href, heading, badge }}
|
||||
<Item
|
||||
on:click={hideMobileMenu}
|
||||
selected={$isActive(href)}
|
||||
{href}
|
||||
{badge}
|
||||
{heading}>{title}</Item
|
||||
>
|
||||
{/each}
|
||||
</Navigation>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="nav">
|
||||
<div class="branding" on:click={() => $goto("./apps")}>
|
||||
<img src={Logo} alt="Logotype" />
|
||||
</div>
|
||||
<Tabs selected={activeTab}>
|
||||
{#each menu as { title, href }}
|
||||
<Tab {title} on:click={() => $goto(href)} />
|
||||
{/each}
|
||||
</Tabs>
|
||||
<div class="toolbar">
|
||||
<div class="mobile-toggle">
|
||||
<Icon hoverable name="ShowMenu" on:click={showMobileMenu} />
|
||||
|
|
@ -217,56 +140,73 @@
|
|||
alt={$organisation?.company || "Budibase"}
|
||||
/>
|
||||
</div>
|
||||
{#if !$adminStore.cloud && $auth.isAdmin}
|
||||
<Button cta on:click={() => $goto("/builder/portal/account/upgrade")}>
|
||||
Upgrade
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="user-dropdown">
|
||||
<ActionMenu align="right" dataCy="user-menu">
|
||||
<div slot="control" class="avatar">
|
||||
<Avatar
|
||||
size="M"
|
||||
size="L"
|
||||
initials={$auth.initials}
|
||||
url={$auth.user.pictureUrl}
|
||||
/>
|
||||
<Icon size="XL" name="ChevronDown" />
|
||||
</div>
|
||||
<MenuItem
|
||||
icon="UserEdit"
|
||||
on:click={() => userInfoModal.show()}
|
||||
dataCy={"user-info"}
|
||||
icon="Moon"
|
||||
on:click={() => themeModal.show()}
|
||||
dataCy="theme"
|
||||
>
|
||||
Update user information
|
||||
Theme
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon="UserEdit"
|
||||
on:click={() => profileModal.show()}
|
||||
dataCy="user-info"
|
||||
>
|
||||
My profile
|
||||
</MenuItem>
|
||||
{#if $auth.isBuilder}
|
||||
<MenuItem icon="Key" on:click={() => apiKeyModal.show()}>
|
||||
View API key
|
||||
</MenuItem>
|
||||
{/if}
|
||||
<MenuItem
|
||||
icon="LockClosed"
|
||||
on:click={() => changePasswordModal.show()}
|
||||
on:click={() => updatePasswordModal.show()}
|
||||
>
|
||||
Update password
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon="Key"
|
||||
on:click={() => apiKeyModal.show()}
|
||||
dataCy="api-key"
|
||||
>
|
||||
View API key
|
||||
</MenuItem>
|
||||
<MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
|
||||
Close developer mode
|
||||
</MenuItem>
|
||||
<MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}
|
||||
>Log out
|
||||
<MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}>
|
||||
Log out
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<Modal bind:this={userInfoModal}>
|
||||
<UpdateUserInfoModal />
|
||||
<Modal bind:this={themeModal}>
|
||||
<ThemeModal />
|
||||
</Modal>
|
||||
<Modal bind:this={changePasswordModal}>
|
||||
<Modal bind:this={profileModal}>
|
||||
<ProfileModal />
|
||||
</Modal>
|
||||
<Modal bind:this={updatePasswordModal}>
|
||||
<ChangePasswordModal />
|
||||
</Modal>
|
||||
<Modal bind:this={apiKeyModal}>
|
||||
<UpdateAPIKeyModal />
|
||||
<APIKeyModal />
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
|
|
@ -274,78 +214,69 @@
|
|||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
.nav {
|
||||
background: var(--background);
|
||||
border-right: var(--border-light);
|
||||
overflow: auto;
|
||||
flex: 0 0 auto;
|
||||
width: 250px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
border-bottom: var(--border-light);
|
||||
padding: 0 20px;
|
||||
gap: 24px;
|
||||
}
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
.nav :global(.spectrum-Tabs) {
|
||||
margin-bottom: -2px;
|
||||
padding: 7px 0;
|
||||
}
|
||||
.nav :global(.spectrum-Tabs-itemLabel) {
|
||||
font-weight: 600;
|
||||
}
|
||||
.branding {
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-s);
|
||||
grid-template-columns: auto auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.name {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-gap: var(--spacing-m);
|
||||
align-items: center;
|
||||
}
|
||||
.name:hover {
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
}
|
||||
.avatar {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
place-items: center;
|
||||
grid-gap: var(--spacing-xs);
|
||||
grid-gap: var(--spacing-s);
|
||||
}
|
||||
.avatar:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(110%);
|
||||
}
|
||||
.toolbar {
|
||||
background: var(--background);
|
||||
border-bottom: var(--border-light);
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: var(--spacing-m) calc(var(--spacing-xl) * 2);
|
||||
gap: 24px;
|
||||
}
|
||||
.mobile-toggle,
|
||||
.mobile-logo {
|
||||
display: none;
|
||||
}
|
||||
.user-dropdown {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 600;
|
||||
}
|
||||
.content {
|
||||
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<script>
|
||||
import { url, isActive } from "@roxi/routify"
|
||||
import { Page } from "@budibase/bbui"
|
||||
import { Content, SideNav, SideNavItem } from "components/portal/page"
|
||||
import { admin, auth } from "stores/portal"
|
||||
</script>
|
||||
|
||||
<Page narrow>
|
||||
<Content>
|
||||
<div slot="side-nav">
|
||||
<SideNav>
|
||||
<!-- Always show usage in self-host or cloud if licensing enabled-->
|
||||
<SideNavItem
|
||||
text="Usage"
|
||||
url={$url("./usage")}
|
||||
active={$isActive("./usage")}
|
||||
/>
|
||||
<!-- Show the relevant hosting upgrade page-->
|
||||
{#if $admin.cloud && $auth?.user?.accountPortalAccess}
|
||||
<SideNavItem
|
||||
text="Upgrade"
|
||||
url={$admin.accountPortalUrl + "/portal/upgrade"}
|
||||
/>
|
||||
{:else if !$admin.cloud && admin}
|
||||
<SideNavItem
|
||||
text="Upgrade"
|
||||
url={$url("./upgrade")}
|
||||
active={$isActive("./upgrade")}
|
||||
/>
|
||||
{/if}
|
||||
<!-- Show the billing page to licensed account holders in cloud -->
|
||||
{#if $auth?.user?.accountPortalAccess && $auth.user.account.stripeCustomerId}
|
||||
<SideNavItem
|
||||
text="Billing"
|
||||
url={$admin.accountPortalUrl + "/portal/billing"}
|
||||
/>
|
||||
{/if}
|
||||
</SideNav>
|
||||
</div>
|
||||
<slot />
|
||||
</Content>
|
||||
</Page>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<script>
|
||||
import { redirect } from "@roxi/routify"
|
||||
$redirect("./usage")
|
||||
</script>
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
Button,
|
||||
Input,
|
||||
Label,
|
||||
ButtonGroup,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import { auth, admin } from "stores/portal"
|
||||
|
|
@ -103,10 +104,10 @@
|
|||
{#if license.plan.type === "free"}
|
||||
Upgrade your Budibase installation to unlock additional features. To
|
||||
subscribe to a plan visit your
|
||||
<Link size="L" href={upgradeUrl}>Account</Link>.
|
||||
<Link size="L" href={upgradeUrl}>account</Link>.
|
||||
{:else}
|
||||
To manage your plan visit your
|
||||
<Link size="L" href={upgradeUrl}>Account</Link>.
|
||||
<Link size="L" href={upgradeUrl}>account</Link>
|
||||
{/if}
|
||||
</Body>
|
||||
</Layout>
|
||||
|
|
@ -127,44 +128,33 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<div class="action-button">
|
||||
<Button cta on:click={activate} disabled={activateDisabled}
|
||||
>Activate</Button
|
||||
>
|
||||
</div>
|
||||
<div class="action-button">
|
||||
{#if licenseInfo?.licenseKey}
|
||||
<Button warning on:click={() => deleteLicenseKeyModal.show()}
|
||||
>Delete</Button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<ButtonGroup>
|
||||
<Button cta on:click={activate} disabled={activateDisabled}>
|
||||
Activate
|
||||
</Button>
|
||||
{#if licenseInfo?.licenseKey}
|
||||
<Button warning on:click={() => deleteLicenseKeyModal.show()}>
|
||||
Delete
|
||||
</Button>
|
||||
{/if}
|
||||
</ButtonGroup>
|
||||
</Layout>
|
||||
<Divider />
|
||||
<Layout gap="L" noPadding>
|
||||
<Layout gap="S" noPadding>
|
||||
<Heading size="S">Plan</Heading>
|
||||
<Layout noPadding gap="XXS">
|
||||
<Body size="S">You are currently on the {license.plan.type} plan</Body
|
||||
>
|
||||
<Body size="XS">
|
||||
{processStringSync(
|
||||
"Updated {{ duration time 'millisecond' }} ago",
|
||||
{
|
||||
time:
|
||||
new Date().getTime() -
|
||||
new Date(license.refreshedAt).getTime(),
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
</Layout>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading size="S">Plan</Heading>
|
||||
<Layout noPadding gap="XXS">
|
||||
<Body size="S">You are currently on the {license.plan.type} plan</Body>
|
||||
<Body size="XS">
|
||||
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
|
||||
time:
|
||||
new Date().getTime() - new Date(license.refreshedAt).getTime(),
|
||||
})}
|
||||
</Body>
|
||||
</Layout>
|
||||
<div>
|
||||
<Button secondary on:click={refresh}>Refresh</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
<Button secondary on:click={refresh}>Refresh</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
{/if}
|
||||
|
||||
|
|
@ -179,10 +169,4 @@
|
|||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
}
|
||||
.action-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
Detail,
|
||||
Link,
|
||||
TooltipWrapper,
|
||||
Page,
|
||||
} from "@budibase/bbui"
|
||||
import { onMount } from "svelte"
|
||||
import { admin, auth, licensing } from "../../../../stores/portal"
|
||||
|
|
@ -180,18 +181,14 @@
|
|||
<Layout noPadding gap="XS">
|
||||
<Heading>Usage</Heading>
|
||||
<Body>
|
||||
Get information about your current usage within Budibase.
|
||||
{#if accountPortalAccess}
|
||||
To upgrade your plan and usage limits visit your <Link
|
||||
on:click={goToAccountPortal}
|
||||
size="L">Account</Link
|
||||
>
|
||||
{:else}
|
||||
To upgrade your plan and usage limits contact your account holder.
|
||||
{/if}
|
||||
<div>Get information about your current usage within Budibase</div>
|
||||
</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
<Body>
|
||||
To upgrade your plan and usage limits visit your
|
||||
<Link size="L" on:click={goToAccountPortal}>account</Link>.
|
||||
</Body>
|
||||
<DashCard
|
||||
description="YOUR CURRENT PLAN"
|
||||
title={planTitle()}
|
||||
|
|
@ -199,58 +196,60 @@
|
|||
primaryAction={accountPortalAccess ? goToAccountPortal : undefined}
|
||||
{textRows}
|
||||
>
|
||||
<Layout gap="S" noPadding>
|
||||
<Layout gap="S">
|
||||
<div class="usages">
|
||||
<Layout noPadding>
|
||||
{#each staticUsage as usage}
|
||||
<div class="usage">
|
||||
<div class="content">
|
||||
<div class="column">
|
||||
<Layout noPadding>
|
||||
{#each staticUsage as usage}
|
||||
<div class="usage">
|
||||
<Usage {usage} warnWhenFull={WARN_USAGE.includes(usage.name)} />
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
{#if monthlyUsage.length}
|
||||
<div class="column">
|
||||
<Layout noPadding gap="M">
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading size="S">Monthly limits</Heading>
|
||||
<div class="detail">
|
||||
<TooltipWrapper tooltip={new Date(quotaReset)}>
|
||||
<Detail size="M">
|
||||
Resets in {daysRemainingInMonth} days
|
||||
</Detail>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</Layout>
|
||||
<Layout noPadding gap="M">
|
||||
{#each monthlyUsage as usage}
|
||||
<Usage
|
||||
{usage}
|
||||
warnWhenFull={WARN_USAGE.includes(usage.name)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</div>
|
||||
</Layout>
|
||||
{#if monthlyUsage.length}
|
||||
<div class="monthly-container">
|
||||
<Layout gap="S">
|
||||
<Heading size="S" weight="light">Monthly</Heading>
|
||||
<div class="detail">
|
||||
<TooltipWrapper tooltip={new Date(quotaReset)}>
|
||||
<Detail size="M">Resets in {daysRemainingInMonth} days</Detail
|
||||
>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="usages">
|
||||
<Layout noPadding>
|
||||
{#each monthlyUsage as usage}
|
||||
<div class="usage">
|
||||
<Usage
|
||||
{usage}
|
||||
warnWhenFull={WARN_USAGE.includes(usage.name)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</div>
|
||||
</DashCard>
|
||||
</Layout>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.usages {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
}
|
||||
.column {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
.detail :global(.spectrum-Detail) {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.detail :global(.icon) {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<script>
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { apps, templates, licensing, groups } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { goto } from "@roxi/routify"
|
||||
|
||||
let loaded = false
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
// Always load latest
|
||||
await apps.load()
|
||||
await licensing.init()
|
||||
await templates.load()
|
||||
|
||||
if ($licensing.groupsEnabled) {
|
||||
await groups.actions.init()
|
||||
}
|
||||
|
||||
if ($templates?.length === 0) {
|
||||
notifications.error("There was a problem loading quick start templates")
|
||||
}
|
||||
|
||||
// Go to new app page if no apps exists
|
||||
if (!$apps.length) {
|
||||
$goto("./create")
|
||||
}
|
||||
} catch (error) {
|
||||
notifications.error("Error loading apps and templates")
|
||||
}
|
||||
loaded = true
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
<slot />
|
||||
{/if}
|
||||
|
|
@ -1,49 +1,17 @@
|
|||
<script>
|
||||
import { goto } from "@roxi/routify"
|
||||
import {
|
||||
Layout,
|
||||
Page,
|
||||
notifications,
|
||||
Button,
|
||||
Heading,
|
||||
Body,
|
||||
Modal,
|
||||
Divider,
|
||||
ActionButton,
|
||||
} from "@budibase/bbui"
|
||||
import { url } from "@roxi/routify"
|
||||
import { Layout, Page, Button, Modal } from "@budibase/bbui"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import TemplateDisplay from "components/common/TemplateDisplay.svelte"
|
||||
import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
|
||||
import { onMount } from "svelte"
|
||||
import { templates, licensing } from "stores/portal"
|
||||
import { apps, templates, licensing } from "stores/portal"
|
||||
import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
|
||||
|
||||
let loaded = $templates?.length
|
||||
let template
|
||||
let creationModal = false
|
||||
let appLimitModal
|
||||
let creatingApp = false
|
||||
|
||||
const welcomeBody =
|
||||
"Start from scratch or get a head start with one of our templates"
|
||||
const createAppTitle = "Create new app"
|
||||
const createAppButtonText = "Start from scratch"
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await templates.load()
|
||||
// always load latest
|
||||
await licensing.init()
|
||||
if ($templates?.length === 0) {
|
||||
notifications.error(
|
||||
"There was a problem loading quick start templates."
|
||||
)
|
||||
}
|
||||
} catch (error) {
|
||||
notifications.error("Error loading apps and templates")
|
||||
}
|
||||
loaded = true
|
||||
})
|
||||
|
||||
const initiateAppCreation = () => {
|
||||
if ($licensing?.usageMetrics?.apps >= 100) {
|
||||
appLimitModal.show()
|
||||
|
|
@ -70,58 +38,33 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Page wide>
|
||||
<Layout noPadding gap="XL">
|
||||
<span>
|
||||
<ActionButton
|
||||
secondary
|
||||
icon={"ArrowLeft"}
|
||||
on:click={() => {
|
||||
$goto("../")
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</ActionButton>
|
||||
</span>
|
||||
|
||||
<div class="title">
|
||||
<div class="welcome">
|
||||
<Layout noPadding gap="XS">
|
||||
<Heading size="L">{createAppTitle}</Heading>
|
||||
<Body size="M">
|
||||
{welcomeBody}
|
||||
</Body>
|
||||
</Layout>
|
||||
|
||||
<div class="buttons">
|
||||
<Button
|
||||
dataCy="create-app-btn"
|
||||
size="M"
|
||||
icon="Add"
|
||||
cta
|
||||
on:click={initiateAppCreation}
|
||||
>
|
||||
{createAppButtonText}
|
||||
</Button>
|
||||
<Button
|
||||
dataCy="import-app-btn"
|
||||
icon="Import"
|
||||
size="M"
|
||||
quiet
|
||||
secondary
|
||||
on:click={initiateAppImport}
|
||||
>
|
||||
Import app
|
||||
</Button>
|
||||
</div>
|
||||
<Page>
|
||||
<Layout noPadding gap="L">
|
||||
<Breadcrumbs>
|
||||
<Breadcrumb url={$url("./")} text="Apps" />
|
||||
<Breadcrumb text="Create new app" />
|
||||
</Breadcrumbs>
|
||||
<Header title={$apps.length ? "Create new app" : "Create your first app"}>
|
||||
<div slot="buttons">
|
||||
<Button
|
||||
dataCy="import-app-btn"
|
||||
size="M"
|
||||
secondary
|
||||
on:click={initiateAppImport}
|
||||
>
|
||||
Import app
|
||||
</Button>
|
||||
<Button
|
||||
dataCy="create-app-btn"
|
||||
size="M"
|
||||
cta
|
||||
on:click={initiateAppCreation}
|
||||
>
|
||||
Start from scratch
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
{#if loaded && $templates?.length}
|
||||
<TemplateDisplay templates={$templates} />
|
||||
{/if}
|
||||
</Header>
|
||||
<TemplateDisplay templates={$templates} />
|
||||
</Layout>
|
||||
</Page>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,60 +9,34 @@
|
|||
notifications,
|
||||
Notification,
|
||||
Body,
|
||||
Icon,
|
||||
Search,
|
||||
} from "@budibase/bbui"
|
||||
import TemplateDisplay from "components/common/TemplateDisplay.svelte"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import UpdateAppModal from "components/start/UpdateAppModal.svelte"
|
||||
import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
|
||||
|
||||
import { store, automationStore } from "builderStore"
|
||||
import { API } from "api"
|
||||
import { onMount } from "svelte"
|
||||
import {
|
||||
apps,
|
||||
auth,
|
||||
admin,
|
||||
templates,
|
||||
licensing,
|
||||
groups,
|
||||
} from "stores/portal"
|
||||
import { apps, auth, admin, licensing } from "stores/portal"
|
||||
import { goto } from "@roxi/routify"
|
||||
import AppRow from "components/start/AppRow.svelte"
|
||||
import { AppStatus } from "constants"
|
||||
import Logo from "assets/bb-space-man.svg"
|
||||
import AccessFilter from "./_components/AcessFilter.svelte"
|
||||
|
||||
let sortBy = "name"
|
||||
let template
|
||||
let selectedApp
|
||||
let creationModal
|
||||
let updatingModal
|
||||
let appLimitModal
|
||||
let creatingApp = false
|
||||
let loaded = $apps?.length || $templates?.length
|
||||
let searchTerm = ""
|
||||
let cloud = $admin.cloud
|
||||
let creatingFromTemplate = false
|
||||
let automationErrors
|
||||
let accessFilterList = null
|
||||
|
||||
const resolveWelcomeMessage = (auth, apps) => {
|
||||
const userWelcome = auth?.user?.firstName
|
||||
? `Welcome ${auth?.user?.firstName}!`
|
||||
: "Welcome back!"
|
||||
return apps?.length ? userWelcome : "Let's create your first app!"
|
||||
}
|
||||
$: welcomeHeader = resolveWelcomeMessage($auth, $apps)
|
||||
$: welcomeBody = $apps?.length
|
||||
? "Manage your apps and get a head start with templates"
|
||||
: "Start from scratch or get a head start with one of our templates"
|
||||
|
||||
$: createAppButtonText = $apps?.length
|
||||
? "Create new app"
|
||||
: "Start from scratch"
|
||||
|
||||
$: welcomeHeader = `Welcome ${$auth?.user?.firstName || "back"}`
|
||||
$: enrichedApps = enrichApps($apps, $auth.user, sortBy)
|
||||
$: filteredApps = enrichedApps.filter(
|
||||
app =>
|
||||
|
|
@ -121,10 +95,9 @@
|
|||
|
||||
const goToAutomationError = appId => {
|
||||
const params = new URLSearchParams({
|
||||
tab: "Automation History",
|
||||
open: "error",
|
||||
})
|
||||
$goto(`../overview/${appId}?${params.toString()}`)
|
||||
$goto(`../overview/${appId}/automation-history?${params.toString()}`)
|
||||
}
|
||||
|
||||
const errorCount = errors => {
|
||||
|
|
@ -221,10 +194,6 @@
|
|||
$goto(`../../app/${app.devId}`)
|
||||
}
|
||||
|
||||
const accessFilterAction = accessFilter => {
|
||||
accessFilterList = accessFilter.detail
|
||||
}
|
||||
|
||||
function createAppFromTemplateUrl(templateKey) {
|
||||
// validate the template key just to make sure
|
||||
const templateParts = templateKey.split("/")
|
||||
|
|
@ -240,37 +209,21 @@
|
|||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await apps.load()
|
||||
await templates.load()
|
||||
// always load latest
|
||||
await licensing.init()
|
||||
|
||||
if ($licensing.groupsEnabled) {
|
||||
await groups.actions.init()
|
||||
}
|
||||
|
||||
if ($templates?.length === 0) {
|
||||
notifications.error(
|
||||
"There was a problem loading quick start templates."
|
||||
)
|
||||
}
|
||||
// If the portal is loaded from an external URL with a template param
|
||||
const initInfo = await auth.getInitInfo()
|
||||
if (initInfo?.init_template) {
|
||||
creatingFromTemplate = true
|
||||
createAppFromTemplateUrl(initInfo.init_template)
|
||||
return
|
||||
}
|
||||
} catch (error) {
|
||||
notifications.error("Error loading apps and templates")
|
||||
notifications.error("Error getting init info")
|
||||
}
|
||||
loaded = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<Page wide>
|
||||
<Layout noPadding gap="M">
|
||||
{#if loaded}
|
||||
{#if $apps.length}
|
||||
<Page>
|
||||
<Layout noPadding gap="L">
|
||||
{#each Object.keys(automationErrors || {}) as appId}
|
||||
<Notification
|
||||
wide
|
||||
|
|
@ -290,42 +243,15 @@
|
|||
{/each}
|
||||
<div class="title">
|
||||
<div class="welcome">
|
||||
<Layout noPadding gap="XS">
|
||||
<Layout noPadding gap="S">
|
||||
<Heading size="L">{welcomeHeader}</Heading>
|
||||
<Body size="M">
|
||||
{welcomeBody}
|
||||
Manage your apps and get a head start with templates
|
||||
</Body>
|
||||
</Layout>
|
||||
{#if !$apps?.length}
|
||||
<div class="buttons">
|
||||
<Button
|
||||
dataCy="create-app-btn"
|
||||
size="M"
|
||||
icon="Add"
|
||||
cta
|
||||
on:click={initiateAppCreation}
|
||||
>
|
||||
{createAppButtonText}
|
||||
</Button>
|
||||
<Button
|
||||
dataCy="import-app-btn"
|
||||
icon="Import"
|
||||
size="L"
|
||||
quiet
|
||||
secondary
|
||||
on:click={initiateAppImport}
|
||||
>
|
||||
Import app
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !$apps?.length && $templates?.length}
|
||||
<TemplateDisplay templates={$templates} />
|
||||
{/if}
|
||||
|
||||
{#if enrichedApps.length}
|
||||
<Layout noPadding gap="L">
|
||||
<div class="title">
|
||||
|
|
@ -333,27 +259,23 @@
|
|||
<Button
|
||||
dataCy="create-app-btn"
|
||||
size="M"
|
||||
icon="Add"
|
||||
cta
|
||||
on:click={initiateAppCreation}
|
||||
>
|
||||
{createAppButtonText}
|
||||
Create new app
|
||||
</Button>
|
||||
{#if $apps?.length > 0}
|
||||
<Button
|
||||
icon="Experience"
|
||||
size="M"
|
||||
quiet
|
||||
secondary
|
||||
on:click={$goto("/builder/portal/apps/templates")}
|
||||
>
|
||||
Templates
|
||||
View templates
|
||||
</Button>
|
||||
{/if}
|
||||
{#if !$apps?.length}
|
||||
<Button
|
||||
dataCy="import-app-btn"
|
||||
icon="Import"
|
||||
size="L"
|
||||
quiet
|
||||
secondary
|
||||
|
|
@ -366,33 +288,23 @@
|
|||
{#if enrichedApps.length > 1}
|
||||
<div class="app-actions">
|
||||
{#if cloud}
|
||||
<Button
|
||||
size="M"
|
||||
icon="Export"
|
||||
quiet
|
||||
secondary
|
||||
<Icon
|
||||
name="Download"
|
||||
hoverable
|
||||
on:click={initiateAppsExport}
|
||||
>
|
||||
Export apps
|
||||
</Button>
|
||||
{/if}
|
||||
<div class="filter">
|
||||
{#if $licensing.groupsEnabled}
|
||||
<AccessFilter on:change={accessFilterAction} />
|
||||
{/if}
|
||||
<Select
|
||||
quiet
|
||||
autoWidth
|
||||
bind:value={sortBy}
|
||||
placeholder={null}
|
||||
options={[
|
||||
{ label: "Sort by name", value: "name" },
|
||||
{ label: "Sort by recently updated", value: "updated" },
|
||||
{ label: "Sort by status", value: "status" },
|
||||
]}
|
||||
/>
|
||||
<Search placeholder="Search" bind:value={searchTerm} />
|
||||
</div>
|
||||
{/if}
|
||||
<Select
|
||||
autoWidth
|
||||
bind:value={sortBy}
|
||||
placeholder={null}
|
||||
options={[
|
||||
{ label: "Sort by name", value: "name" },
|
||||
{ label: "Sort by recently updated", value: "updated" },
|
||||
{ label: "Sort by status", value: "status" },
|
||||
]}
|
||||
/>
|
||||
<Search placeholder="Search" bind:value={searchTerm} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -404,17 +316,17 @@
|
|||
</div>
|
||||
</Layout>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if creatingFromTemplate}
|
||||
<div class="empty-wrapper">
|
||||
<img class="img-logo img-size" alt="logo" src={Logo} />
|
||||
<p>Creating your Budibase app from your selected template...</p>
|
||||
<Spinner size="10" />
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</Page>
|
||||
{#if creatingFromTemplate}
|
||||
<div class="empty-wrapper">
|
||||
<img class="img-logo img-size" alt="logo" src={Logo} />
|
||||
<p>Creating your Budibase app from your selected template...</p>
|
||||
<Spinner size="10" />
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</Page>
|
||||
{/if}
|
||||
|
||||
<Modal
|
||||
bind:this={creationModal}
|
||||
|
|
@ -425,25 +337,9 @@
|
|||
<CreateAppModal {template} />
|
||||
</Modal>
|
||||
|
||||
<Modal bind:this={updatingModal} padding={false} width="600px">
|
||||
<UpdateAppModal app={selectedApp} />
|
||||
</Modal>
|
||||
|
||||
<AppLimitModal bind:this={appLimitModal} />
|
||||
|
||||
<style>
|
||||
.appTable {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.app-actions {
|
||||
display: flex;
|
||||
}
|
||||
.app-actions :global(> button) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.title .welcome > .buttons {
|
||||
padding-top: var(--spacing-l);
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -465,34 +361,20 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
.app-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.appTable {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.appTable.unlocked {
|
||||
grid-template-columns: 1fr 1fr auto 1fr auto;
|
||||
}
|
||||
|
||||
.appTable :global(> div) {
|
||||
height: 70px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.appTable :global(> div) {
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
|
|
|||
|
|
@ -1,42 +1,18 @@
|
|||
<script>
|
||||
import { goto } from "@roxi/routify"
|
||||
import { Layout, Page, notifications, ActionButton } from "@budibase/bbui"
|
||||
import { url } from "@roxi/routify"
|
||||
import { Layout, Page } from "@budibase/bbui"
|
||||
import TemplateDisplay from "components/common/TemplateDisplay.svelte"
|
||||
import { onMount } from "svelte"
|
||||
import { templates } from "stores/portal"
|
||||
|
||||
let loaded = $templates?.length
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await templates.load()
|
||||
if ($templates?.length === 0) {
|
||||
notifications.error(
|
||||
"There was a problem loading quick start templates."
|
||||
)
|
||||
}
|
||||
} catch (error) {
|
||||
notifications.error("Error loading apps and templates")
|
||||
}
|
||||
loaded = true
|
||||
})
|
||||
import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
|
||||
</script>
|
||||
|
||||
<Page wide>
|
||||
<Layout noPadding gap="XL">
|
||||
<span>
|
||||
<ActionButton
|
||||
secondary
|
||||
icon={"ArrowLeft"}
|
||||
on:click={() => {
|
||||
$goto("../")
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</ActionButton>
|
||||
</span>
|
||||
{#if loaded && $templates?.length}
|
||||
<TemplateDisplay templates={$templates} />
|
||||
{/if}
|
||||
<Page>
|
||||
<Layout noPadding gap="L">
|
||||
<Breadcrumbs>
|
||||
<Breadcrumb url={$url("./")} text="Apps" />
|
||||
<Breadcrumb text="Templates" />
|
||||
</Breadcrumbs>
|
||||
<Header title="Templates" />
|
||||
<TemplateDisplay templates={$templates} />
|
||||
</Layout>
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<script>
|
||||
import { Page } from "@budibase/bbui"
|
||||
import { auth } from "stores/portal"
|
||||
import { page, redirect } from "@roxi/routify"
|
||||
|
||||
// Only admins allowed here
|
||||
$: {
|
||||
if (!$auth.isAdmin) {
|
||||
$redirect("../")
|
||||
}
|
||||
}
|
||||
|
||||
$: wide = $page.path.includes("email/:template")
|
||||
</script>
|
||||
|
||||
{#if $auth.isAdmin}
|
||||
<Page maxWidth="90ch" {wide}>
|
||||
<slot />
|
||||
</Page>
|
||||
{/if}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script>
|
||||
import { Body, Menu, MenuItem, Detail } from "@budibase/bbui"
|
||||
|
||||
export let bindings
|
||||
export let onBindingClick = () => {}
|
||||
</script>
|
||||
|
||||
<Menu>
|
||||
{#each bindings as binding}
|
||||
<MenuItem on:click={() => onBindingClick(binding)}>
|
||||
<Detail size="M">{binding.name}</Detail>
|
||||
<Body size="XS">{binding.description}</Body>
|
||||
</MenuItem>
|
||||
{/each}
|
||||
</Menu>
|
||||
|
|
@ -1,264 +0,0 @@
|
|||
<script>
|
||||
import { goto } from "@roxi/routify"
|
||||
import {
|
||||
ActionButton,
|
||||
Button,
|
||||
Layout,
|
||||
Heading,
|
||||
Icon,
|
||||
Popover,
|
||||
notifications,
|
||||
List,
|
||||
ListItem,
|
||||
StatusLight,
|
||||
Divider,
|
||||
ActionMenu,
|
||||
MenuItem,
|
||||
Modal,
|
||||
} from "@budibase/bbui"
|
||||
import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import { users, apps, groups } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
import { roles } from "stores/backend"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
|
||||
import GroupIcon from "./_components/GroupIcon.svelte"
|
||||
import AppAddModal from "./_components/AppAddModal.svelte"
|
||||
|
||||
export let groupId
|
||||
|
||||
let popoverAnchor
|
||||
let popover
|
||||
let searchTerm = ""
|
||||
let prevSearch = undefined
|
||||
let pageInfo = createPaginationStore()
|
||||
let loaded = false
|
||||
let editModal, deleteModal, appAddModal
|
||||
|
||||
$: page = $pageInfo.page
|
||||
$: fetchUsers(page, searchTerm)
|
||||
$: group = $groups.find(x => x._id === groupId)
|
||||
$: filtered = $users.data
|
||||
$: groupApps = $apps.filter(app =>
|
||||
groups.actions.getGroupAppIds(group).includes(apps.getProdAppID(app.devId))
|
||||
)
|
||||
$: {
|
||||
if (loaded && !group?._id) {
|
||||
$goto("./")
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchUsers(page, search) {
|
||||
if ($pageInfo.loading) {
|
||||
return
|
||||
}
|
||||
// need to remove the page if they've started searching
|
||||
if (search && !prevSearch) {
|
||||
pageInfo.reset()
|
||||
page = undefined
|
||||
}
|
||||
prevSearch = search
|
||||
try {
|
||||
pageInfo.loading()
|
||||
await users.search({ page, email: search })
|
||||
pageInfo.fetched($users.hasNextPage, $users.nextPage)
|
||||
} catch (error) {
|
||||
notifications.error("Error getting user list")
|
||||
}
|
||||
}
|
||||
|
||||
const getRoleLabel = appId => {
|
||||
const roleId = group?.roles?.[apps.getProdAppID(appId)]
|
||||
const role = $roles.find(x => x._id === roleId)
|
||||
return role?.name || "Custom role"
|
||||
}
|
||||
|
||||
async function deleteGroup() {
|
||||
try {
|
||||
await groups.actions.delete(group)
|
||||
notifications.success("User group deleted successfully")
|
||||
$goto("./")
|
||||
} catch (error) {
|
||||
notifications.error(`Failed to delete user group`)
|
||||
}
|
||||
}
|
||||
|
||||
async function saveGroup(group) {
|
||||
try {
|
||||
await groups.actions.save(group)
|
||||
} catch (error) {
|
||||
notifications.error(`Failed to save user group`)
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
|
||||
loaded = true
|
||||
} catch (error) {
|
||||
notifications.error("Error fetching user group data")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
<Layout noPadding gap="XL">
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("../groups")} icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
||||
<Layout noPadding gap="M">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<GroupIcon {group} size="L" />
|
||||
<div class="text-padding">
|
||||
<Heading>{group?.name}</Heading>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ActionMenu align="right">
|
||||
<span slot="control">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem icon="Refresh" on:click={() => editModal.show()}>
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={() => deleteModal.show()}>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Layout noPadding gap="S">
|
||||
<div class="header">
|
||||
<Heading size="S">Users</Heading>
|
||||
<div bind:this={popoverAnchor}>
|
||||
<Button on:click={popover.show()} icon="UserAdd" cta>
|
||||
Add user
|
||||
</Button>
|
||||
</div>
|
||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||
<UserGroupPicker
|
||||
bind:searchTerm
|
||||
labelKey="email"
|
||||
selected={group.users?.map(user => user._id)}
|
||||
list={$users.data}
|
||||
on:select={e => groups.actions.addUser(groupId, e.detail)}
|
||||
on:deselect={e => groups.actions.removeUser(groupId, e.detail)}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
<List>
|
||||
{#if group?.users.length}
|
||||
{#each group.users as user}
|
||||
<ListItem
|
||||
title={user.email}
|
||||
on:click={() => $goto(`../users/${user._id}`)}
|
||||
hoverable
|
||||
>
|
||||
<Icon
|
||||
on:click={e => {
|
||||
groups.actions.removeUser(groupId, user._id)
|
||||
e.stopPropagation()
|
||||
}}
|
||||
hoverable
|
||||
size="S"
|
||||
name="Close"
|
||||
/>
|
||||
</ListItem>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="This user group has no users" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
<Layout noPadding gap="S">
|
||||
<div class="header">
|
||||
<Heading size="S">Apps</Heading>
|
||||
<div>
|
||||
<Button on:click={appAddModal.show()} icon="ExperienceAdd" cta>
|
||||
Add app
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<List>
|
||||
{#if groupApps.length}
|
||||
{#each groupApps as app}
|
||||
<ListItem
|
||||
title={app.name}
|
||||
icon={app?.icon?.name || "Apps"}
|
||||
iconColor={app?.icon?.color || ""}
|
||||
on:click={() => $goto(`../../overview/${app.devId}`)}
|
||||
hoverable
|
||||
>
|
||||
<div class="title ">
|
||||
<StatusLight
|
||||
square
|
||||
color={RoleUtils.getRoleColour(
|
||||
group.roles[apps.getProdAppID(app.devId)]
|
||||
)}
|
||||
>
|
||||
{getRoleLabel(app.devId)}
|
||||
</StatusLight>
|
||||
</div>
|
||||
<Icon
|
||||
on:click={e => {
|
||||
groups.actions.removeApp(
|
||||
groupId,
|
||||
apps.getProdAppID(app.devId)
|
||||
)
|
||||
e.stopPropagation()
|
||||
}}
|
||||
hoverable
|
||||
size="S"
|
||||
name="Close"
|
||||
/>
|
||||
</ListItem>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="Apps" title="This user group has access to no apps" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
</Layout>
|
||||
{/if}
|
||||
|
||||
<Modal bind:this={editModal}>
|
||||
<CreateEditGroupModal {group} {saveGroup} />
|
||||
</Modal>
|
||||
|
||||
<Modal bind:this={appAddModal}>
|
||||
<AppAddModal {group} />
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={deleteModal}
|
||||
title="Delete user group"
|
||||
okText="Delete user group"
|
||||
onOk={deleteGroup}
|
||||
>
|
||||
Are you sure you wish to delete <b>{group?.name}?</b>
|
||||
</ConfirmDialog>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div style="float: right;">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<script>
|
||||
import { url, isActive, params, goto } from "@roxi/routify"
|
||||
import {
|
||||
Page,
|
||||
Layout,
|
||||
Button,
|
||||
Icon,
|
||||
ActionMenu,
|
||||
MenuItem,
|
||||
Helpers,
|
||||
Input,
|
||||
Modal,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import {
|
||||
Content,
|
||||
SideNav,
|
||||
SideNavItem,
|
||||
Breadcrumbs,
|
||||
Breadcrumb,
|
||||
Header,
|
||||
} from "components/portal/page"
|
||||
import { apps, auth, groups, overview } from "stores/portal"
|
||||
import { AppStatus } from "constants"
|
||||
import analytics, { Events, EventSource } from "analytics"
|
||||
import { store } from "builderStore"
|
||||
import AppLockModal from "components/common/AppLockModal.svelte"
|
||||
import EditableIcon from "components/common/EditableIcon.svelte"
|
||||
import { API } from "api"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import ExportAppModal from "components/start/ExportAppModal.svelte"
|
||||
import { syncURLToState } from "../../../../../helpers/urlStateSync"
|
||||
import * as routify from "@roxi/routify"
|
||||
import { onDestroy } from "svelte"
|
||||
|
||||
// Keep URL and state in sync for selected screen ID
|
||||
const stopSyncing = syncURLToState({
|
||||
urlParam: "appId",
|
||||
stateKey: "selectedAppId",
|
||||
validate: id => $apps.some(app => app.devId === id),
|
||||
fallbackUrl: "../../",
|
||||
store: overview,
|
||||
routify,
|
||||
})
|
||||
|
||||
let exportModal
|
||||
let deletionModal
|
||||
let exportPublishedVersion = false
|
||||
let deletionConfirmationAppName
|
||||
|
||||
$: app = $overview.selectedApp
|
||||
$: appId = $overview.selectedAppId
|
||||
$: initialiseApp(appId)
|
||||
$: isPublished = app?.status === AppStatus.DEPLOYED
|
||||
$: appLocked = !!app?.lockedBy
|
||||
$: lockedByYou = $auth.user.email === app?.lockedBy?.email
|
||||
|
||||
const initialiseApp = async appId => {
|
||||
try {
|
||||
const pkg = await API.fetchAppPackage(appId)
|
||||
await store.actions.initialise(pkg)
|
||||
await API.syncApp(appId)
|
||||
} catch (error) {
|
||||
notifications.error("Error initialising app overview")
|
||||
$goto("../../")
|
||||
}
|
||||
}
|
||||
|
||||
const viewApp = () => {
|
||||
if (isPublished) {
|
||||
analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
|
||||
appId: $store.appId,
|
||||
eventSource: EventSource.PORTAL,
|
||||
})
|
||||
window.open(`/app${app?.url}`, "_blank")
|
||||
}
|
||||
}
|
||||
|
||||
const editApp = () => {
|
||||
if (appLocked && !lockedByYou) {
|
||||
const identifier = app?.lockedBy?.firstName || app?.lockedBy?.email
|
||||
notifications.warning(
|
||||
`App locked by ${identifier}. Please allow lock to expire or have them unlock this app.`
|
||||
)
|
||||
return
|
||||
}
|
||||
$goto(`../../../app/${app.devId}`)
|
||||
}
|
||||
|
||||
const exportApp = opts => {
|
||||
exportPublishedVersion = !!opts?.published
|
||||
exportModal.show()
|
||||
}
|
||||
|
||||
const copyAppId = async () => {
|
||||
await Helpers.copyToClipboard(app.prodId)
|
||||
notifications.success("App ID copied to clipboard")
|
||||
}
|
||||
|
||||
const deleteApp = async () => {
|
||||
try {
|
||||
await API.deleteApp(app?.devId)
|
||||
notifications.success("App deleted successfully")
|
||||
$goto("../")
|
||||
} catch (err) {
|
||||
notifications.error("Error deleting app")
|
||||
}
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
stopSyncing()
|
||||
store.actions.reset()
|
||||
})
|
||||
</script>
|
||||
|
||||
{#key appId}
|
||||
<Page>
|
||||
<Layout noPadding gap="L">
|
||||
<Breadcrumbs>
|
||||
<Breadcrumb url={$url("../")} text="Apps" />
|
||||
<Breadcrumb text={app?.name} />
|
||||
</Breadcrumbs>
|
||||
<Header title={app?.name}>
|
||||
<div slot="icon">
|
||||
<EditableIcon
|
||||
{app}
|
||||
autoSave
|
||||
size="XL"
|
||||
name={app?.icon?.name || "Apps"}
|
||||
color={app?.icon?.color}
|
||||
/>
|
||||
</div>
|
||||
<div slot="buttons">
|
||||
<AppLockModal {app} />
|
||||
<Button
|
||||
size="M"
|
||||
quiet
|
||||
secondary
|
||||
disabled={!isPublished}
|
||||
on:click={viewApp}
|
||||
dataCy="view-app"
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
<Button
|
||||
size="M"
|
||||
cta
|
||||
disabled={appLocked && !lockedByYou}
|
||||
on:click={editApp}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<ActionMenu align="right" dataCy="app-overview-menu-popover">
|
||||
<span slot="control" class="app-overview-actions-icon">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem
|
||||
on:click={() => exportApp({ published: false })}
|
||||
icon="DownloadFromCloud"
|
||||
>
|
||||
Export latest
|
||||
</MenuItem>
|
||||
{#if isPublished}
|
||||
<MenuItem
|
||||
on:click={() => exportApp({ published: true })}
|
||||
icon="DownloadFromCloudOutline"
|
||||
>
|
||||
Export published
|
||||
</MenuItem>
|
||||
<MenuItem on:click={copyAppId} icon="Copy">Copy app ID</MenuItem>
|
||||
{/if}
|
||||
{#if !isPublished}
|
||||
<MenuItem on:click={deletionModal.show} icon="Delete">
|
||||
Delete
|
||||
</MenuItem>
|
||||
{/if}
|
||||
</ActionMenu>
|
||||
</div>
|
||||
</Header>
|
||||
<Content>
|
||||
<SideNav slot="side-nav">
|
||||
<SideNavItem
|
||||
text="Overview"
|
||||
url={$url("./overview")}
|
||||
active={$isActive("./overview")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Access"
|
||||
url={$url("./access")}
|
||||
active={$isActive("./access")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Automation History"
|
||||
url={$url("./automation-history")}
|
||||
active={$isActive("./automation-history")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Backups"
|
||||
url={$url("./backups")}
|
||||
active={$isActive("./backups")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Name and URL"
|
||||
url={$url("./name-and-url")}
|
||||
active={$isActive("./name-and-url")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Version"
|
||||
url={$url("./version")}
|
||||
active={$isActive("./version")}
|
||||
/>
|
||||
</SideNav>
|
||||
<slot />
|
||||
</Content>
|
||||
</Layout>
|
||||
</Page>
|
||||
|
||||
<Modal bind:this={exportModal} padding={false}>
|
||||
<ExportAppModal {app} published={exportPublishedVersion} />
|
||||
</Modal>
|
||||
<ConfirmDialog
|
||||
bind:this={deletionModal}
|
||||
title="Delete app"
|
||||
okText="Delete"
|
||||
onOk={deleteApp}
|
||||
onCancel={() => (deletionConfirmationAppName = null)}
|
||||
disabled={deletionConfirmationAppName !== app?.name}
|
||||
>
|
||||
Are you sure you want to delete <b>{app?.name}</b>?
|
||||
<br />
|
||||
Please enter the app name below to confirm.
|
||||
<br /><br />
|
||||
<Input
|
||||
bind:value={deletionConfirmationAppName}
|
||||
data-cy="delete-app-confirmation"
|
||||
placeholder={app?.name}
|
||||
/>
|
||||
</ConfirmDialog>
|
||||
{/key}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
import RoleSelect from "components/common/RoleSelect.svelte"
|
||||
import { getContext } from "svelte"
|
||||
|
||||
const rolesContext = getContext("roles")
|
||||
|
||||
export let value
|
||||
export let row
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<RoleSelect
|
||||
{value}
|
||||
quiet
|
||||
allowRemove
|
||||
allowPublic={false}
|
||||
on:change={e => rolesContext.updateRole(e.detail, row._id)}
|
||||
on:remove={() => rolesContext.removeRole(row._id)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Heading,
|
||||
Body,
|
||||
Button,
|
||||
Modal,
|
||||
notifications,
|
||||
Pagination,
|
||||
Divider,
|
||||
Table,
|
||||
} from "@budibase/bbui"
|
||||
import { onMount, setContext } from "svelte"
|
||||
import { users, groups, apps, licensing, overview } from "stores/portal"
|
||||
import AssignmentModal from "./_components/AssignmentModal.svelte"
|
||||
import { roles } from "stores/backend"
|
||||
import { API } from "api"
|
||||
import { fetchData } from "@budibase/frontend-core"
|
||||
import EditableRoleRenderer from "./_components/EditableRoleRenderer.svelte"
|
||||
|
||||
const userSchema = {
|
||||
email: {
|
||||
type: "string",
|
||||
width: "1fr",
|
||||
},
|
||||
role: {
|
||||
displayName: "Access",
|
||||
width: "150px",
|
||||
borderLeft: true,
|
||||
},
|
||||
}
|
||||
const groupSchema = {
|
||||
name: {
|
||||
type: "string",
|
||||
width: "1fr",
|
||||
},
|
||||
role: {
|
||||
displayName: "Access",
|
||||
width: "150px",
|
||||
borderLeft: true,
|
||||
},
|
||||
}
|
||||
const customRenderers = [
|
||||
{
|
||||
column: "role",
|
||||
component: EditableRoleRenderer,
|
||||
},
|
||||
]
|
||||
|
||||
let assignmentModal
|
||||
let appGroups
|
||||
let appUsers
|
||||
|
||||
$: app = $overview.selectedApp
|
||||
$: devAppId = app.devId
|
||||
$: prodAppId = apps.getProdAppID(app.devId)
|
||||
$: usersFetch = fetchData({
|
||||
API,
|
||||
datasource: {
|
||||
type: "user",
|
||||
},
|
||||
options: {
|
||||
query: {
|
||||
appId: apps.getProdAppID(devAppId),
|
||||
},
|
||||
},
|
||||
})
|
||||
$: appUsers = getAppUsers($usersFetch.rows, prodAppId)
|
||||
$: appGroups = getAppGroups($groups, prodAppId)
|
||||
|
||||
const getAppUsers = (users, appId) => {
|
||||
return users.map(user => ({
|
||||
...user,
|
||||
role: user.roles[Object.keys(user.roles).find(x => x === appId)],
|
||||
}))
|
||||
}
|
||||
|
||||
const getAppGroups = (allGroups, appId) => {
|
||||
return allGroups
|
||||
.filter(group => {
|
||||
if (!group.roles) {
|
||||
return false
|
||||
}
|
||||
return groups.actions.getGroupAppIds(group).includes(appId)
|
||||
})
|
||||
.map(group => ({
|
||||
...group,
|
||||
role: group.roles[
|
||||
groups.actions.getGroupAppIds(group).find(x => x === appId)
|
||||
],
|
||||
}))
|
||||
}
|
||||
|
||||
const updateRole = async (role, id) => {
|
||||
// Check if this is a user or a group
|
||||
if ($usersFetch.rows.some(user => user._id === id)) {
|
||||
await updateUserRole(role, id)
|
||||
} else {
|
||||
await updateGroupRole(role, id)
|
||||
}
|
||||
}
|
||||
|
||||
const removeRole = async id => {
|
||||
// Check if this is a user or a group
|
||||
if ($usersFetch.rows.some(user => user._id === id)) {
|
||||
await removeUserRole(id)
|
||||
} else {
|
||||
await removeGroupRole(id)
|
||||
}
|
||||
}
|
||||
|
||||
const updateUserRole = async (role, userId) => {
|
||||
const user = $usersFetch.rows.find(user => user._id === userId)
|
||||
if (!user) {
|
||||
return
|
||||
}
|
||||
user.roles[prodAppId] = role
|
||||
await users.save(user)
|
||||
await usersFetch.refresh()
|
||||
}
|
||||
|
||||
const removeUserRole = async userId => {
|
||||
const user = $usersFetch.rows.find(user => user._id === userId)
|
||||
if (!user) {
|
||||
return
|
||||
}
|
||||
const filteredRoles = { ...user.roles }
|
||||
delete filteredRoles[prodAppId]
|
||||
await users.save({
|
||||
...user,
|
||||
roles: {
|
||||
...filteredRoles,
|
||||
},
|
||||
})
|
||||
await usersFetch.refresh()
|
||||
}
|
||||
|
||||
const updateGroupRole = async (role, groupId) => {
|
||||
const group = $groups.find(group => group._id === groupId)
|
||||
if (!group) {
|
||||
return
|
||||
}
|
||||
await groups.actions.addApp(group._id, prodAppId, role)
|
||||
await usersFetch.refresh()
|
||||
}
|
||||
|
||||
const removeGroupRole = async groupId => {
|
||||
const group = $groups.find(group => group._id === groupId)
|
||||
if (!group) {
|
||||
return
|
||||
}
|
||||
await groups.actions.removeApp(group._id, prodAppId)
|
||||
await usersFetch.refresh()
|
||||
}
|
||||
|
||||
setContext("roles", {
|
||||
updateRole,
|
||||
removeRole,
|
||||
})
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await roles.fetch()
|
||||
} catch (error) {
|
||||
notifications.error(error)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Access</Heading>
|
||||
<Body>Assign users to your app and set their access</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
<Layout noPadding gap="L">
|
||||
{#if $usersFetch.loaded}
|
||||
<Layout noPadding gap="S">
|
||||
<div class="title">
|
||||
<Heading size="S">Users</Heading>
|
||||
<Button secondary on:click={assignmentModal.show}>Assign user</Button>
|
||||
</div>
|
||||
<Table
|
||||
customPlaceholder
|
||||
data={appUsers}
|
||||
schema={userSchema}
|
||||
allowEditRows={false}
|
||||
{customRenderers}
|
||||
>
|
||||
<div class="placeholder" slot="placeholder">
|
||||
<Heading size="S">You have no users assigned yet</Heading>
|
||||
</div>
|
||||
</Table>
|
||||
<div class="pagination">
|
||||
<Pagination
|
||||
page={$usersFetch.pageNumber + 1}
|
||||
hasPrevPage={$usersFetch.hasPrevPage}
|
||||
hasNextPage={$usersFetch.hasNextPage}
|
||||
goToPrevPage={$usersFetch.loading ? null : usersFetch.prevPage}
|
||||
goToNextPage={$usersFetch.loading ? null : usersFetch.nextPage}
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
{/if}
|
||||
|
||||
{#if $usersFetch.loaded && $licensing.groupsEnabled && appGroups.length}
|
||||
<Layout noPadding gap="S">
|
||||
<div class="title">
|
||||
<Heading size="S">Groups</Heading>
|
||||
<Button secondary on:click={assignmentModal.show}>
|
||||
Assign group
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
customPlaceholder
|
||||
data={appGroups}
|
||||
schema={groupSchema}
|
||||
allowEditRows={false}
|
||||
{customRenderers}
|
||||
>
|
||||
<div class="placeholder" slot="placeholder">
|
||||
<Heading size="S">You have no groups assigned yet</Heading>
|
||||
</div>
|
||||
</Table>
|
||||
</Layout>
|
||||
{/if}
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
<Modal bind:this={assignmentModal}>
|
||||
<AssignmentModal {app} {appUsers} on:update={usersFetch.refresh} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.placeholder {
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: calc(-1 * var(--spacing-s));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Body,
|
||||
Button,
|
||||
InlineAlert,
|
||||
Heading,
|
||||
Icon,
|
||||
} from "@budibase/bbui"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
export let history
|
||||
export let appId
|
||||
export let close
|
||||
const STOPPED_ERROR = "stopped_error"
|
||||
|
||||
$: exists = $automationStore.automations?.find(
|
||||
auto => auto._id === history?.automationId
|
||||
)
|
||||
</script>
|
||||
|
||||
{#if history}
|
||||
<Layout noPadding>
|
||||
<div class="controls">
|
||||
<StatusRenderer value={history.status} />
|
||||
<Icon hoverable name="Close" on:click={close} />
|
||||
</div>
|
||||
<Layout noPadding gap="XS">
|
||||
<Heading>{history.automationName}</Heading>
|
||||
<DateTimeRenderer value={history.createdAt} />
|
||||
</Layout>
|
||||
{#if history.status === STOPPED_ERROR}
|
||||
<div class="cron-error">
|
||||
<InlineAlert
|
||||
type="error"
|
||||
header="CRON automation disabled"
|
||||
message="Fix the error and re-publish your app to re-activate."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if exists}
|
||||
<div>
|
||||
<Button
|
||||
secondary
|
||||
on:click={() => {
|
||||
$goto(`../../../../app/${appId}/automate/${history.automationId}`)
|
||||
}}
|
||||
>
|
||||
Edit automation
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{#key history}
|
||||
<div class="history">
|
||||
<TestDisplay testResults={history} width="100%" />
|
||||
</div>
|
||||
{/key}
|
||||
</Layout>
|
||||
{:else}
|
||||
<Body>No details found</Body>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: var(--spacing-s);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.cron-error {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.history {
|
||||
margin: 0 -30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
import { Badge } from "@budibase/bbui"
|
||||
export let value
|
||||
|
||||
$: isError = !value || value.toLowerCase() === "error"
|
||||
$: isStoppedError = value?.toLowerCase() === "stopped_error"
|
||||
$: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
|
||||
$: info = getInfo(isError, isStopped)
|
||||
|
||||
const getInfo = (error, stopped) => {
|
||||
if (error) {
|
||||
return { color: "red", message: "Error" }
|
||||
} else if (stopped) {
|
||||
return { color: "yellow", message: "Stopped" }
|
||||
} else {
|
||||
return { color: "green", message: "Success" }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Badge
|
||||
green={info.color === "green"}
|
||||
red={info.color === "red"}
|
||||
yellow={info.color === "yellow"}
|
||||
>
|
||||
{info.message}
|
||||
</Badge>
|
||||
|
|
@ -1,21 +1,29 @@
|
|||
<script>
|
||||
import { Layout, Table, Select, Pagination, Button } from "@budibase/bbui"
|
||||
import {
|
||||
Layout,
|
||||
Table,
|
||||
Select,
|
||||
Pagination,
|
||||
Button,
|
||||
Body,
|
||||
Heading,
|
||||
Divider,
|
||||
} from "@budibase/bbui"
|
||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
|
||||
import StatusRenderer from "./_components/StatusRenderer.svelte"
|
||||
import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
|
||||
import { automationStore } from "builderStore"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import { onMount } from "svelte"
|
||||
import { getContext, onDestroy, onMount } from "svelte"
|
||||
import dayjs from "dayjs"
|
||||
import { auth, licensing, admin } from "stores/portal"
|
||||
import { auth, licensing, admin, overview } from "stores/portal"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
import Portal from "svelte-portal"
|
||||
|
||||
const ERROR = "error",
|
||||
SUCCESS = "success",
|
||||
STOPPED = "stopped"
|
||||
export let app
|
||||
|
||||
$: licensePlan = $auth.user?.license?.plan
|
||||
const sidePanel = getContext("side-panel")
|
||||
|
||||
let pageInfo = createPaginationStore()
|
||||
let runHistory = null
|
||||
|
|
@ -25,7 +33,10 @@
|
|||
let automationId = null
|
||||
let status = null
|
||||
let timeRange = null
|
||||
let loaded = false
|
||||
|
||||
$: licensePlan = $auth.user?.license?.plan
|
||||
$: app = $overview.selectedApp
|
||||
$: page = $pageInfo.page
|
||||
$: fetchLogs(automationId, status, page, timeRange)
|
||||
|
||||
|
|
@ -47,8 +58,8 @@
|
|||
|
||||
const runHistorySchema = {
|
||||
status: { displayName: "Status" },
|
||||
createdAt: { displayName: "Time" },
|
||||
automationName: { displayName: "Automation" },
|
||||
createdAt: { displayName: "Time" },
|
||||
}
|
||||
|
||||
const customRenderers = [
|
||||
|
|
@ -56,7 +67,16 @@
|
|||
{ column: "status", component: StatusRenderer },
|
||||
]
|
||||
|
||||
async function fetchLogs(automationId, status, page, timeRange) {
|
||||
async function fetchLogs(
|
||||
automationId,
|
||||
status,
|
||||
page,
|
||||
timeRange,
|
||||
force = false
|
||||
) {
|
||||
if (!force && !loaded) {
|
||||
return
|
||||
}
|
||||
let startDate = null
|
||||
if (timeRange) {
|
||||
const [length, units] = timeRange.split("-")
|
||||
|
|
@ -101,159 +121,140 @@
|
|||
|
||||
function viewDetails({ detail }) {
|
||||
selectedHistory = detail
|
||||
showPanel = true
|
||||
sidePanel.open()
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await automationStore.actions.fetch()
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const shouldOpen = params.get("open") === ERROR
|
||||
// open with errors, open panel for latest
|
||||
if (shouldOpen) {
|
||||
status = ERROR
|
||||
}
|
||||
await automationStore.actions.fetch()
|
||||
await fetchLogs(null, status)
|
||||
if (shouldOpen) {
|
||||
viewDetails({ detail: runHistory[0] })
|
||||
}
|
||||
automationOptions = []
|
||||
for (let automation of $automationStore.automations) {
|
||||
automationOptions.push({ value: automation._id, label: automation.name })
|
||||
}
|
||||
await fetchLogs(automationId, status, 0, timeRange, true)
|
||||
// Open the first automation info if one exists
|
||||
if (shouldOpen && runHistory?.[0]) {
|
||||
viewDetails({ detail: runHistory[0] })
|
||||
}
|
||||
loaded = true
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
sidePanel.close()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="root" class:panelOpen={showPanel}>
|
||||
<Layout noPadding gap="M" alignContent="start">
|
||||
<div class="search">
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All automations"
|
||||
label="Automation"
|
||||
bind:value={automationId}
|
||||
options={automationOptions}
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Date range"
|
||||
bind:value={timeRange}
|
||||
options={timeOptions}
|
||||
isOptionEnabled={x => {
|
||||
if (licensePlan?.type === Constants.PlanType.FREE) {
|
||||
return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
|
||||
} else if (licensePlan?.type === Constants.PlanType.TEAM) {
|
||||
return ["90-d"].indexOf(x.value) < 0
|
||||
} else if (licensePlan?.type === Constants.PlanType.PRO) {
|
||||
return ["30-d", "90-d"].indexOf(x.value) < 0
|
||||
}
|
||||
return true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All status"
|
||||
label="Status"
|
||||
bind:value={status}
|
||||
options={statusOptions}
|
||||
/>
|
||||
</div>
|
||||
{#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
|
||||
<div class="pro-upgrade">
|
||||
<div class="pro-copy">Expand your automation log history</div>
|
||||
<Button primary newStyles on:click={$licensing.goToUpgradePage()}>
|
||||
Upgrade
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Automation History</Heading>
|
||||
<Body>View the automations your app has executed</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
|
||||
<div class="search">
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Status"
|
||||
bind:value={status}
|
||||
options={statusOptions}
|
||||
/>
|
||||
</div>
|
||||
{#if runHistory}
|
||||
<div>
|
||||
<Table
|
||||
on:click={viewDetails}
|
||||
schema={runHistorySchema}
|
||||
allowSelectRows={false}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
data={runHistory}
|
||||
{customRenderers}
|
||||
placeholderText="No history found"
|
||||
border={false}
|
||||
/>
|
||||
<div class="pagination">
|
||||
<Pagination
|
||||
page={$pageInfo.pageNumber}
|
||||
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
|
||||
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
|
||||
goToPrevPage={pageInfo.prevPage}
|
||||
goToNextPage={pageInfo.nextPage}
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Automation"
|
||||
bind:value={automationId}
|
||||
options={automationOptions}
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<Select
|
||||
placeholder="All"
|
||||
label="Date range"
|
||||
bind:value={timeRange}
|
||||
options={timeOptions}
|
||||
isOptionEnabled={x => {
|
||||
if (licensePlan?.type === Constants.PlanType.FREE) {
|
||||
return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
|
||||
} else if (licensePlan?.type === Constants.PlanType.TEAM) {
|
||||
return ["90-d"].indexOf(x.value) < 0
|
||||
} else if (licensePlan?.type === Constants.PlanType.PRO) {
|
||||
return ["30-d", "90-d"].indexOf(x.value) < 0
|
||||
}
|
||||
return true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
|
||||
<div class="pro-upgrade">
|
||||
<Button secondary on:click={$licensing.goToUpgradePage()}>
|
||||
Get more history
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
<div class="panel" class:panelShow={showPanel}>
|
||||
</div>
|
||||
|
||||
{#if runHistory}
|
||||
<div>
|
||||
<Table
|
||||
on:click={viewDetails}
|
||||
schema={runHistorySchema}
|
||||
allowSelectRows={false}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
data={runHistory}
|
||||
{customRenderers}
|
||||
placeholderText="No history found"
|
||||
border={false}
|
||||
/>
|
||||
<div class="pagination">
|
||||
<Pagination
|
||||
page={$pageInfo.pageNumber}
|
||||
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
|
||||
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
|
||||
goToPrevPage={pageInfo.prevPage}
|
||||
goToNextPage={pageInfo.nextPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
|
||||
{#if selectedHistory}
|
||||
<Portal target="#side-panel">
|
||||
<HistoryDetailsPanel
|
||||
appId={app.devId}
|
||||
bind:history={selectedHistory}
|
||||
close={() => {
|
||||
showPanel = false
|
||||
}}
|
||||
close={sidePanel.close}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Portal>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100%;
|
||||
padding: var(--spectrum-alias-grid-gutter-medium)
|
||||
var(--spectrum-alias-grid-gutter-large);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.select {
|
||||
flex-basis: 150px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: none;
|
||||
margin-top: calc(-1 * var(--spectrum-alias-grid-gutter-medium));
|
||||
}
|
||||
|
||||
.panelShow {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panelOpen {
|
||||
grid-template-columns: auto 420px;
|
||||
}
|
||||
|
||||
.pro-upgrade {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pro-copy {
|
||||
margin-right: var(--spacing-l);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,20 +16,19 @@
|
|||
Table,
|
||||
Page,
|
||||
} from "@budibase/bbui"
|
||||
import { backups, licensing, auth, admin } from "stores/portal"
|
||||
import { backups, licensing, auth, admin, overview } from "stores/portal"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import AppSizeRenderer from "./AppSizeRenderer.svelte"
|
||||
import CreateBackupModal from "./CreateBackupModal.svelte"
|
||||
import ActionsRenderer from "./ActionsRenderer.svelte"
|
||||
import DateRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||
import UserRenderer from "./UserRenderer.svelte"
|
||||
import StatusRenderer from "./StatusRenderer.svelte"
|
||||
import TypeRenderer from "./TypeRenderer.svelte"
|
||||
import NameRenderer from "./NameRenderer.svelte"
|
||||
import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
|
||||
import CreateBackupModal from "./_components/CreateBackupModal.svelte"
|
||||
import ActionsRenderer from "./_components/ActionsRenderer.svelte"
|
||||
import UserRenderer from "./_components/UserRenderer.svelte"
|
||||
import StatusRenderer from "./_components/StatusRenderer.svelte"
|
||||
import TypeRenderer from "./_components/TypeRenderer.svelte"
|
||||
import NameRenderer from "./_components/NameRenderer.svelte"
|
||||
import BackupsDefault from "assets/backups-default.png"
|
||||
import { BackupTrigger, BackupType } from "constants/backend/backups"
|
||||
import { onMount } from "svelte"
|
||||
export let app
|
||||
|
||||
let backupData = null
|
||||
let modal
|
||||
|
|
@ -61,6 +60,7 @@
|
|||
},
|
||||
]
|
||||
|
||||
$: app = $overview.selectedApp
|
||||
$: page = $pageInfo.page
|
||||
$: fetchBackups(filterOpt, page, startDate, endDate)
|
||||
|
||||
|
|
@ -165,75 +165,62 @@
|
|||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchBackups(filterOpt, page, startDate, endDate)
|
||||
onMount(async () => {
|
||||
await fetchBackups(filterOpt, page, startDate, endDate)
|
||||
loaded = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="title">
|
||||
<Heading>Backups</Heading>
|
||||
{#if !$licensing.backupsEnabled}
|
||||
<Tags>
|
||||
<Tag icon="LockClosed">Pro plan</Tag>
|
||||
</Tags>
|
||||
{/if}
|
||||
</div>
|
||||
<Body>Back up your apps and restore them to their previous state</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
|
||||
{#if !$licensing.backupsEnabled}
|
||||
<Page wide={false}>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="title">
|
||||
<Heading size="M">Backups</Heading>
|
||||
<Tags>
|
||||
<Tag icon="LockClosed">Pro plan</Tag>
|
||||
</Tags>
|
||||
</div>
|
||||
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
|
||||
<Body>Contact your account holder to upgrade your plan.</Body>
|
||||
{/if}
|
||||
<div class="pro-buttons">
|
||||
{#if $auth.accountPortalAccess}
|
||||
<Button
|
||||
primary
|
||||
disabled={!$auth.accountPortalAccess && $admin.cloud}
|
||||
on:click={$licensing.goToUpgradePage()}
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
{/if}
|
||||
<Button
|
||||
secondary
|
||||
on:click={() => {
|
||||
window.open("https://budibase.com/pricing/", "_blank")
|
||||
}}
|
||||
>
|
||||
View plans
|
||||
</Button>
|
||||
</div>
|
||||
{:else if !backupData?.length && loaded && !filterOpt && !startDate}
|
||||
<div class="center">
|
||||
<Layout noPadding gap="S" justifyItems="center">
|
||||
<img height="130px" src={BackupsDefault} alt="BackupsDefault" />
|
||||
<Layout noPadding gap="XS">
|
||||
<Heading>You have no backups yet</Heading>
|
||||
<Body>You can manually back up your app any time</Body>
|
||||
</Layout>
|
||||
<div>
|
||||
<Body>
|
||||
Back up your apps and restore them to their previous state.
|
||||
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
|
||||
Contact your account holder to upgrade your plan.
|
||||
{/if}
|
||||
</Body>
|
||||
</div>
|
||||
<Divider />
|
||||
<div class="pro-buttons">
|
||||
{#if $auth.accountPortalAccess}
|
||||
<Button
|
||||
newStyles
|
||||
primary
|
||||
disabled={!$auth.accountPortalAccess && $admin.cloud}
|
||||
on:click={$licensing.goToUpgradePage()}
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
{/if}
|
||||
<!--Show the view plans button-->
|
||||
<Button
|
||||
newStyles
|
||||
secondary
|
||||
on:click={() => {
|
||||
window.open("https://budibase.com/pricing/", "_blank")
|
||||
}}
|
||||
>
|
||||
View plans
|
||||
</Button>
|
||||
<Button on:click={modal.show} cta>Create backup</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
</Page>
|
||||
{:else if backupData?.length === 0 && !loaded && !filterOpt && !startDate}
|
||||
<Page wide={false}>
|
||||
<div class="align">
|
||||
<img
|
||||
width="220px"
|
||||
height="130px"
|
||||
src={BackupsDefault}
|
||||
alt="BackupsDefault"
|
||||
/>
|
||||
<Layout gap="S">
|
||||
<Heading>You have no backups yet</Heading>
|
||||
<div class="opacity">
|
||||
<Body size="S">You can manually backup your app any time</Body>
|
||||
</div>
|
||||
<div class="padding">
|
||||
<Button on:click={modal.show} cta>Create Backup</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
</Page>
|
||||
</div>
|
||||
{:else if loaded}
|
||||
<Layout noPadding gap="M" alignContent="start">
|
||||
<div class="search">
|
||||
|
|
@ -247,23 +234,21 @@
|
|||
bind:value={filterOpt}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<DatePicker
|
||||
range={true}
|
||||
label={"Filter Range"}
|
||||
on:change={e => {
|
||||
if (e.detail[0].length > 1) {
|
||||
startDate = e.detail[0][0].toISOString()
|
||||
endDate = e.detail[0][1].toISOString()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<DatePicker
|
||||
range={true}
|
||||
label="Date Range"
|
||||
on:change={e => {
|
||||
if (e.detail[0].length > 1) {
|
||||
startDate = e.detail[0][0].toISOString()
|
||||
endDate = e.detail[0][1].toISOString()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="split-buttons">
|
||||
<ActionButton on:click={modal.show} icon="SaveAsFloppy"
|
||||
>Create new backup</ActionButton
|
||||
>
|
||||
<ActionButton on:click={modal.show} icon="SaveAsFloppy">
|
||||
Create new backup
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
|
|
@ -291,19 +276,19 @@
|
|||
</div>
|
||||
</Layout>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<Modal bind:this={modal}>
|
||||
<CreateBackupModal {createManualBackup} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100%;
|
||||
padding: var(--spectrum-alias-grid-gutter-medium)
|
||||
var(--spectrum-alias-grid-gutter-large);
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.search {
|
||||
|
|
@ -314,7 +299,7 @@
|
|||
}
|
||||
|
||||
.select {
|
||||
flex-basis: 100px;
|
||||
flex-basis: 160px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
|
@ -329,7 +314,6 @@
|
|||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -339,11 +323,6 @@
|
|||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
.align {
|
||||
margin-top: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pro-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-m);
|
||||
|
|
@ -352,4 +331,9 @@
|
|||
.table {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<script>
|
||||
import { redirect } from "@roxi/routify"
|
||||
$redirect("./overview")
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Divider,
|
||||
Heading,
|
||||
Body,
|
||||
Button,
|
||||
Label,
|
||||
Modal,
|
||||
Icon,
|
||||
} from "@budibase/bbui"
|
||||
import { AppStatus } from "constants"
|
||||
import { overview } from "stores/portal"
|
||||
import UpdateAppModal from "components/start/UpdateAppModal.svelte"
|
||||
|
||||
let updatingModal
|
||||
|
||||
$: app = $overview.selectedApp
|
||||
$: appUrl = `${window.origin}/app${app?.url}`
|
||||
$: appDeployed = app?.status === AppStatus.DEPLOYED
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Name and URL</Heading>
|
||||
<Body>Edit your app's name and URL</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
|
||||
<Layout noPadding gap="XXS">
|
||||
<Label size="L">Name</Label>
|
||||
<Body>{app?.name}</Body>
|
||||
</Layout>
|
||||
|
||||
<Layout noPadding gap="XS">
|
||||
<Label size="L">Icon</Label>
|
||||
<div class="icon">
|
||||
<Icon
|
||||
size="L"
|
||||
name={app?.icon?.name || "Apps"}
|
||||
color={app?.icon?.color}
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<Layout noPadding gap="XXS">
|
||||
<Label size="L">URL</Label>
|
||||
<Body>{appUrl}</Body>
|
||||
</Layout>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
cta
|
||||
on:click={() => {
|
||||
updatingModal.show()
|
||||
}}
|
||||
disabled={appDeployed}
|
||||
tooltip={appDeployed
|
||||
? "You must unpublish your app to make changes to these settings"
|
||||
: null}
|
||||
icon={appDeployed ? "HelpOutline" : null}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<Modal bind:this={updatingModal} padding={false} width="600px">
|
||||
<UpdateAppModal app={$overview.selectedApp} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +1,54 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import DashCard from "components/common/DashCard.svelte"
|
||||
import { AppStatus } from "constants"
|
||||
import { Icon, Heading, Link, Avatar, Layout, Body } from "@budibase/bbui"
|
||||
import { goto } from "@roxi/routify"
|
||||
import {
|
||||
Icon,
|
||||
Heading,
|
||||
Link,
|
||||
Avatar,
|
||||
Layout,
|
||||
Body,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
import clientPackage from "@budibase/client/package.json"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
import { users, auth, apps, groups } from "stores/portal"
|
||||
import { users, auth, apps, groups, overview } from "stores/portal"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { fetchData } from "@budibase/frontend-core"
|
||||
import { API } from "api"
|
||||
import GroupIcon from "../../manage/groups/_components/GroupIcon.svelte"
|
||||
|
||||
export let app
|
||||
export let deployments
|
||||
export let navigateTab
|
||||
import GroupIcon from "../../users/groups/_components/GroupIcon.svelte"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import { checkIncomingDeploymentStatus } from "components/deploy/utils"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const appUsersFetch = fetchData({
|
||||
|
||||
let appEditor
|
||||
let unpublishModal
|
||||
let deployments
|
||||
|
||||
$: app = $overview.selectedApp
|
||||
$: devAppId = app.devId
|
||||
$: prodAppId = apps.getProdAppID(devAppId)
|
||||
$: appUsersFetch = fetchData({
|
||||
API,
|
||||
datasource: {
|
||||
type: "user",
|
||||
},
|
||||
options: {
|
||||
query: {
|
||||
appId: apps.getProdAppID(app.devId),
|
||||
appId: apps.getProdAppID(devAppId),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
let appEditor
|
||||
|
||||
$: updateAvailable = clientPackage.version !== $store.version
|
||||
$: isPublished = app?.status === AppStatus.DEPLOYED
|
||||
$: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy
|
||||
$: appEditorText = appEditor?.firstName || appEditor?.email
|
||||
$: fetchAppEditor(appEditorId)
|
||||
$: appUsers = $appUsersFetch.rows || []
|
||||
$: appUsersFetch.update({
|
||||
query: {
|
||||
appId: apps.getProdAppID(app.devId),
|
||||
},
|
||||
})
|
||||
$: prodAppId = apps.getProdAppID(app.devId)
|
||||
$: appGroups = $groups.filter(group => {
|
||||
if (!group.roles) {
|
||||
return false
|
||||
|
|
@ -49,10 +56,6 @@
|
|||
return groups.actions.getGroupAppIds(group).includes(prodAppId)
|
||||
})
|
||||
|
||||
const unpublishApp = () => {
|
||||
dispatch("unpublish", app)
|
||||
}
|
||||
|
||||
async function fetchAppEditor(editorId) {
|
||||
appEditor = await users.get(editorId)
|
||||
}
|
||||
|
|
@ -64,10 +67,45 @@
|
|||
|
||||
return initials === "" ? user.email[0] : initials
|
||||
}
|
||||
|
||||
const confirmUnpublishApp = async () => {
|
||||
try {
|
||||
await API.unpublishApp(app.prodId)
|
||||
await apps.load()
|
||||
notifications.success("App unpublished successfully")
|
||||
} catch (err) {
|
||||
notifications.error("Error unpublishing app")
|
||||
}
|
||||
}
|
||||
|
||||
const reviewPendingDeployments = (deployments, newDeployments) => {
|
||||
if (deployments?.length > 0) {
|
||||
const pending = checkIncomingDeploymentStatus(deployments, newDeployments)
|
||||
if (pending.length) {
|
||||
notifications.warning(
|
||||
"Deployment has been queued and will be processed shortly"
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
async function fetchDeployments() {
|
||||
try {
|
||||
const newDeployments = await API.getAppDeployments()
|
||||
reviewPendingDeployments(deployments, newDeployments)
|
||||
return newDeployments
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
notifications.error("Error fetching deployment history")
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
deployments = await fetchDeployments()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="overview-tab">
|
||||
<Layout paddingX="XXL" paddingY="XXL" gap="XL">
|
||||
<Layout noPadding gap="XL">
|
||||
<div class="top">
|
||||
<DashCard title={"App Status"} dataCy={"app-status"}>
|
||||
<div class="status-content">
|
||||
|
|
@ -77,7 +115,7 @@
|
|||
<span>Published</span>
|
||||
{:else}
|
||||
<Icon name="GlobeStrike" size="XL" disabled={true} />
|
||||
<span class="disabled"> Unpublished </span>
|
||||
<span class="disabled">Unpublished</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
@ -92,7 +130,7 @@
|
|||
}
|
||||
)}
|
||||
{#if isPublished}
|
||||
- <Link on:click={unpublishApp}>Unpublish</Link>
|
||||
- <Link on:click={unpublishModal.show}>Unpublish</Link>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !deployments?.length}
|
||||
|
|
@ -127,10 +165,10 @@
|
|||
</DashCard>
|
||||
{/if}
|
||||
<DashCard
|
||||
title={"App Version"}
|
||||
title={"Version"}
|
||||
showIcon={true}
|
||||
action={() => {
|
||||
navigateTab("Settings")
|
||||
$goto("./version")
|
||||
}}
|
||||
dataCy={"app-version"}
|
||||
>
|
||||
|
|
@ -142,9 +180,7 @@
|
|||
-
|
||||
<Link
|
||||
on:click={() => {
|
||||
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 @@
|
|||
<DashCard
|
||||
title={"Automation History"}
|
||||
action={() => {
|
||||
navigateTab("Automation History")
|
||||
$goto("../automation-history")
|
||||
}}
|
||||
dataCy={"automation-history"}
|
||||
>
|
||||
|
|
@ -237,7 +273,7 @@
|
|||
<DashCard
|
||||
title={"Backups"}
|
||||
action={() => {
|
||||
navigateTab("Backups")
|
||||
$goto("../backups")
|
||||
}}
|
||||
dataCy={"backups"}
|
||||
>
|
||||
|
|
@ -248,6 +284,16 @@
|
|||
</Layout>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={unpublishModal}
|
||||
title="Confirm unpublish"
|
||||
okText="Unpublish app"
|
||||
onOk={confirmUnpublishApp}
|
||||
dataCy={"unpublish-modal"}
|
||||
>
|
||||
Are you sure you want to unpublish the app <b>{app?.name}</b>?
|
||||
</ConfirmDialog>
|
||||
|
||||
<style>
|
||||
.overview-tab {
|
||||
display: grid;
|
||||
|
|
@ -256,7 +302,7 @@
|
|||
.overview-tab .top {
|
||||
display: grid;
|
||||
grid-gap: var(--spectrum-alias-grid-gutter-medium);
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
.access-tab-content {
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import { Layout, Heading, Body, Divider, Button } from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
import clientPackage from "@budibase/client/package.json"
|
||||
import VersionModal from "components/deploy/VersionModal.svelte"
|
||||
|
||||
let versionModal
|
||||
|
||||
$: updateAvailable = clientPackage.version !== $store.version
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading>Version</Heading>
|
||||
<Body>See the current version of your app and check for updates</Body>
|
||||
</Layout>
|
||||
<Divider />
|
||||
{#if updateAvailable}
|
||||
<Body>
|
||||
The app is currently using version <strong>{$store.version}</strong>
|
||||
but version <strong>{clientPackage.version}</strong> is available.
|
||||
<br />
|
||||
Updates can contain new features, performance improvements and bug fixes.
|
||||
</Body>
|
||||
<div>
|
||||
<Button cta on:click={versionModal.show}>Update app</Button>
|
||||
</div>
|
||||
{:else}
|
||||
<Body>
|
||||
The app is currently using version <strong>{$store.version}</strong>.
|
||||
<br />
|
||||
You're running the latest!
|
||||
</Body>
|
||||
<div>
|
||||
<Button secondary on:click={versionModal.show}>Revert app</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
|
||||
<VersionModal bind:this={versionModal} hideIcon={true} />
|
||||
|
|
@ -1,417 +0,0 @@
|
|||
<script>
|
||||
import { goto } from "@roxi/routify"
|
||||
import {
|
||||
Layout,
|
||||
Page,
|
||||
Button,
|
||||
ActionButton,
|
||||
ButtonGroup,
|
||||
Heading,
|
||||
Tab,
|
||||
Tabs,
|
||||
notifications,
|
||||
ProgressCircle,
|
||||
Input,
|
||||
ActionMenu,
|
||||
MenuItem,
|
||||
Icon,
|
||||
Helpers,
|
||||
Modal,
|
||||
} 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, groups } from "stores/portal"
|
||||
import analytics, { Events, EventSource } from "analytics"
|
||||
import { AppStatus } from "constants"
|
||||
import AppLockModal from "components/common/AppLockModal.svelte"
|
||||
import EditableIcon from "components/common/EditableIcon.svelte"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import HistoryTab from "components/portal/overview/automation/HistoryTab.svelte"
|
||||
import ExportAppModal from "components/start/ExportAppModal.svelte"
|
||||
import { checkIncomingDeploymentStatus } from "components/deploy/utils"
|
||||
import { onDestroy, onMount } from "svelte"
|
||||
import BackupsTab from "components/portal/overview/backups/BackupsTab.svelte"
|
||||
|
||||
export let application
|
||||
|
||||
let loaded = false
|
||||
let deletionModal
|
||||
let unpublishModal
|
||||
let exportModal
|
||||
let appName = ""
|
||||
let deployments = []
|
||||
let published
|
||||
|
||||
// App
|
||||
$: filteredApps = $apps.filter(app => app.devId === application)
|
||||
$: selectedApp = filteredApps?.length ? filteredApps[0] : null
|
||||
$: loaded && !selectedApp && backToAppList()
|
||||
$: isPublished =
|
||||
selectedApp?.status === AppStatus.DEPLOYED && latestDeployments?.length > 0
|
||||
$: appUrl = `${window.origin}/app${selectedApp?.url}`
|
||||
|
||||
// Locking
|
||||
$: lockedBy = selectedApp?.lockedBy
|
||||
$: lockedByYou = $auth.user.email === lockedBy?.email
|
||||
$: lockIdentifer = `${
|
||||
lockedBy && Object.prototype.hasOwnProperty.call(lockedBy, "firstName")
|
||||
? lockedBy?.firstName
|
||||
: lockedBy?.email
|
||||
}`
|
||||
|
||||
// App deployments
|
||||
$: latestDeployments = deployments
|
||||
.filter(x => x.status === "SUCCESS" && application === x.appId)
|
||||
.sort((a, b) => a.updatedAt > b.updatedAt)
|
||||
|
||||
// Tabs
|
||||
$: tabs = ["Overview", "Automation History", "Backups", "Settings", "Access"]
|
||||
$: selectedTab = "Overview"
|
||||
|
||||
const backToAppList = () => {
|
||||
$goto(`../../../portal/`)
|
||||
}
|
||||
|
||||
const handleTabChange = tabKey => {
|
||||
if (tabKey === selectedTab) {
|
||||
return
|
||||
} else if (tabKey && tabs.indexOf(tabKey) > -1) {
|
||||
selectedTab = tabKey
|
||||
} else {
|
||||
notifications.error("Invalid tab key")
|
||||
}
|
||||
}
|
||||
|
||||
const reviewPendingDeployments = (deployments, newDeployments) => {
|
||||
if (deployments.length > 0) {
|
||||
const pending = checkIncomingDeploymentStatus(deployments, newDeployments)
|
||||
if (pending.length) {
|
||||
notifications.warning(
|
||||
"Deployment has been queued and will be processed shortly"
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDeployments() {
|
||||
try {
|
||||
const newDeployments = await API.getAppDeployments()
|
||||
reviewPendingDeployments(deployments, newDeployments)
|
||||
return newDeployments
|
||||
} catch (err) {
|
||||
notifications.error("Error fetching deployment history")
|
||||
}
|
||||
}
|
||||
|
||||
const viewApp = () => {
|
||||
if (isPublished) {
|
||||
analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
|
||||
appId: $store.appId,
|
||||
eventSource: EventSource.PORTAL,
|
||||
})
|
||||
window.open(appUrl, "_blank")
|
||||
}
|
||||
}
|
||||
|
||||
const editApp = app => {
|
||||
if (lockedBy && !lockedByYou) {
|
||||
notifications.warning(
|
||||
`App locked by ${lockIdentifer}. Please allow lock to expire or have them unlock this app.`
|
||||
)
|
||||
return
|
||||
}
|
||||
$goto(`../../../app/${app.devId}`)
|
||||
}
|
||||
|
||||
const copyAppId = async app => {
|
||||
await Helpers.copyToClipboard(app.prodId)
|
||||
notifications.success("App ID copied to clipboard.")
|
||||
}
|
||||
|
||||
const exportApp = opts => {
|
||||
published = opts.published
|
||||
exportModal.show()
|
||||
}
|
||||
|
||||
const unpublishApp = app => {
|
||||
selectedApp = app
|
||||
unpublishModal.show()
|
||||
}
|
||||
|
||||
const confirmUnpublishApp = async () => {
|
||||
if (!selectedApp) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await API.unpublishApp(selectedApp.prodId)
|
||||
await apps.load()
|
||||
notifications.success("App unpublished successfully")
|
||||
} catch (err) {
|
||||
notifications.error("Error unpublishing app")
|
||||
}
|
||||
}
|
||||
|
||||
const deleteApp = app => {
|
||||
selectedApp = app
|
||||
deletionModal.show()
|
||||
}
|
||||
|
||||
const confirmDeleteApp = async () => {
|
||||
if (!selectedApp) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await API.deleteApp(selectedApp?.devId)
|
||||
backToAppList()
|
||||
notifications.success("App deleted successfully")
|
||||
} catch (err) {
|
||||
notifications.error("Error deleting app")
|
||||
}
|
||||
selectedApp = null
|
||||
appName = null
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
if (params.get("tab")) {
|
||||
selectedTab = params.get("tab")
|
||||
}
|
||||
|
||||
// Check app exists
|
||||
try {
|
||||
const pkg = await API.fetchAppPackage(application)
|
||||
await store.actions.initialise(pkg)
|
||||
} catch (error) {
|
||||
// Swallow
|
||||
backToAppList()
|
||||
}
|
||||
|
||||
// Initialise application
|
||||
try {
|
||||
await API.syncApp(application)
|
||||
deployments = await fetchDeployments()
|
||||
await groups.actions.init()
|
||||
if (!apps.length) {
|
||||
await apps.load()
|
||||
}
|
||||
} catch (error) {
|
||||
notifications.error("Error initialising app overview")
|
||||
}
|
||||
loaded = true
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
store.actions.reset()
|
||||
})
|
||||
</script>
|
||||
|
||||
<Modal bind:this={exportModal} padding={false} width="600px">
|
||||
<ExportAppModal app={selectedApp} {published} />
|
||||
</Modal>
|
||||
|
||||
<span class="overview-wrap">
|
||||
<Page wide noPadding>
|
||||
{#if !loaded || !selectedApp}
|
||||
<div class="loading">
|
||||
<ProgressCircle size="XL" />
|
||||
</div>
|
||||
{:else}
|
||||
<Layout paddingX="XXL" paddingY="XL" gap="L">
|
||||
<span class="page-header" class:loaded>
|
||||
<ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
|
||||
Back
|
||||
</ActionButton>
|
||||
</span>
|
||||
<div class="overview-header">
|
||||
<div class="app-title">
|
||||
<div class="app-logo">
|
||||
<div
|
||||
class="app-icon"
|
||||
style="color: {selectedApp?.icon?.color || ''}"
|
||||
>
|
||||
<EditableIcon
|
||||
app={selectedApp}
|
||||
size="XL"
|
||||
name={selectedApp?.icon?.name || "Apps"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-details">
|
||||
<Heading size="M">{selectedApp?.name}</Heading>
|
||||
<div class="app-url">{appUrl}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<AppLockModal app={selectedApp} />
|
||||
<ButtonGroup gap="XS">
|
||||
<Button
|
||||
size="M"
|
||||
quiet
|
||||
secondary
|
||||
icon="Globe"
|
||||
disabled={!isPublished}
|
||||
on:click={viewApp}
|
||||
dataCy="view-app"
|
||||
>
|
||||
View app
|
||||
</Button>
|
||||
<Button
|
||||
size="M"
|
||||
cta
|
||||
icon="Edit"
|
||||
disabled={lockedBy && !lockedByYou}
|
||||
on:click={() => {
|
||||
editApp(selectedApp)
|
||||
}}
|
||||
>
|
||||
<span>Edit</span>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ActionMenu align="right" dataCy="app-overview-menu-popover">
|
||||
<span slot="control" class="app-overview-actions-icon">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem
|
||||
on:click={() => exportApp({ published: false })}
|
||||
icon="DownloadFromCloud"
|
||||
>
|
||||
Export latest
|
||||
</MenuItem>
|
||||
{#if isPublished}
|
||||
<MenuItem
|
||||
on:click={() => exportApp({ published: true })}
|
||||
icon="DownloadFromCloudOutline"
|
||||
>
|
||||
Export published
|
||||
</MenuItem>
|
||||
<MenuItem on:click={() => copyAppId(selectedApp)} icon="Copy">
|
||||
Copy app ID
|
||||
</MenuItem>
|
||||
{/if}
|
||||
{#if !isPublished}
|
||||
<MenuItem on:click={() => deleteApp(selectedApp)} icon="Delete">
|
||||
Delete
|
||||
</MenuItem>
|
||||
{/if}
|
||||
</ActionMenu>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
<div class="tab-wrap">
|
||||
<Tabs
|
||||
selected={selectedTab}
|
||||
noPadding
|
||||
on:select={e => {
|
||||
selectedTab = e.detail
|
||||
}}
|
||||
>
|
||||
<Tab title="Overview">
|
||||
<OverviewTab
|
||||
app={selectedApp}
|
||||
deployments={latestDeployments}
|
||||
navigateTab={handleTabChange}
|
||||
on:unpublish={e => unpublishApp(e.detail)}
|
||||
/>
|
||||
</Tab>
|
||||
<Tab title="Access">
|
||||
<AccessTab app={selectedApp} />
|
||||
</Tab>
|
||||
<Tab title="Automation History">
|
||||
<HistoryTab app={selectedApp} />
|
||||
</Tab>
|
||||
<Tab title="Backups">
|
||||
<BackupsTab app={selectedApp} />
|
||||
</Tab>
|
||||
<Tab title="Settings">
|
||||
<SettingsTab app={selectedApp} />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
bind:this={deletionModal}
|
||||
title="Confirm deletion"
|
||||
okText="Delete app"
|
||||
onOk={confirmDeleteApp}
|
||||
onCancel={() => (appName = null)}
|
||||
disabled={appName !== selectedApp?.name}
|
||||
>
|
||||
Are you sure you want to delete the app <b>{selectedApp?.name}</b>?
|
||||
|
||||
<p>Please enter the app name below to confirm.</p>
|
||||
<Input
|
||||
bind:value={appName}
|
||||
data-cy="delete-app-confirmation"
|
||||
placeholder={selectedApp?.name}
|
||||
/>
|
||||
</ConfirmDialog>
|
||||
<ConfirmDialog
|
||||
bind:this={unpublishModal}
|
||||
title="Confirm unpublish"
|
||||
okText="Unpublish app"
|
||||
onOk={confirmUnpublishApp}
|
||||
dataCy={"unpublish-modal"}
|
||||
>
|
||||
Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
|
||||
</ConfirmDialog>
|
||||
{/if}
|
||||
</Page>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.app-url {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
.overview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.page-header.loaded {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.overview-wrap :global(> div > .container),
|
||||
.tab-wrap :global(.spectrum-Tabs) {
|
||||
background-color: var(--background);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.overview-header {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.app-title {
|
||||
display: flex;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
.app-details :global(.spectrum-Heading) {
|
||||
line-height: 1em;
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
.tab-wrap :global(> .spectrum-Tabs) {
|
||||
padding-left: var(--spectrum-alias-grid-gutter-large);
|
||||
padding-right: var(--spectrum-alias-grid-gutter-large);
|
||||
}
|
||||
.page-header {
|
||||
padding-left: var(--spectrum-alias-grid-gutter-large);
|
||||
padding-right: var(--spectrum-alias-grid-gutter-large);
|
||||
padding-top: var(--spectrum-alias-grid-gutter-large);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Heading,
|
||||
Body,
|
||||
Button,
|
||||
List,
|
||||
ListItem,
|
||||
Modal,
|
||||
notifications,
|
||||
Pagination,
|
||||
Icon,
|
||||
} from "@budibase/bbui"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import RoleSelect from "components/common/RoleSelect.svelte"
|
||||
import { users, groups, apps, licensing } from "stores/portal"
|
||||
import AssignmentModal from "./AssignmentModal.svelte"
|
||||
import { roles } from "stores/backend"
|
||||
import { API } from "api"
|
||||
import { fetchData } from "@budibase/frontend-core"
|
||||
|
||||
export let app
|
||||
|
||||
const usersFetch = fetchData({
|
||||
API,
|
||||
datasource: {
|
||||
type: "user",
|
||||
},
|
||||
options: {
|
||||
query: {
|
||||
appId: apps.getProdAppID(app.devId),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
let assignmentModal
|
||||
let appGroups
|
||||
let appUsers
|
||||
|
||||
$: fixedAppId = apps.getProdAppID(app.devId)
|
||||
$: appUsers = $usersFetch.rows
|
||||
$: appGroups = $groups.filter(group => {
|
||||
if (!group.roles) {
|
||||
return false
|
||||
}
|
||||
return groups.actions.getGroupAppIds(group).includes(fixedAppId)
|
||||
})
|
||||
|
||||
async function removeUser(user) {
|
||||
// Remove the user role
|
||||
const filteredRoles = { ...user.roles }
|
||||
delete filteredRoles[fixedAppId]
|
||||
await users.save({
|
||||
...user,
|
||||
roles: {
|
||||
...filteredRoles,
|
||||
},
|
||||
})
|
||||
await usersFetch.refresh()
|
||||
}
|
||||
|
||||
async function removeGroup(group) {
|
||||
await groups.actions.removeApp(group._id, fixedAppId)
|
||||
await groups.actions.init()
|
||||
await usersFetch.refresh()
|
||||
}
|
||||
|
||||
async function updateUserRole(role, user) {
|
||||
user.roles[fixedAppId] = role
|
||||
await users.save(user)
|
||||
}
|
||||
|
||||
async function updateGroupRole(role, group) {
|
||||
await groups.actions.addApp(group._id, fixedAppId, role)
|
||||
await usersFetch.refresh()
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await roles.fetch()
|
||||
} catch (error) {
|
||||
notifications.error(error)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="access-tab">
|
||||
<Layout>
|
||||
{#if appGroups.length || appUsers.length}
|
||||
<div>
|
||||
<Heading>Access</Heading>
|
||||
<div class="subtitle">
|
||||
<Body size="S">
|
||||
Assign users and groups to your app and define their access here
|
||||
</Body>
|
||||
<Button on:click={assignmentModal.show} icon="User" cta>
|
||||
Assign access
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{#if $licensing.groupsEnabled && appGroups.length}
|
||||
<List title="User Groups">
|
||||
{#each appGroups as group}
|
||||
<ListItem
|
||||
title={group.name}
|
||||
icon={group.icon}
|
||||
iconBackground={group.color}
|
||||
>
|
||||
<RoleSelect
|
||||
on:change={e => updateGroupRole(e.detail, group)}
|
||||
autoWidth
|
||||
quiet
|
||||
value={group.roles[
|
||||
groups.actions
|
||||
.getGroupAppIds(group)
|
||||
.find(x => x === fixedAppId)
|
||||
]}
|
||||
allowPublic={false}
|
||||
/>
|
||||
<Icon
|
||||
on:click={() => removeGroup(group)}
|
||||
hoverable
|
||||
size="S"
|
||||
name="Close"
|
||||
/>
|
||||
</ListItem>
|
||||
{/each}
|
||||
</List>
|
||||
{/if}
|
||||
{#if appUsers.length}
|
||||
<div>
|
||||
<List title="Users">
|
||||
{#each appUsers as user}
|
||||
<ListItem title={user.email} avatar>
|
||||
<RoleSelect
|
||||
on:change={e => updateUserRole(e.detail, user)}
|
||||
autoWidth
|
||||
quiet
|
||||
value={user.roles[
|
||||
Object.keys(user.roles).find(x => x === fixedAppId)
|
||||
]}
|
||||
allowPublic={false}
|
||||
/>
|
||||
<Icon
|
||||
on:click={() => removeUser(user)}
|
||||
hoverable
|
||||
size="S"
|
||||
name="Close"
|
||||
/>
|
||||
</ListItem>
|
||||
{/each}
|
||||
</List>
|
||||
<div class="pagination">
|
||||
<Pagination
|
||||
page={$usersFetch.pageNumber + 1}
|
||||
hasPrevPage={$usersFetch.hasPrevPage}
|
||||
hasNextPage={$usersFetch.hasNextPage}
|
||||
goToPrevPage={$usersFetch.loading ? null : usersFetch.prevPage}
|
||||
goToNextPage={$usersFetch.loading ? null : usersFetch.nextPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="align">
|
||||
<Layout gap="S">
|
||||
<Heading>No users assigned</Heading>
|
||||
<div class="opacity">
|
||||
<Body size="S">
|
||||
Assign users/groups to your app and set their access here
|
||||
</Body>
|
||||
</div>
|
||||
<div class="padding">
|
||||
<Button
|
||||
on:click={() => assignmentModal.show()}
|
||||
cta
|
||||
icon="UserArrow"
|
||||
>
|
||||
Assign access
|
||||
</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
<Modal bind:this={assignmentModal}>
|
||||
<AssignmentModal {app} {appUsers} on:update={usersFetch.refresh} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.access-tab {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.padding {
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
.opacity {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.align {
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
//export let app
|
||||
</script>
|
||||
|
||||
<div class="automation-tab" />
|
||||
|
||||
<style>
|
||||
.automation-tab {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
Layout,
|
||||
Divider,
|
||||
Heading,
|
||||
Body,
|
||||
Page,
|
||||
Button,
|
||||
Modal,
|
||||
} from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
import clientPackage from "@budibase/client/package.json"
|
||||
import VersionModal from "components/deploy/VersionModal.svelte"
|
||||
import UpdateAppModal from "components/start/UpdateAppModal.svelte"
|
||||
import { AppStatus } from "constants"
|
||||
|
||||
export let app
|
||||
|
||||
let versionModal
|
||||
let updatingModal
|
||||
|
||||
$: updateAvailable = clientPackage.version !== $store.version
|
||||
$: appUrl = `${window.origin}/app${app?.url}`
|
||||
$: appDeployed = app?.status === AppStatus.DEPLOYED
|
||||
</script>
|
||||
|
||||
<div class="settings-tab">
|
||||
<Page wide={false}>
|
||||
<Layout gap="XL" paddingY="XXL" paddingX="">
|
||||
<span class="details-section">
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading size="S">Name and URL</Heading>
|
||||
<Divider />
|
||||
<Body>
|
||||
<div class="app-details">
|
||||
<div class="app-name">
|
||||
<div class="name-title detail-title">Name</div>
|
||||
<div class="name">{app?.name}</div>
|
||||
</div>
|
||||
<div class="app-url">
|
||||
<div class="url-title detail-title">Url Path</div>
|
||||
<div class="url">{appUrl}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-action">
|
||||
<Button
|
||||
cta
|
||||
secondary
|
||||
on:click={() => {
|
||||
updatingModal.show()
|
||||
}}
|
||||
disabled={appDeployed}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</Body>
|
||||
</Layout>
|
||||
</span>
|
||||
<span class="version-section">
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading size="S">App version</Heading>
|
||||
<Divider />
|
||||
<Body>
|
||||
{#if updateAvailable}
|
||||
<Body>
|
||||
The app is currently using version
|
||||
<strong>{$store.version}</strong>
|
||||
but version <strong>{clientPackage.version}</strong> is
|
||||
available.
|
||||
<br />
|
||||
Updates can contain new features, performance improvements and bug
|
||||
fixes.
|
||||
</Body>
|
||||
<div class="page-action">
|
||||
<Button cta on:click={versionModal.show()}>Update app</Button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="version-status">
|
||||
The app is currently using version
|
||||
<strong>{$store.version}</strong>. You're running the latest!
|
||||
</div>
|
||||
<div class="page-action">
|
||||
<Button secondary on:click={versionModal.show()}>
|
||||
Revert app
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</Body>
|
||||
</Layout>
|
||||
</span>
|
||||
</Layout>
|
||||
<VersionModal bind:this={versionModal} hideIcon={true} />
|
||||
<Modal bind:this={updatingModal} padding={false} width="600px">
|
||||
<UpdateAppModal {app} />
|
||||
</Modal>
|
||||
</Page>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-action {
|
||||
padding-top: var(--spacing-xl);
|
||||
}
|
||||
.app-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
.detail-title {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
font-size: var(
|
||||
--spectrum-alias-font-size-default,
|
||||
var(--spectrum-global-dimension-font-size-100)
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { apps, groups, licensing } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let loaded = !!$apps?.length
|
||||
|
||||
onMount(async () => {
|
||||
if (!loaded) {
|
||||
await apps.load()
|
||||
if ($licensing.groupsEnabled) {
|
||||
await groups.actions.init()
|
||||
}
|
||||
loaded = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
<slot />
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<script>
|
||||
import { redirect } from "@roxi/routify"
|
||||
$redirect("../")
|
||||
</script>
|
||||
|
|
@ -9,8 +9,9 @@
|
|||
|
||||
async function deletePlugin() {
|
||||
try {
|
||||
const name = plugin.name
|
||||
await plugins.deletePlugin(plugin._id)
|
||||
notifications.success(`Plugin ${plugin?.name} deleted`)
|
||||
notifications.success(`Plugin ${name} deleted successfully`)
|
||||
dispatch("deleted")
|
||||
} catch (error) {
|
||||
const msg = error?.message ? error.message : JSON.stringify(error)
|
||||
|
|
@ -28,6 +29,6 @@
|
|||
showCloseIcon={false}
|
||||
>
|
||||
<Body>
|
||||
Are you sure you want to delete <strong>{plugin?.name}</strong>
|
||||
Are you sure you want to delete <strong>{plugin?.name}</strong>?
|
||||
</Body>
|
||||
</ModalContent>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue