FEAT Enable/Disable all services - UI

src/routes/console/organization-[organization]/+page.svelte

@@ -8,6 +8,8 @@
     import CreateOrganization from '../createOrganization.svelte';
     import type { PageData } from './$types';
     import { page } from '$app/stores';
+    import { services } from '$lib/stores/project-services';
+    import type { Models } from '@appwrite.io/console';
 
     export let data: PageData;
 
@@ -38,6 +40,17 @@
         return { name, icon };
     };
 
+    function allServiceDisabled(project: Models.Project): boolean {
+        let disabled = true;
+        services.load(project);
+        $services.list.forEach((service) => {
+            if (service.value) {
+                disabled = false;
+            }
+        });
+        return disabled;
+    }
+
     function filterPlatforms(platforms: { name: string; icon: string }[]) {
         return platforms.filter(
             (value, index, self) => index === self.findIndex((t) => t.name === value.name)
@@ -67,6 +80,11 @@
                     <svelte:fragment slot="title">
                         {project.name}
                     </svelte:fragment>
+                    {#if allServiceDisabled(project)}
+                        <p>
+                            <span class="icon-pause" aria-hidden="true" /> All services are disabled.
+                        </p>
+                    {/if}
                     {@const platforms = filterPlatforms(
                         project.platforms.map((platform) => getPlatformInfo(platform.type))
                     )}

src/routes/console/project-[project]/settings/+page.svelte

@@ -22,6 +22,8 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import EnableAllServices from './enableAllServices.svelte';
+    import DisableAllServices from './disableAllServices.svelte';
     import Transfer from './transferProject.svelte';
 
     let name: string = null;
@@ -30,6 +32,8 @@
     let showTransfer = false;
     const endpoint = sdk.forConsole.client.config.endpoint;
     const projectId = $page.params.project;
+    let showDisableAll = false;
+    let showEnableAll = false;
 
     onMount(async () => {
         name ??= $project.name;
@@ -54,6 +58,50 @@
         }
     }
 
+    async function toggleAllServices(status: boolean) {
+        if (status && !showEnableAll) {
+            showEnableAll = true;
+            return;
+        }
+        if (!status && !showDisableAll) {
+            showDisableAll = true;
+            return;
+        }
+
+        try {
+            const path = '/projects/' + $project.$id + '/service/all';
+            await sdk.forConsole.client.call(
+                'PATCH',
+                new URL(sdk.forConsole.client.config.endpoint + path),
+                {
+                    'content-type': 'application/json'
+                },
+                {
+                    status: status
+                }
+            );
+            invalidate(Dependencies.PROJECT);
+            addNotification({
+                type: 'success',
+                message:
+                    'All services for ' +
+                    $project.name +
+                    ' has been ' +
+                    (status ? 'enabled.' : 'disabled.')
+            });
+            trackEvent(Submit.ProjectService);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.ProjectService);
+        } finally {
+            showDisableAll = false;
+            showEnableAll = false;
+        }
+    }
+
     async function serviceUpdate(service: Service) {
         try {
             await sdk.forConsole.projects.updateServiceStatus(
@@ -132,8 +180,18 @@
                 services are not accessible to client SDKs but remain accessible to server SDKs.
             </p>
             <svelte:fragment slot="aside">
+                <ul class="buttons-list u-main-end">
+                    <li class="buttons-list-item">
+                        <Button text={true} on:click={() => toggleAllServices(true)}
+                            >Enable all</Button>
+                    </li>
+                    <li class="buttons-list-item">
+                        <Button text={true} on:click={() => toggleAllServices(false)}
+                            >Disable all</Button>
+                    </li>
+                </ul>
                 <FormList>
-                    <form class="form">
+                    <form class="form card-separator">
                         <ul class="form-list is-multiple">
                             {#each $services.list as service}
                                 <InputSwitch
@@ -198,6 +256,8 @@
 </Container>
 
 <Delete bind:showDelete />
+<DisableAllServices handleDisableAll={() => toggleAllServices(false)} bind:show={showDisableAll} />
+<EnableAllServices handleEnableAll={() => toggleAllServices(true)} bind:show={showEnableAll} />
 {#if teamId}
     <Transfer
         bind:teamId

src/routes/console/project-[project]/settings/disableAllServices.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+
+    export let show = false;
+    export let handleDisableAll;
+</script>
+
+<Modal icon="exclamation" state="warning" bind:show onSubmit={handleDisableAll}>
+    <svelte:fragment slot="header">Disable all services</svelte:fragment>
+    <p class="text" data-private>
+        Are you sure you want to disable all services? This will disable API requests to your
+        project.
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Disable All</Button>
+    </svelte:fragment>
+</Modal>

src/routes/console/project-[project]/settings/enableAllServices.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+
+    export let show = false;
+    export let handleEnableAll;
+</script>
+
+<Modal bind:show onSubmit={handleEnableAll}>
+    <svelte:fragment slot="header">Enable all services</svelte:fragment>
+    <p class="text" data-private>All project services will be enabled.</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Enable all</Button>
+    </svelte:fragment>
+</Modal>