feat(tangle-cloud): List operators in the Operators page (#3005)

Author: devpavan04

.gitignore

@@ -103,4 +103,6 @@ libs/tangle-shared-ui/src/graphql/
 vitest.config.*.timestamp*
 
 # React Scan reports
-reports/
+reports/
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.vscode/settings.json

@@ -13,5 +13,6 @@
   "files.associations": {
     "*.css": "tailwindcss"
   },
-  "eslint.useFlatConfig": true
+  "eslint.useFlatConfig": true,
+  "nxConsole.generateAiAgentRules": true
 }

apps/tangle-cloud/src/app/app.tsx

@@ -10,6 +10,8 @@ import { PagePath } from '../types';
 import RegistrationReview from '../pages/registrationReview/page';
 import RegistrationLayout from '../pages/registrationReview/layout';
 import DeployPage from '../pages/blueprints/[id]/deploy/page';
+import OperatorsPage from '../pages/operators/page';
+import OperatorsLayout from '../pages/operators/layout';
 import NotFoundPage from '../pages/notFound';
 import { FC } from 'react';
 
@@ -72,11 +74,11 @@ const App: FC = () => {
           />
 
           <Route
-            path={PagePath.BLUEPRINTS_REGISTRATION_REVIEW}
+            path={PagePath.OPERATORS}
             element={
-              <RegistrationLayout>
-                <RegistrationReview />
-              </RegistrationLayout>
+              <OperatorsLayout>
+                <OperatorsPage />
+              </OperatorsLayout>
             }
           />
 

apps/tangle-cloud/src/constants/links.ts

@@ -1,2 +1,2 @@
-// TODO: Update this link after the pricing page is ready
-export const OPERATOR_PRICING_URL = 'https://docs.tangle.tools';
+// TODO: Update this link after the operator RPC page is ready
+export const OPERATOR_RPC_URL = 'https://docs.tangle.tools';

apps/tangle-cloud/src/pages/blueprints/ConfigureBlueprintModal/ConfigureBlueprintModal.tsx

@@ -0,0 +1,121 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Blueprint } from '@tangle-network/tangle-shared-ui/types/blueprint';
+import { Form } from '@tangle-network/ui-components/components/form';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@tangle-network/ui-components/components/form';
+import { Input } from '@tangle-network/ui-components';
+import {
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+} from '@tangle-network/ui-components/components/Modal';
+import { FC, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  blueprintFormSchema,
+  BlueprintFormSchema,
+  BlueprintFormResult,
+} from './types';
+import FormActions from './FormActions';
+
+type Props = {
+  onOpenChange: (isOpen: boolean) => void;
+  blueprints: Blueprint[];
+  onSubmit: (result: BlueprintFormResult) => void;
+};
+
+const ConfigureBlueprintModal: FC<Props> = ({
+  onOpenChange,
+  blueprints,
+  onSubmit,
+}) => {
+  const form = useForm<BlueprintFormSchema>({
+    resolver: zodResolver(blueprintFormSchema),
+    defaultValues: {
+      rpcUrl: '',
+    },
+  });
+
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+    form.reset();
+  }, [form, onOpenChange]);
+
+  const handleSubmit = useCallback(
+    (values: BlueprintFormSchema) => {
+      handleClose();
+      onSubmit({
+        values,
+      });
+    },
+    [handleClose, onSubmit],
+  );
+
+  return (
+    <ModalContent
+      size="md"
+      onInteractOutside={(event) => event.preventDefault()}
+      title="Configure Blueprint"
+      description={`Configure the RPC URL for ${blueprints.length} selected blueprint${blueprints.length > 1 ? 's' : ''}`}
+    >
+      <ModalHeader onClose={handleClose} className="pb-4">
+        Configure Blueprint{blueprints.length > 1 ? 's' : ''}
+      </ModalHeader>
+
+      <ModalBody className="p-6">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="space-y-6"
+          >
+            {blueprints.length > 1 ? (
+              <div className="space-y-4">
+                <p className="text-mono-120 dark:text-mono-100">
+                  The following blueprints will be configured with the same RPC
+                  URL:
+                </p>
+                <ul className="list-disc pl-5 space-y-2">
+                  {blueprints.map((blueprint) => (
+                    <li
+                      key={blueprint.id}
+                      className="text-mono-120 dark:text-mono-100"
+                    >
+                      {blueprint.name}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ) : null}
+
+            <FormField
+              control={form.control}
+              name="rpcUrl"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Enter RPC URL</FormLabel>
+                  <FormControl>
+                    <Input
+                      id="rpc-url-input"
+                      placeholder="https://rpc.example.com"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormActions />
+          </form>
+        </Form>
+      </ModalBody>
+    </ModalContent>
+  );
+};
+
+export default ConfigureBlueprintModal;

…ts/ConfigurePricingModal/FormActions.tsx …/ConfigureBlueprintModal/FormActions.tsxapps/tangle-cloud/src/pages/blueprints/ConfigurePricingModal/FormActions.tsx renamed to apps/tangle-cloud/src/pages/blueprints/ConfigureBlueprintModal/FormActions.tsx apps/tangle-cloud/src/pages/blueprints/ConfigurePricingModal/FormActions.tsx renamed to apps/tangle-cloud/src/pages/blueprints/ConfigureBlueprintModal/FormActions.tsx

@@ -1,12 +1,12 @@
 import Button from '@tangle-network/ui-components/components/buttons/Button';
 import { ModalFooter } from '@tangle-network/ui-components/components/Modal';
-import { OPERATOR_PRICING_URL } from '../../../constants/links';
+import { OPERATOR_RPC_URL } from '../../../constants/links';
 
 const FormActions = () => {
   return (
     <ModalFooter className="px-0">
       <Button
-        href={OPERATOR_PRICING_URL}
+        href={OPERATOR_RPC_URL}
         target="_blank"
         className="flex-1 max-w-none"
         variant="secondary"

apps/tangle-cloud/src/pages/blueprints/ConfigureBlueprintModal/index.ts

@@ -0,0 +1,3 @@
+import ConfigureBlueprintModal from './ConfigureBlueprintModal';
+
+export default ConfigureBlueprintModal;

apps/tangle-cloud/src/pages/blueprints/ConfigureBlueprintModal/types.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const blueprintFormSchema = z.object({
+  rpcUrl: z.string().url({ message: 'Please enter a valid URL' }).optional(),
+});
+
+export type BlueprintFormSchema = z.infer<typeof blueprintFormSchema>;
+
+export type BlueprintFormResult = {
+  values: BlueprintFormSchema;
+};