Added a new way to view the all fields form (#254)

* Added a new way to view the all fields form

* Added a form test

* Moved stuff to SURF specific

* Cleaned up

* Made create form promise immutable

Author: acidjunk

src/custom-surf/api/index.ts

@@ -67,6 +67,8 @@ abstract class CustomApiClientInterface extends BaseApiClient {
     abstract free_subnets: (subnet: string, netmask: number, prefixlen: number) => Promise<string[]>;
     abstract contacts: (organisationId: string) => Promise<ContactPerson[]>;
     abstract dienstafnameBySubscription: (subscriptionId: string) => Promise<Dienstafname | undefined>;
+    abstract showForms: () => Promise<string[]>;
+    abstract startForm: (formKey: string, userInputs: {}[]) => Promise<any>;
     abstract cimShowForms: () => Promise<string[]>;
     abstract cimStartForm: (formKey: string, userInputs: {}[]) => Promise<any>;
     abstract cimTickets: () => Promise<ServiceTicket[]>;
@@ -228,6 +230,14 @@ export class CustomApiClient extends CustomApiClientInterface {
         return this.postPutJson(prefix_cim_dev_uri("surf/cim/forms/" + formKey), userInputs, "post", false, true);
     };
 
+    showForms = (): Promise<string[]> => {
+        return this.fetchJson("surf/forms");
+    };
+
+    startForm = (formKey: string, userInputs: {}[]): Promise<{ id: string }> => {
+        return this.postPutJson("surf/forms/" + formKey, userInputs, "post", false, true);
+    };
+
     cimCreateTicket = (ticket: CreateServiceTicketPayload): Promise<{ id: string }> => {
         return this.postPutJson(prefix_cim_dev_uri("surf/cim/tickets"), ticket, "post", false, true);
     };

src/custom-surf/components/CreateTestForm.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import UserInputFormWizard from "components/inputForms/UserInputFormWizard";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useIntl } from "react-intl";
+import ApplicationContext from "utils/ApplicationContext";
+import { setFlash } from "utils/Flash";
+import { Form, FormNotCompleteResponse } from "utils/types";
+
+interface IProps {
+    preselectedInput?: any;
+    formKey: string;
+    handleSubmit: (userInputs: any) => void;
+}
+
+export default function CreateTestForm(props: IProps) {
+    const intl = useIntl();
+    const { preselectedInput, formKey, handleSubmit } = props;
+    const { redirect, customApiClient } = useContext(ApplicationContext);
+    const [form, setForm] = useState<Form>({});
+    const { stepUserInput, hasNext } = form;
+
+    const submit = useCallback(
+        (userInputs: {}[]) => {
+            // if (preselectedInput.product) {
+            // Todo: decide if we want to implement pre-selections and design a way to do it generic
+            //     userInputs = [{ preselectedInput }, ...userInputs];
+            // }
+            const promise = customApiClient.startForm(formKey, userInputs).then(
+                (form) => {
+                    handleSubmit(form);
+                    setFlash(intl.formatMessage({ id: `cim.flash.${formKey}` }));
+                },
+                (e) => {
+                    throw e;
+                }
+            );
+
+            return customApiClient.catchErrorStatus<any>(promise, 503, (json) => {
+                setFlash(intl.formatMessage({ id: `cim.backendProblem` }), "error");
+                redirect("/tickets");
+            });
+        },
+        [redirect, intl, customApiClient, formKey, handleSubmit]
+    );
+
+    useEffect(() => {
+        if (formKey) {
+            customApiClient.catchErrorStatus<FormNotCompleteResponse>(submit([]), 510, (json) => {
+                setForm({
+                    stepUserInput: json.form,
+                    hasNext: json.hasNext ?? false,
+                });
+            });
+        }
+    }, [formKey, submit, preselectedInput, intl, customApiClient]);
+
+    return (
+        <div>
+            {stepUserInput && (
+                <UserInputFormWizard
+                    stepUserInput={stepUserInput}
+                    validSubmit={submit}
+                    cancel={() => redirect("/tickets")}
+                    hasNext={hasNext ?? false}
+                />
+            )}
+        </div>
+    );
+}

src/custom-surf/components/cim/CreateForm.tsx

@@ -39,7 +39,7 @@ export default function CreateForm(props: IProps) {
             // Todo: decide if we want to implement pre-selections and design a way to do it generic
             //     userInputs = [{ preselectedInput }, ...userInputs];
             // }
-            let promise = customApiClient.cimStartForm(formKey, userInputs).then(
+            const promise = customApiClient.cimStartForm(formKey, userInputs).then(
                 (form) => {
                     handleSubmit(form);
                     setFlash(intl.formatMessage({ id: `cim.flash.${formKey}` }));

src/custom-surf/manifest.json

@@ -63,6 +63,13 @@
             "file": "CloseServiceTicket",
             "component": "CloseServiceTicket",
             "showInMenu": false
+        },
+        {
+            "name": "form-test",
+            "path": "pages",
+            "file": "FormTest",
+            "component": "FormTest",
+            "showInMenu": false
         }
     ],
     "disabledRoutes": ["/YOUR_DISABLED_ROUTE_HERE"],

src/custom-surf/pages/FormTest.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { EuiPage, EuiPageBody } from "@elastic/eui";
+import CreateTestForm from "custom/components/CreateTestForm";
+import FormHeader from "custom/components/FormHeader";
+import { formStyling } from "custom/pages/FormStyling";
+import React from "react";
+
+export default function FormTest() {
+    const handleSubmit = (userInputs: any) => {
+        console.log("Form succes! Payload: ", userInputs);
+    };
+
+    return (
+        <EuiPage css={formStyling}>
+            <EuiPageBody component="div">
+                <FormHeader
+                    title="Form test"
+                    explainTitle="A form that uses all available form elements"
+                    explainDescription={<p>Nothing will happen when you submit. This is a test form after all.</p>}
+                />
+                <CreateTestForm formKey="all_form_fields" handleSubmit={handleSubmit} />
+            </EuiPageBody>
+        </EuiPage>
+    );
+}