From 28a80e3ee31e4ba385c67d5e93d58fec4db61612 Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Fri, 15 Sep 2023 18:38:59 +0200
Subject: [PATCH] init: Capabilities form

---
 .../form/AddFunctionCapabilities/cmp.tsx      | 37 ++++++++++++++
 .../form/AddFunctionCapabilities/index.tsx    |  2 +
 .../form/AddFunctionCapabilities/types.ts     |  6 +++
 .../pages/dashboard/NewFunctionPage/cmp.tsx   | 21 ++++++--
 src/domain/program.ts                         |  2 -
 src/hooks/form/useAddFunctionCapabilities.ts  | 49 +++++++++++++++++++
 6 files changed, 112 insertions(+), 5 deletions(-)
 create mode 100644 src/components/form/AddFunctionCapabilities/cmp.tsx
 create mode 100644 src/components/form/AddFunctionCapabilities/index.tsx
 create mode 100644 src/components/form/AddFunctionCapabilities/types.ts
 create mode 100644 src/hooks/form/useAddFunctionCapabilities.ts

diff --git a/src/components/form/AddFunctionCapabilities/cmp.tsx b/src/components/form/AddFunctionCapabilities/cmp.tsx
new file mode 100644
index 00000000..76ed20d0
--- /dev/null
+++ b/src/components/form/AddFunctionCapabilities/cmp.tsx
@@ -0,0 +1,37 @@
+import NoisyContainer from '@/components/common/NoisyContainer/styles'
+import { AddFunctionCapabilitiesProps } from './types'
+import { useAddFunctionCapabilities } from '@/hooks/form/useAddFunctionCapabilities'
+import { Checkbox, CheckboxGroup } from '@aleph-front/aleph-core'
+
+const AddFunctionCapabilities = (props: AddFunctionCapabilitiesProps) => {
+  const { internetAccessCtrl, blockchainRPCCtrl, enableAutoSnapshotsCtrl } =
+    useAddFunctionCapabilities(props)
+
+  return (
+    <NoisyContainer>
+      <Checkbox
+        label="Outgoing internet access"
+        tw="my-3"
+        {...internetAccessCtrl.field}
+        {...internetAccessCtrl.fieldState}
+      />
+
+      <Checkbox
+        label="Accessing blockchain RPC nodes"
+        tw="my-3"
+        {...blockchainRPCCtrl.field}
+        {...blockchainRPCCtrl.fieldState}
+      />
+
+      <Checkbox
+        label="Enable automatic snapshots (not available yet)"
+        tw="my-3"
+        {...enableAutoSnapshotsCtrl.field}
+        {...enableAutoSnapshotsCtrl.fieldState}
+        disabled
+      />
+    </NoisyContainer>
+  )
+}
+
+export default AddFunctionCapabilities
diff --git a/src/components/form/AddFunctionCapabilities/index.tsx b/src/components/form/AddFunctionCapabilities/index.tsx
new file mode 100644
index 00000000..290bb277
--- /dev/null
+++ b/src/components/form/AddFunctionCapabilities/index.tsx
@@ -0,0 +1,2 @@
+export { default } from './cmp'
+export type { AddFunctionCapabilitiesProps } from './types'
diff --git a/src/components/form/AddFunctionCapabilities/types.ts b/src/components/form/AddFunctionCapabilities/types.ts
new file mode 100644
index 00000000..14142a46
--- /dev/null
+++ b/src/components/form/AddFunctionCapabilities/types.ts
@@ -0,0 +1,6 @@
+import { Control } from 'react-hook-form'
+
+export type AddFunctionCapabilitiesProps = {
+  name?: string
+  control: Control
+}
diff --git a/src/components/pages/dashboard/NewFunctionPage/cmp.tsx b/src/components/pages/dashboard/NewFunctionPage/cmp.tsx
index 8f546060..b0b75d88 100644
--- a/src/components/pages/dashboard/NewFunctionPage/cmp.tsx
+++ b/src/components/pages/dashboard/NewFunctionPage/cmp.tsx
@@ -15,6 +15,7 @@ import SelectFunctionPersistence from '@/components/form/SelectFunctionPersisten
 import BorderBox from '@/components/common/BorderBox'
 import { convertByteUnits } from '@/helpers/utils'
 import Form from '@/components/form/Form'
