feat(messaging): add update subscription perms card to topic's page

src/lib/actions/analytics.ts

@@ -301,7 +301,7 @@ export enum Submit {
     MessagingTopicCreate = 'submit_messaging_topic_create',
     MessagingTopicDelete = 'submit_messaging_topic_delete',
     MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
-    MessagingTopicUpdateDescription = 'submit_messaging_topic_update_description',
+    MessagingTopicUpdatePermissions = 'submit_messaging_topic_update_permissions',
     MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add',
     MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete'
 }

src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte

@@ -3,10 +3,12 @@
     import DangerZone from './dangerZone.svelte';
     import Details from './details.svelte';
     import UpdateName from './updateName.svelte';
+    import UpdatePermissions from './updatePermissions.svelte';
 </script>
 
 <Container>
     <Details />
     <UpdateName />
+    <UpdatePermissions />
     <DangerZone />
 </Container>

src/routes/console/project-[project]/messaging/topics/topic-[topic]/updatePermissions.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { Roles } from '$lib/components/permissions';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { topic } from './store';
+
+    const topicId = $page.params.topic;
+
+    let arePermsDisabled = true;
+    let permissions: string[] = [];
+
+    onMount(async () => {
+        permissions = $topic.subscribe || [];
+    });
+
+    async function updatePermissions() {
+        try {
+            await sdk.forProject.messaging.updateTopic(topicId, undefined, permissions);
+            await invalidate(Dependencies.MESSAGING_TOPIC);
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+            trackEvent(Submit.MessagingTopicUpdatePermissions);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.MessagingTopicUpdatePermissions);
+        }
+    }
+
+    $: arePermsDisabled = symmetricDifference(permissions, $topic.subscribe).length == 0;
+</script>
+
+<Form onSubmit={updatePermissions}>
+    <CardGrid>
+        <Heading tag="h6" size="7" id="permissions">Subscription access</Heading>
+        <p>
+            Choose who can subscribe to this topic using the client API. Learn more about <a
+                href="https://appwrite.io/docs/advanced/platform/permissions"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">
+                Permissions</a
+            >.
+        </p>
+        <svelte:fragment slot="aside">
+            <Roles bind:roles={permissions} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={arePermsDisabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>