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>