+import AddFunctionCapabilities from '@/components/form/AddFunctionCapabilities'
 
 export default function NewFunctionPage() {
   const {
@@ -117,6 +118,20 @@ export default function NewFunctionPage() {
       <section tw="px-0 py-6 md:py-10">
         <Container>
           <CompositeTitle as="h2" number="5">
+            Function capabilities
+          </CompositeTitle>
+          <p tw="mb-6">
+            Enable advanced capabilities for your decentralized functions with
+            additional capabilities. Choose from outgoing internet access,
+            blockchain RPC nodes, or future options like automated snapshots.
+            Note: some features are still in development.
+          </p>
+          <AddFunctionCapabilities name="capabilities" control={control} />
+        </Container>
+      </section>
+      <section tw="px-0 py-6 md:py-10">
+        <Container>
+          <CompositeTitle as="h2" number="6">
             Name and tags
           </CompositeTitle>
           <p tw="mb-6">
@@ -130,7 +145,7 @@ export default function NewFunctionPage() {
       </section>
       <section tw="px-0 py-6 md:py-10">
         <Container>
-          <CompositeTitle as="h2" number="6">
+          <CompositeTitle as="h2" number="7">
             Add volumes
           </CompositeTitle>
           {values.specs && (
@@ -153,7 +168,7 @@ export default function NewFunctionPage() {
       </section>
       <section tw="px-0 py-6 md:py-10">
         <Container>
-          <CompositeTitle as="h2" number="7">
+          <CompositeTitle as="h2" number="8">
             Add environment variables
           </CompositeTitle>
           <p tw="mb-6">
@@ -167,7 +182,7 @@ export default function NewFunctionPage() {
       </section>
       <section tw="px-0 py-6 md:py-10">
         <Container>
-          <CompositeTitle as="h2" number="8">
+          <CompositeTitle as="h2" number="9">
             Custom domain
           </CompositeTitle>
           <p tw="mb-6">
diff --git a/src/domain/program.ts b/src/domain/program.ts
index 5091b158..cad84ab0 100644
--- a/src/domain/program.ts
+++ b/src/domain/program.ts
@@ -167,8 +167,6 @@ export class ProgramManager
     try {
       const programMessage = await this.parseProgram(newProgram)
 
-      console.log('programMessage', programMessage)
-
       const response = await program.publish(programMessage)
 
       const [entity] = await this.parseMessages([response])
diff --git a/src/hooks/form/useAddFunctionCapabilities.ts b/src/hooks/form/useAddFunctionCapabilities.ts
new file mode 100644
index 00000000..51975483
--- /dev/null
+++ b/src/hooks/form/useAddFunctionCapabilities.ts
@@ -0,0 +1,49 @@
+import { Control, UseControllerReturn, useController } from 'react-hook-form'
+
+export const defaultCapabilities = {
+  internetAccess: true,
+  blockchainRPC: true,
+  enableAutoSnapshots: false,
+}
+
+export type UseAddFunctionCapabilitiesProps = {
+  name?: string
+  control: Control
+  defaultValue?: typeof defaultCapabilities
+}
+
+export type UseAddFunctionCapabilitiesReturn = {
+  internetAccessCtrl: UseControllerReturn<any, any>
+  blockchainRPCCtrl: UseControllerReturn<any, any>
+  enableAutoSnapshotsCtrl: UseControllerReturn<any, any>
+}
+
+export function useAddFunctionCapabilities({
+  name = 'capabilities',
+  control,
+  defaultValue = defaultCapabilities,
+}: UseAddFunctionCapabilitiesProps): UseAddFunctionCapabilitiesReturn {
+  const internetAccessCtrl = useController({
+    control,
+    name: `${name}.internetAccess`,
+    defaultValue: defaultValue?.internetAccess,
+  })
+
+  const blockchainRPCCtrl = useController({
+    control,
+    name: `${name}.internetAccess`,
+    defaultValue: defaultValue?.blockchainRPC,
+  })
+
+  const enableAutoSnapshotsCtrl = useController({
+    control,
+    name: `${name}.internetAccess`,
+    defaultValue: defaultValue?.enableAutoSnapshots,
+  })
+
+  return {
+    internetAccessCtrl,
+    blockchainRPCCtrl,
+    enableAutoSnapshotsCtrl,
+  }
+}