init: Capabilities form

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

src/components/form/AddFunctionCapabilities/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './cmp'
+export type { AddFunctionCapabilitiesProps } from './types'

src/components/form/AddFunctionCapabilities/types.ts

@@ -0,0 +1,6 @@
+import { Control } from 'react-hook-form'
+
+export type AddFunctionCapabilitiesProps = {
+  name?: string
+  control: Control
+}

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">

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])

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,
+  }
+}