feat(galaxy|access): App Data storage foundations (#2763)

apps/console/app/components/SiteMenu/index.tsx

@@ -33,6 +33,7 @@ import {
   TbUserCog,
   TbBrandGithub,
   TbBook,
+  TbServerBolt,
 } from 'react-icons/tb'
 
 import { Popover, Transition } from '@headlessui/react'
@@ -285,6 +286,12 @@ const appSubmenuStruct: {
         icon: HiOutlineDocument,
         subroute: '/blockchain',
       },
+      {
+        title: 'Storage',
+        icon: TbServerBolt,
+        subroute: '/storage',
+        plan: ServicePlanType.PRO,
+      },
       {
         title: 'Designer',
         icon: HiOutlineColorSwatch,

apps/console/app/routes/apps/$clientId/storage.ostrich.tsx

@@ -0,0 +1,125 @@
+import { useOutletContext, useSubmit, useTransition } from '@remix-run/react'
+import { Text } from '@proofzero/design-system'
+import { DocumentationBadge } from '~/components/DocumentationBadge'
+import { ReadOnlyInput } from '@proofzero/design-system/src/atoms/form/ReadOnlyInput'
+import { ToastType, toast } from '@proofzero/design-system/src/atoms/toast'
+import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
+import { ActionFunction } from '@remix-run/cloudflare'
+import createCoreClient from '@proofzero/platform-clients/core'
+import { generateTraceContextHeaders } from '@proofzero/platform-middleware/trace'
+import { getAuthzHeaderConditionallyFromToken } from '@proofzero/utils'
+import { requireJWT } from '~/utilities/session.server'
+import { BadRequestError, InternalServerError } from '@proofzero/errors'
+import { InputToggle } from '@proofzero/design-system/src/atoms/form/InputToggle'
+import classNames from 'classnames'
+import { appDetailsProps } from '~/types'
+import { ExternalAppDataPackageType } from '@proofzero/types/billing'
+
+export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
+  async ({ request, context, params }) => {
+    const traceHeader = generateTraceContextHeaders(context.traceSpan)
+    const jwt = await requireJWT(request, context.env)
+    const coreClient = createCoreClient(context.env.Core, {
+      ...getAuthzHeaderConditionallyFromToken(jwt),
+      ...traceHeader,
+    })
+
+    const { clientId } = params
+    if (!clientId) {
+      throw new InternalServerError({
+        message: 'Client id not found',
+      })
+    }
+
+    const fd = await request.formData()
+    switch (fd.get('op')) {
+      case 'enable':
+        await coreClient.starbase.setExternalAppDataPackage.mutate({
+          clientId,
+          packageType: ExternalAppDataPackageType.STARTER,
+        })
+        break
+      case 'disable':
+        await coreClient.starbase.setExternalAppDataPackage.mutate({
+          clientId,
+        })
+        break
+      default:
+        throw new BadRequestError({
+          message: 'Invalid operation',
+        })
+    }
+
+    return null
+  }
+)
+
+export default () => {
+  const { appDetails } = useOutletContext<{
+    appDetails: appDetailsProps
+  }>()
+
+  const trans = useTransition()
+  const submit = useSubmit()
+
+  return (
+    <section className="flex flex-col space-y-5">
+      <div className="flex flex-row items-center space-x-3">
+        <Text size="2xl" weight="semibold" className="text-gray-900">
+          Storage
+        </Text>
+        <DocumentationBadge
+          url={'https://docs.rollup.id/platform/console/storage'}
+        />
+      </div>
+
+      <section className="flex-1 bg-white border rounded-lg px-4 pt-3 pb-6">
+        <section className="flex flex-row justify-between items-center">
+          <div className="flex flex-row gap-2 items-center">
+            <Text size="lg" weight="semibold">
+              App Data Storage
+            </Text>
+
+            <div
+              className={classNames('w-2 h-2 rounded-full', {
+                'bg-green-500': Boolean(
+                  appDetails.externalAppDataPackageDefinition
+                ),
+                'bg-gray-300': !Boolean(
+                  appDetails.externalAppDataPackageDefinition
+                ),
+              })}
+            ></div>
+          </div>
+
+          <InputToggle
+            id="toggle_storage"
+            checked={Boolean(appDetails.externalAppDataPackageDefinition)}
+            onToggle={() => {
+              submit(
+                {
+                  op: Boolean(appDetails.externalAppDataPackageDefinition)
+                    ? 'disable'
+                    : 'enable',
+                },
+                {
+                  method: 'post',
+                }
+              )
+            }}
+            disabled={trans.state !== 'idle'}
+          />
+        </section>
+
+        <section className="mt-2">
+          <Text size="sm" className="text-gray-600">
+            App Data Storage service provides a hassle-free way to store and
+            retrieve per-user data for your application. Once activated, the
+            service can be accessed through our Galaxy API and it supports
+            storing data up to 128kb, per user.
+          </Text>
+        </section>
+      </section>
+    </section>
+  )
+}

apps/console/app/routes/apps/$clientId/storage.tsx

@@ -0,0 +1,28 @@
+import EarlyAccessPanel from '~/components/EarlyAccess/EarlyAccessPanel'
+import storageSVG from '~/assets/early/storage.svg'
+import { useOutletContext } from '@remix-run/react'
+import { appDetailsProps } from '~/types'
+import { IdentityURN } from '@proofzero/urns/identity'
+import { ServicePlanType } from '@proofzero/types/billing'
+
+export default () => {
+  const { appDetails, identityURN } = useOutletContext<{
+    appDetails: appDetailsProps
+    identityURN: IdentityURN
+  }>()
+
+  return (
+    <EarlyAccessPanel
+      clientID={appDetails.clientId as string}
+      title="Storage"
+      subtitle="App Data Storage"
+      copy="App Data Storage service provides a hassle-free way to store and retrieve per-user data for your application. Once activated, the service can be accessed through our Galaxy API and it supports storing data up to 128kb, per user."
+      imgSrc={storageSVG}
+      url={'https://docs.rollup.id/platform/console/storage'}
+      earlyAccess={false}
+      currentPlan={appDetails.appPlan}
+      featurePlan={ServicePlanType.PRO}
+      identityURN={identityURN}
+    />
+  )
+}

apps/console/app/types.ts

@@ -4,6 +4,7 @@ import type {
   AppObject,
   EdgesMetadata,
   CustomDomain,
+  ExternalAppDataPackageDefinition,
 } from '@proofzero/platform/starbase/src/types'
 import { ServicePlanType } from '@proofzero/types/billing'
 import { IdentityRefURN } from '@proofzero/urns/identity-ref'
@@ -27,6 +28,7 @@ export type appDetailsProps = {
   customDomain?: CustomDomain
   appPlan: ServicePlanType
   ownerURN: IdentityRefURN
+  externalAppDataPackageDefinition?: ExternalAppDataPackageDefinition
 }
 
 export type errorsAuthProps = {

packages/galaxy-client/gql/authorization.graphql

@@ -0,0 +1,7 @@
+query getExternalAppData {
+  externalAppData: getExternalAppData
+}
+
+mutation setExternalAppData($payload: JSON!) {
+  setExternalAppData(payload: $payload)
+}