Prevent rendering overview until selected app has loaded
This commit is contained in:
Andrew Kingston
parent
8f63abe923
commit
3d42c9cfeb
1 changed files with 151 additions and 146 deletions
|
|
@ -206,159 +206,164 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<span class="overview-wrap">
|
{#if selectedApp}
|
||||||
<Page wide noPadding>
|
<span class="overview-wrap">
|
||||||
{#await promise}
|
<Page wide noPadding>
|
||||||
<div class="loading">
|
{#await promise}
|
||||||
<ProgressCircle size="XL" />
|
<div class="loading">
|
||||||
</div>
|
<ProgressCircle size="XL" />
|
||||||
{:then _}
|
</div>
|
||||||
<Layout paddingX="XXL" paddingY="XL" gap="L">
|
{:then _}
|
||||||
<span class="page-header" class:loaded>
|
<Layout paddingX="XXL" paddingY="XL" gap="L">
|
||||||
<ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
|
<span class="page-header" class:loaded>
|
||||||
Back
|
<ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
|
||||||
</ActionButton>
|
Back
|
||||||
</span>
|
</ActionButton>
|
||||||
<div class="overview-header">
|
</span>
|
||||||
<div class="app-title">
|
<div class="overview-header">
|
||||||
<div class="app-logo">
|
<div class="app-title">
|
||||||
<div
|
<div class="app-logo">
|
||||||
class="app-icon"
|
<div
|
||||||
style="color: {selectedApp?.icon?.color || ''}"
|
class="app-icon"
|
||||||
>
|
style="color: {selectedApp?.icon?.color || ''}"
|
||||||
<EditableIcon
|
>
|
||||||
app={selectedApp}
|
<EditableIcon
|
||||||
size="XL"
|
app={selectedApp}
|
||||||
name={selectedApp?.icon?.name || "Apps"}
|
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>
|
</div>
|
||||||
<div class="app-details">
|
<div class="header-right">
|
||||||
<Heading size="M">{selectedApp?.name}</Heading>
|
<AppLockModal app={selectedApp} />
|
||||||
<div class="app-url">{appUrl}</div>
|
<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(selectedApp, { published: false })}
|
||||||
|
icon="DownloadFromCloud"
|
||||||
|
>
|
||||||
|
Export latest
|
||||||
|
</MenuItem>
|
||||||
|
{#if isPublished}
|
||||||
|
<MenuItem
|
||||||
|
on:click={() => exportApp(selectedApp, { 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>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
</Layout>
|
||||||
<AppLockModal app={selectedApp} />
|
<div class="tab-wrap">
|
||||||
<ButtonGroup gap="XS">
|
<Tabs
|
||||||
<Button
|
selected={selectedTab}
|
||||||
size="M"
|
noPadding
|
||||||
quiet
|
on:select={e => {
|
||||||
secondary
|
selectedTab = e.detail
|
||||||
icon="Globe"
|
}}
|
||||||
disabled={!isPublished}
|
>
|
||||||
on:click={viewApp}
|
<Tab title="Overview">
|
||||||
dataCy="view-app"
|
<OverviewTab
|
||||||
>
|
app={selectedApp}
|
||||||
View app
|
deployments={latestDeployments}
|
||||||
</Button>
|
navigateTab={handleTabChange}
|
||||||
<Button
|
on:unpublish={e => unpublishApp(e.detail)}
|
||||||
size="M"
|
/>
|
||||||
cta
|
</Tab>
|
||||||
icon="Edit"
|
<Tab title="Access">
|
||||||
disabled={lockedBy && !lockedByYou}
|
<AccessTab app={selectedApp} />
|
||||||
on:click={() => {
|
</Tab>
|
||||||
editApp(selectedApp)
|
{#if isPublished}
|
||||||
}}
|
<Tab title="Automation History">
|
||||||
>
|
<HistoryTab app={selectedApp} />
|
||||||
<span>Edit</span>
|
</Tab>
|
||||||
</Button>
|
{/if}
|
||||||
</ButtonGroup>
|
{#if false}
|
||||||
<ActionMenu align="right" dataCy="app-overview-menu-popover">
|
<Tab title="Backups">
|
||||||
<span slot="control" class="app-overview-actions-icon">
|
<div class="container">Backups contents</div>
|
||||||
<Icon hoverable name="More" />
|
</Tab>
|
||||||
</span>
|
{/if}
|
||||||
<MenuItem
|
<Tab title="Settings">
|
||||||
on:click={() => exportApp(selectedApp, { published: false })}
|
<SettingsTab app={selectedApp} />
|
||||||
icon="DownloadFromCloud"
|
</Tab>
|
||||||
>
|
</Tabs>
|
||||||
Export latest
|
|
||||||
</MenuItem>
|
|
||||||
{#if isPublished}
|
|
||||||
<MenuItem
|
|
||||||
on:click={() => exportApp(selectedApp, { 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>
|
</div>
|
||||||
</Layout>
|
<ConfirmDialog
|
||||||
<div class="tab-wrap">
|
bind:this={deletionModal}
|
||||||
<Tabs
|
title="Confirm deletion"
|
||||||
selected={selectedTab}
|
okText="Delete app"
|
||||||
noPadding
|
onOk={confirmDeleteApp}
|
||||||
on:select={e => {
|
onCancel={() => (appName = null)}
|
||||||
selectedTab = e.detail
|
disabled={appName !== selectedApp?.name}
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Tab title="Overview">
|
Are you sure you want to delete the app <b>{selectedApp?.name}</b>?
|
||||||
<OverviewTab
|
|
||||||
app={selectedApp}
|
|
||||||
deployments={latestDeployments}
|
|
||||||
navigateTab={handleTabChange}
|
|
||||||
on:unpublish={e => unpublishApp(e.detail)}
|
|
||||||
/>
|
|
||||||
</Tab>
|
|
||||||
<Tab title="Access">
|
|
||||||
<AccessTab app={selectedApp} />
|
|
||||||
</Tab>
|
|
||||||
{#if isPublished}
|
|
||||||
<Tab title="Automation History">
|
|
||||||
<HistoryTab app={selectedApp} />
|
|
||||||
</Tab>
|
|
||||||
{/if}
|
|
||||||
{#if false}
|
|
||||||
<Tab title="Backups">
|
|
||||||
<div class="container">Backups contents</div>
|
|
||||||
</Tab>
|
|
||||||
{/if}
|
|
||||||
<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>
|
<p>Please enter the app name below to confirm.</p>
|
||||||
<Input
|
<Input
|
||||||
bind:value={appName}
|
bind:value={appName}
|
||||||
data-cy="delete-app-confirmation"
|
data-cy="delete-app-confirmation"
|
||||||
placeholder={selectedApp?.name}
|
placeholder={selectedApp?.name}
|
||||||
/>
|
/>
|
||||||
</ConfirmDialog>
|
</ConfirmDialog>
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
bind:this={unpublishModal}
|
bind:this={unpublishModal}
|
||||||
title="Confirm unpublish"
|
title="Confirm unpublish"
|
||||||
okText="Unpublish app"
|
okText="Unpublish app"
|
||||||
onOk={confirmUnpublishApp}
|
onOk={confirmUnpublishApp}
|
||||||
dataCy={"unpublish-modal"}
|
dataCy={"unpublish-modal"}
|
||||||
>
|
>
|
||||||
Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
|
Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
|
||||||
</ConfirmDialog>
|
</ConfirmDialog>
|
||||||
{:catch error}
|
{:catch error}
|
||||||
<p>Something went wrong: {error.message}</p>
|
<p>Something went wrong: {error.message}</p>
|
||||||
{/await}
|
{/await}
|
||||||
</Page>
|
</Page>
|
||||||
</span>
|
</span>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.app-url {
|
.app-url {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue