feat: demo flags (#1084)

ui/src/components/reaction/ReactionDisplay.vue

@@ -38,32 +38,36 @@ const updateReactionMutation = useMutation({
 })
 
 onMounted(() => {
-  pb.collection('reactions').subscribe(props.id, (data) => {
-    if (data.action === 'delete') {
-      toast({
-        title: 'Reaction deleted',
-        description: 'The reaction has been deleted.',
-        variant: 'destructive'
-      })
+  if (props.id) {
+    pb.collection('reactions').subscribe(props.id, (data) => {
+      if (data.action === 'delete') {
+        toast({
+          title: 'Reaction deleted',
+          description: 'The reaction has been deleted.',
+          variant: 'destructive'
+        })
 
-      router.push({ name: 'reactions' })
+        router.push({ name: 'reactions' })
 
-      return
-    }
+        return
+      }
 
-    if (data.action === 'update') {
-      toast({
-        title: 'Reaction updated',
-        description: 'The reaction has been updated.'
-      })
+      if (data.action === 'update') {
+        toast({
+          title: 'Reaction updated',
+          description: 'The reaction has been updated.'
+        })
 
-      queryClient.invalidateQueries({ queryKey: ['reactions', props.id] })
-    }
-  })
+        queryClient.invalidateQueries({ queryKey: ['reactions', props.id] })
+      }
+    })
+  }
 })
 
 onUnmounted(() => {
-  pb.collection('reactions').unsubscribe(props.id)
+  if (props.id) {
+    pb.collection('reactions').unsubscribe(props.id)
+  }
 })
 </script>
 

ui/src/components/reaction/ReactionForm.vue

@@ -3,6 +3,7 @@ import ActionPythonFormFields from '@/components/reaction/ActionPythonFormFields
 import ActionWebhookFormFields from '@/components/reaction/ActionWebhookFormFields.vue'
 import TriggerHookFormFields from '@/components/reaction/TriggerHookFormFields.vue'
 import TriggerWebhookFormFields from '@/components/reaction/TriggerWebhookFormFields.vue'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import {
@@ -25,9 +26,11 @@ import {
 } from '@/components/ui/select'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 
+import { useQuery } from '@tanstack/vue-query'
 import { defineRule, useForm } from 'vee-validate'
 import { computed, ref, watch } from 'vue'
 
+import { pb } from '@/lib/pocketbase'
 import type { Reaction } from '@/lib/types'
 
 const submitDisabledReason = ref<string>('')
@@ -38,6 +41,24 @@ const props = defineProps<{
 
 const emit = defineEmits(['submit'])
 
+const isDemo = ref(false)
+
+const { data: config } = useQuery({
+  queryKey: ['config'],
+  queryFn: (): Promise<Record<string, Array<String>>> => pb.send('/api/config', {})
+})
+
+watch(
+  () => config.value,
+  () => {
+    if (!config.value) return
+    if (config.value['flags'].includes('demo')) {
+      isDemo.value = true
+    }
+  },
+  { immediate: true }
+)
+
 defineRule('required', (value: string) => {
   if (!value || !value.length) {
     return 'This field is required'
@@ -161,35 +182,42 @@ const equalReaction = (values: Reaction, reaction?: Reaction): boolean => {
   )
 }
 
+const updateSubmitDisabledReason = () => {
+  if (isDemo.value) {
+    submitDisabledReason.value = 'Reactions cannot be created or edited in demo mode'
+
+    return
+  }
+
+  if (equalReaction(values, props.reaction)) {
+    submitDisabledReason.value = 'Make changes to save'
+
+    return
+  }
+
+  validate({ mode: 'silent' }).then((res) => {
+    if (res.valid) {
+      submitDisabledReason.value = ''
+    } else {
+      submitDisabledReason.value = 'Please fix the errors'
+    }
+  })
+}
+
+watch(
+  () => isDemo.value,
+  () => updateSubmitDisabledReason()
+)
+
 watch(
   () => props.reaction,
-  () => {
-    if (equalReaction(values, props.reaction)) {
-      submitDisabledReason.value = 'Make changes to save'
-    } else {
-      submitDisabledReason.value = ''
-    }
-  },
+  () => updateSubmitDisabledReason(),
   { immediate: true }
 )
 
 watch(
-  values,
-  () => {
-    if (equalReaction(values, props.reaction)) {
-      submitDisabledReason.value = 'Make changes to save'
-
-      return
-    }
-
-    validate({ mode: 'silent' }).then((res) => {
-      if (res.valid) {
-        submitDisabledReason.value = ''
-      } else {
-        submitDisabledReason.value = 'Please fix the errors'
-      }
-    })
-  },
+  () => values,
+  () => updateSubmitDisabledReason(),
   { deep: true, immediate: true }
 )
 
@@ -293,6 +321,10 @@ const curlExample = computed(() => {
       </CardContent>
     </Card>
 
+    <Alert v-if="isDemo" variant="destructive">
+      <AlertTitle>Cannot save</AlertTitle>
+      <AlertDescription>{{ submitDisabledReason }}</AlertDescription>
+    </Alert>
     <div class="flex gap-4">
       <TooltipProvider :delay-duration="0">
         <Tooltip>

ui/src/components/reaction/ReactionList.vue

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
@@ -60,10 +60,6 @@ onMounted(() => {
     queryClient.invalidateQueries({ queryKey: ['reactions'] })
   })
 })
-
-onUnmounted(() => {
-  pb.collection('reactions').unsubscribe('*')
-})
 </script>
 
 <template>
@@ -72,7 +68,7 @@ onUnmounted(() => {
       <div class="flex items-center bg-background px-4 py-2">
         <h1 class="text-xl font-bold">Reactions</h1>
         <div class="ml-auto">
-          <Button variant="ghost" @click="openNew"> New Reaction </Button>
+          <Button variant="ghost" @click="openNew"> New Reaction</Button>
         </div>
       </div>
       <Separator />