BITMAKER-3359: Adding external registration components (#200)

* Adding external registration components * Fix errors when a project has no spiders --------- Co-authored-by: mgonnav <mateo@emegona.com>
bitmakerla · Jul 4, 2023 · 8ba4280 · 8ba4280
1 parent 2fdcd3e
commit 8ba4280
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 70 deletions.
diff --git a/estela-web/src/defaultComponents/ExternalRegistration/components/CheckBox.tsx b/estela-web/src/defaultComponents/ExternalRegistration/components/CheckBox.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export const CheckBoxRegistration = () => {
+    return <></>;
+};
diff --git a/estela-web/src/defaultComponents/ExternalRegistration/context/RegistrationContext.tsx b/estela-web/src/defaultComponents/ExternalRegistration/context/RegistrationContext.tsx
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export type RegistrationContextProps = {
+    validated: boolean;
+    updateValidated: (value: boolean) => void;
+};
+
+export const RegistrationContext = createContext<RegistrationContextProps>({} as RegistrationContextProps);
diff --git a/estela-web/src/defaultComponents/ExternalRegistration/context/RegistrationProvider.tsx b/estela-web/src/defaultComponents/ExternalRegistration/context/RegistrationProvider.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { RegistrationContext } from "./RegistrationContext";
+
+export type RegistrationProviderProps = {
+    children: JSX.Element | JSX.Element[];
+};
+export const RegistrationProvider = ({ children }: RegistrationProviderProps) => {
+    const [validated, setValidated] = React.useState<boolean>(true);
+
+    const updateValidated = (value: boolean) => {
+        setValidated(value);
+    };
+
+    return (
+        <RegistrationContext.Provider
+            value={{
+                validated,
+                updateValidated,
+            }}
+        >
+            {children}
+        </RegistrationContext.Provider>
+    );
+};
diff --git a/estela-web/src/defaultComponents/ExternalRegistration/index.tsx b/estela-web/src/defaultComponents/ExternalRegistration/index.tsx
@@ -0,0 +1,4 @@
+export { CheckBoxRegistration } from "./components/CheckBox";
+export { RegistrationProvider } from "./context/RegistrationProvider";
+export { RegistrationContext } from "./context/RegistrationContext";
+export type { RegistrationContextProps } from "./context/RegistrationContext";
diff --git a/estela-web/src/pages/CronjobCreateModal/index.tsx b/estela-web/src/pages/CronjobCreateModal/index.tsx
@@ -480,10 +480,11 @@ export default function CronjobCreateModal({ openModal, spider, projectId }: Cro
                 size="large"
                 className="flex items-center stroke-white border-estela hover:stroke-estela bg-estela text-white hover:text-estela text-sm hover:border-estela rounded-md"
                 onClick={() => {
-                    if (spiders.length > 0) {
-                        setOpen(true);
+                    if (spiders.length == 0) {
+                        message.error("No spiders found. Please make a new deploy.");
+                        history.push(`/projects/${projectId}/deploys`);
                     } else {
-                        message.error("You don't have any spider.");
+                        setOpen(true);
                     }
                 }}
             >

diff --git a/estela-web/src/pages/JobCreateModal/index.tsx b/estela-web/src/pages/JobCreateModal/index.tsx
@@ -119,32 +119,36 @@ export default function JobCreateModal({ openModal, spider, projectId }: JobCrea
         const requestParams: ApiProjectsSpidersListRequest = { pid: projectId, page, pageSize: PAGE_SIZE };
         apiService.apiProjectsSpidersList(requestParams).then(
             (results) => {
-                const spider_list = results.results;
+                const spiderList = results.results;
+                if (spiderList.length === 0) {
+                    return;
+                }
+
                 if (spider) {
                     let index = 0;
-                    index = spider_list.findIndex((listedSpider: Spider) => {
+                    index = spiderList.findIndex((listedSpider: Spider) => {
                         return listedSpider.sid == spider.sid;
                     });
 
                     if (index < 0) {
-                        spider_list.unshift(spider);
+                        spiderList.unshift(spider);
                         index = 0;
                     }
-                    setRequest({ ...request, sid: String(spider_list[index].sid) });
+                    setRequest({ ...request, sid: String(spiderList[index].sid) });
                     setJobData({
                         ...jobData,
-                        dataStatus: spider_list[index].dataStatus,
-                        dataExpiryDays: spider_list[index].dataExpiryDays,
+                        dataStatus: spiderList[index].dataStatus,
+                        dataExpiryDays: spiderList[index].dataExpiryDays,
                     });
                 } else {
-                    setRequest({ ...request, sid: String(spider_list[0].sid) });
+                    setRequest({ ...request, sid: String(spiderList[0].sid) });
                     setJobData({
                         ...jobData,
-                        dataStatus: spider_list[0].dataStatus,
-                        dataExpiryDays: spider_list[0].dataExpiryDays,
+                        dataStatus: spiderList[0].dataStatus,
+                        dataExpiryDays: spiderList[0].dataExpiryDays,
                     });
                 }
-                setSpiders(spider_list);
+                setSpiders(spiderList);
             },
             (error: unknown) => {
                 error;
@@ -290,7 +294,8 @@ export default function JobCreateModal({ openModal, spider, projectId }: JobCrea
                 className="flex items-center stroke-white border-estela hover:stroke-estela bg-estela text-white hover:text-estela text-sm hover:border-estela rounded-md"
                 onClick={() => {
                     if (spiders.length == 0) {
-                        message.error("Not implemented yet.");
+                        message.error("No spiders found. Please make a new deploy.");
+                        history.push(`/projects/${projectId}/deploys`);
                     } else {
                         setOpen(true);
                     }

diff --git a/estela-web/src/pages/RegisterPage/index.tsx b/estela-web/src/pages/RegisterPage/index.tsx
@@ -11,6 +11,13 @@ import { EstelaBanner } from "../../components";
 
 import { handleInvalidDataError } from "../../utils";
 
+import {
+    RegistrationContext,
+    RegistrationContextProps,
+    RegistrationProvider,
+    CheckBoxRegistration,
+} from "ExternalComponents/ExternalRegistration";
+
 const { Content } = Layout;
 const { Text } = Typography;
 
@@ -96,56 +103,64 @@ export class RegisterPage extends Component<unknown, RegisterPageState> {
                 <EstelaBanner />
                 <Content className="flex h-fit lg:mr-36 sm:h-fit md:h-full lg:h-full justify-center items-center p-6 sm:p-auto">
                     {!this.state.successRegister ? (
-                        <Form onFinish={this.handleSubmit} layout="vertical" className="p-2 w-96">
-                            <Row justify="center" className="w-96 my-7">
-                                <Text className="text-3xl font-bold">Sign up</Text>
-                            </Row>
-                            <Content className="">
-                                <Form.Item
-                                    label="Email"
-                                    name="email"
-                                    required
-                                    rules={[{ required: true, message: "Please input your email", type: "email" }]}
-                                >
-                                    <Input autoComplete="email" className="border-estela rounded-md py-2" />
-                                </Form.Item>
-                                <Form.Item
-                                    label="Username"
-                                    name="username"
-                                    required
-                                    rules={[{ required: true, message: "Please input your username" }]}
-                                >
-                                    <Input autoComplete="username" className="border-estela rounded-md py-2" />
-                                </Form.Item>
-                                <Form.Item
-                                    label="Password"
-                                    name="password"
-                                    required
-                                    rules={[{ required: true, message: "Please input your password" }]}
-                                >
-                                    <Input.Password
-                                        autoComplete="current-password"
-                                        className="border-estela rounded-md py-2"
-                                    />
-                                </Form.Item>
-                            </Content>
-                            <Button
-                                loading={loading}
-                                block
-                                htmlType="submit"
-                                className="border-estela bg-estela hover:border-estela hover:text-estela text-white rounded-md text-sm h-10"
-                            >
-                                Register
-                            </Button>
-                            <Content className="text-center text-base m-5">
-                                <p>If you already have an account. You can</p>
-                                <p>
-                                    <Link className="text-estela text-base font-bold underline" to="/login">
-                                        log in here
-                                    </Link>
-                                </p>
-                            </Content>
-                        </Form>
+                        <RegistrationProvider>
+                            <Form onFinish={this.handleSubmit} layout="vertical" className="p-2 w-96">
+                                <Row justify="center" className="w-96 my-7">
+                                    <Text className="text-3xl font-bold">Sign up</Text>
+                                </Row>
+                                <Content className="">
+                                    <Form.Item
+                                        label="Email"
+                                        name="email"
+                                        required
+                                        rules={[{ required: true, message: "Please input your email", type: "email" }]}
+                                    >
+                                        <Input autoComplete="email" className="border-estela rounded-md py-2" />
+                                    </Form.Item>
+                                    <Form.Item
+                                        label="Username"
+                                        name="username"
+                                        required
+                                        rules={[{ required: true, message: "Please input your username" }]}
+                                    >
+                                        <Input autoComplete="username" className="border-estela rounded-md py-2" />
+                                    </Form.Item>
+                                    <Form.Item
+                                        label="Password"
+                                        name="password"
+                                        required
+                                        rules={[{ required: true, message: "Please input your password" }]}
+                                    >
+                                        <Input.Password
+                                            autoComplete="current-password"
+                                            className="border-estela rounded-md py-2"
+                                        />
+                                    </Form.Item>
+                                </Content>
+                                <CheckBoxRegistration />
+                                <RegistrationContext.Consumer>
+                                    {(context: RegistrationContextProps) => (
+                                        <Button
+                                            disabled={!context.validated}
+                                            loading={loading}
+                                            block
+                                            htmlType="submit"
+                                            className="border-estela bg-estela hover:border-estela hover:text-estela text-white rounded-md text-sm h-10"
+                                        >
+                                            Register
+                                        </Button>
+                                    )}
+                                </RegistrationContext.Consumer>
+                                <Content className="text-center text-base m-5">
+                                    <p>If you already have an account. You can</p>
+                                    <p>
+                                        <Link className="text-estela text-base font-bold underline" to="/login">
+                                            log in here
+                                        </Link>
+                                    </p>
+                                </Content>
+                            </Form>
+                        </RegistrationProvider>
                     ) : (
                         <Row justify="center" className="w-96">
                             <Text className="text-3xl font-bold">Thanks for registering!</Text>

diff --git a/estela-web/src/pages/SpiderListPage/index.tsx b/estela-web/src/pages/SpiderListPage/index.tsx
@@ -125,12 +125,6 @@ export class SpiderListPage extends Component<RouteComponentProps<RouteParams>,
                                 </Button>
                             </Col>
                         </Row>
-                        <Row className="lg:mx-6 mx-4 grid grid-cols-7 gap-2 lg:gap-4 justify-between">
-                            <Col className="bg-metal col-span-5">
-                                <Content className="bg-white rounded-2xl py-5 pr-8 pl-5"></Content>
-                            </Col>
-                            <Col className="bg-metal grid justify-start col-span-2 gap-2"></Col>
-                        </Row>
                         <Row className="bg-white rounded-lg">
                             <div className="m-4">
                                 <Space direction="vertical" className="">