Merge pull request #947 from appwrite/fix-modals-not-opening-correctly

fix: modals not opening correctly
This commit is contained in:
Torsten Dittmann
2024-03-10 17:06:14 +01:00
committed by GitHub
14 changed files with 53 additions and 48 deletions
+9 -9
View File
@@ -1,15 +1,15 @@
import type { Models } from '@appwrite.io/console';
import type { SvelteComponent } from 'svelte';
import { writable } from 'svelte/store';
import Apple from '../../routes/console/project-[project]/auth/appleOAuth.svelte';
import Auth0 from '../../routes/console/project-[project]/auth/auth0OAuth.svelte';
import Authentik from '../../routes/console/project-[project]/auth/authentikOAuth.svelte';
import GitLab from '../../routes/console/project-[project]/auth/gitlabOAuth.svelte';
import Google from '../../routes/console/project-[project]/auth/googleOAuth.svelte';
import Main from '../../routes/console/project-[project]/auth/mainOAuth.svelte';
import Microsoft from '../../routes/console/project-[project]/auth/microsoftOAuth.svelte';
import Oidc from '../../routes/console/project-[project]/auth/oidcOAuth.svelte';
import Okta from '../../routes/console/project-[project]/auth/oktaOAuth.svelte';
import Apple from '../../routes/console/project-[project]/auth/(providers)/appleOAuth.svelte';
import Auth0 from '../../routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte';
import Authentik from '../../routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte';
import GitLab from '../../routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte';
import Google from '../../routes/console/project-[project]/auth/(providers)/googleOAuth.svelte';
import Main from '../../routes/console/project-[project]/auth/(providers)/mainOAuth.svelte';
import Microsoft from '../../routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte';
import Oidc from '../../routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte';
import Okta from '../../routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte';
export type Provider = Models.Provider & {
key: string;
@@ -5,11 +5,12 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
const projectId = $page.params.project;
export let provider: Provider;
export let show = false;
let appId: string = null;
let enabled: boolean = null;
@@ -37,7 +38,7 @@
$: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
</script>
<Modal {error} onSubmit={update} size="big" show on:close>
<Modal {error} onSubmit={update} size="big" bind:show on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -5,9 +5,10 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
export let provider: Provider;
export let show = false;
let appId: string = null;
let enabled: boolean = null;
@@ -38,7 +39,7 @@
: provider.secret;
</script>
<Modal {error} size="big" show onSubmit={update} on:close>
<Modal {error} size="big" bind:show onSubmit={update} on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -5,9 +5,10 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
export let provider: Provider;
export let show = false;
let appId: string = null;
let enabled: boolean = null;
@@ -38,7 +39,7 @@
: provider.secret;
</script>
<Modal {error} size="big" show onSubmit={update} on:close>
<Modal {error} size="big" bind:show onSubmit={update} on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -5,9 +5,10 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
export let provider: Provider;
export let show = false;
let appId: string = null;
let enabled: boolean = null;
@@ -36,7 +37,7 @@
clientSecret && endpoint ? JSON.stringify({ clientSecret, endpoint }) : provider.secret;
</script>
<Modal {error} size="big" show onSubmit={update} on:close>
<Modal {error} size="big" bind:show onSubmit={update} on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -5,9 +5,10 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
export let provider: Provider;
export let show = false;
const projectId = $page.params.project;
@@ -34,7 +35,7 @@
};
</script>
<Modal {error} size="big" show onSubmit={update} on:close>
<Modal {error} size="big" bind:show onSubmit={update} on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -5,9 +5,10 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
export let provider: Provider;
export let show = false;
const projectId = $page.params.project;
@@ -34,7 +35,7 @@
};
</script>
<Modal {error} size="big" show onSubmit={update} on:close>
<Modal {error} size="big" bind:show onSubmit={update} on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -5,9 +5,10 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
export let provider: Provider;
export let show = false;
let appId: string = null;
let enabled: boolean = null;
@@ -37,7 +38,7 @@
clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
</script>
<Modal {error} onSubmit={update} size="big" show on:close>
<Modal {error} onSubmit={update} size="big" bind:show on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -5,11 +5,12 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
const projectId = $page.params.project;
export let provider: Provider;
export let show = false;
let appId: string = null;
let enabled: boolean = null;
@@ -60,7 +61,7 @@
: provider.secret;
</script>
<Modal {error} onSubmit={update} size="big" show on:close>
<Modal {error} onSubmit={update} size="big" bind:show on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -5,11 +5,12 @@
import type { Provider } from '$lib/stores/oauth-providers';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { updateOAuth } from './updateOAuth';
import { updateOAuth } from '../updateOAuth';
const projectId = $page.params.project;
export let provider: Provider;
export let show = false;
let appId: string = null;
let enabled: boolean = null;
@@ -42,7 +43,7 @@
: provider.secret;
</script>
<Modal {error} onSubmit={update} size="big" show on:close>
<Modal {error} onSubmit={update} size="big" bind:show on:close>
<svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
<p>
@@ -14,6 +14,7 @@
import { project } from '../../store';
const projectId = $page.params.project;
let showProvider = false;
$: {
authMethods.load($project);
@@ -74,6 +75,7 @@
class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
on:click={() => {
selectedProvider = provider;
showProvider = true;
trackEvent(`click_select_provider`, {
provider: provider.key.toLowerCase()
});
@@ -99,9 +101,13 @@
</Container>
{/if}
{#if selectedProvider}
{#if selectedProvider && showProvider}
<svelte:component
this={selectedProvider.component}
bind:provider={selectedProvider}
on:close={() => (selectedProvider = null)} />
bind:show={showProvider}
on:close={() => {
selectedProvider = null;
showProvider = false;
}} />
{/if}
@@ -5,7 +5,7 @@
import { Dependencies } from '$lib/constants';
import { invalidate, goto } from '$app/navigation';
import { registerCommands } from '$lib/commandCenter';
import { execute, func, showCreateDeployment } from './store';
import { func, showCreateDeployment } from './store';
import { project } from '../../store';
import type { Models } from '@appwrite.io/console';
import Execute from './execute.svelte';
@@ -147,4 +147,4 @@
<slot />
<Execute selectedFunction={$execute} />
<Execute />
@@ -15,10 +15,7 @@
import Label from '$lib/elements/forms/label.svelte';
import { addNotification } from '$lib/stores/notifications';
import { sdk } from '$lib/stores/sdk';
import type { Models } from '@appwrite.io/console';
import { showFunctionExecute } from './store';
export let selectedFunction: Models.Function = null;
import { showFunctionExecute, execute } from './store';
let path = '/';
let method = 'GET';
@@ -47,7 +44,7 @@
}
await sdk.forProject.functions.createExecution(
selectedFunction.$id,
$execute.$id,
body,
true,
path,
@@ -56,7 +53,7 @@
);
if (!$page.url?.toString()?.includes('/executions')) {
await goto(
`${base}/console/project-${$page.params.project}/functions/function-${selectedFunction.$id}/executions`
`${base}/console/project-${$page.params.project}/functions/function-${$execute.$id}/executions`
);
}
invalidate(Dependencies.EXECUTIONS);
@@ -75,7 +72,7 @@
};
function close() {
selectedFunction = null;
$execute = null;
$showFunctionExecute = false;
}
@@ -100,7 +97,7 @@
</p>
<FormList>
{#if selectedFunction?.version !== 'v3'}
{#if $execute?.version !== 'v3'}
<Alert type="info">
<svelte:fragment slot="title">
Customizable execution data now available for functions v3.0
@@ -19,19 +19,16 @@
import { log } from '$lib/stores/logs';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { func, showFunctionExecute } from '../store';
import { func, execute, showFunctionExecute } from '../store';
import type { Models } from '@appwrite.io/console';
import { organization } from '$lib/stores/organization';
import { getServiceLimit, showUsageRatesModal } from '$lib/stores/billing';
import { project } from '$routes/console/project-[project]/store';
import Create from '../create.svelte';
import Execute from '../execute.svelte';
import { abbreviateNumber } from '$lib/helpers/numbers';
export let data;
let selectedFunction: Models.Function = null;
onMount(() => {
return sdk.forConsole.client.subscribe('console', (response) => {
if (response.events.includes('functions.*.executions.*')) {
@@ -55,7 +52,7 @@
buttonText="Execute now"
buttonEvent="execute_function"
buttonMethod={() => {
selectedFunction = $func;
$execute = $func;
$showFunctionExecute = true;
}}>
<svelte:fragment slot="tooltip" let:tier let:limit let:upgradeMethod>
@@ -172,7 +169,3 @@
</EmptySearch>
{/if}
</Container>
<!-- <CreateDeployment bind:showCreate /> -->
<Execute {selectedFunction} />