feat non mandatory validation on gateway

.prettierignore

@@ -14,3 +14,4 @@ build
 src/external
 LICENSE.md
 
+LICENSE.md

src/components/App/AddForm.tsx

@@ -0,0 +1,92 @@
+/********************************************************************************
+ * Copyright (c) 2018 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0, or the W3C Software Notice and
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
+ ********************************************************************************/
+import React from "react";
+import { OperationsMap, OperationsType } from "../Dialogs/AddFormDialog";
+
+interface AddFormProps {
+  type: OperationsType;
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  operations: (type: OperationsType) => OperationsMap;
+  defaultValue?: string;
+  error?: string;
+}
+
+const AddForm: React.FC<AddFormProps> = ({
+  type,
+  onInputChange,
+  operations,
+  defaultValue = "",
+  error = "",
+}) => {
+  const inputClasses =
+    "w-full rounded-md border-2 bg-gray-600 p-2 text-white focus:outline-none sm:text-sm " +
+    (error
+      ? "border-red-400 focus:border-red-400"
+      : "border-gray-600 focus:border-blue-500");
+
+  return (
+    <>
+      <label className="pl-3 text-sm font-medium text-gray-400">
+        Operations:
+      </label>
+      <div className="p-1">
+        <div className="rounded-md bg-gray-600 p-1">
+          {operations(type).map((name) => {
+            const id = `form-${name}`;
+            const isInvoke = name === "invokeaction";
+            return (
+              <div key={id} className="form-checkbox pl-2">
+                <input
+                  id={id}
+                  className="form-checkbox-input"
+                  type="checkbox"
+                  value={name}
+                  readOnly={isInvoke}
+                  checked={isInvoke || undefined}
+                />
+                <label className="form-checkbox-label pl-2" htmlFor={id}>
+                  {name}
+                </label>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="p-1 pt-2">
+        <label
+          htmlFor="form-href"
+          className="pl-2 text-sm font-medium text-gray-400"
+        >
+          Href:
+        </label>
+        <input
+          type="text"
+          name="form-href"
+          value={defaultValue}
+          id="form-href"
+          className={inputClasses}
+          placeholder="http://example.com/href"
+          onChange={onInputChange}
+        />
+        {error && (
+          <span id="form-href-info" className="pl-2 text-xs text-red-400">
+            {error}
+          </span>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default AddForm;

src/components/App/AppHeader.tsx

@@ -35,9 +35,9 @@ import ConvertTmDialog from "../Dialogs/ConvertTmDialog";
 import CreateTdDialog from "../Dialogs/CreateTdDialog";
 import SettingsDialog from "../Dialogs/SettingsDialog";
 import ShareDialog from "../Dialogs/ShareDialog";
-import ContributeToCatalog from "../Dialogs/ContributeToCatalog";
+import ContributeToCatalog from "../Dialogs/ContributeToCatalogDialog";
 import ErrorDialog from "../Dialogs/ErrorDialog";
-import Button from "./Button";
+import Button from "../base/Button";
 import SendTDDialog from "../Dialogs/SendTDDialog";
 import { getLocalStorage } from "../../services/localStorage";
 import type { ThingDescription } from "wot-thing-description-types";

src/components/App/ContributeToCatalog.tsx

@@ -0,0 +1,151 @@
+/********************************************************************************
+ * Copyright (c) 2018 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0, or the W3C Software Notice and
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
+ ********************************************************************************/
+import React from "react";
+import FormMetadata from "../App/FormMetadata";
+import FormInteraction from "../App/FormInteraction";
+import FormSubmission from "../App/FormSubmission";
+import type { FormElementBase } from "wot-thing-description-types";
+
+interface ContributeToCatalogProps {
+  currentStep: number;
+
+  // Step 1 - Metadata
+  metadata: {
+    model: string;
+    author: string;
+    manufacturer: string;
+    license: string;
+    copyrightYear: string;
+    holder: string;
+    validation: Validation;
+    errorMessage: string;
+    copied: boolean;
+  };
+  onChangeModel: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChangeAuthor: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChangeManufacturer: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChangeLicense: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChangeCopyrightYear: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChangeHolder: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onClickCatalogValidation: () => void;
+  onClickCopyThingModel: () => void;
+
+  // Step 2 - Interaction
+  filteredHeaders: { key: string; text: string }[];
+  filteredRows: (FormElementBase & {
+    id: string;
+    description: string;
+    propName: string;
+    title: string;
+  })[];
+  backgroundTdToSend: ThingDescription;
+  interaction: ContributionToCatalogState["interaction"];
+  dispatch: React.Dispatch<any>;
+  handleFieldChange: (placeholder: string, value: string) => void;
+
+  // Step 3 - Submission
+  submission: {
+    tmCatalogEndpoint: string;
+    tmCatalogEndpointError: string;
+    repository: string;
+    repositoryError: string;
+    submittedError: string;
+    submitted: boolean;
+    id: string;
+    link: string;
+  };
+  handleTmCatalogEndpointChange: (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  handleRepositoryChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSubmit: () => Promise<void>;
+}
+
+const ContributeToCatalog: React.FC<ContributeToCatalogProps> = ({
+  currentStep,
+  metadata,
+  onChangeModel,
+  onChangeAuthor,
+  onChangeManufacturer,
+  onChangeLicense,
+  onChangeCopyrightYear,
+  onChangeHolder,
+  onClickCatalogValidation,
+  onClickCopyThingModel,
+  filteredHeaders,
+  filteredRows,
+  backgroundTdToSend,
+  interaction,
+  dispatch,
+  handleFieldChange,
+  submission,
+  handleTmCatalogEndpointChange,
+  handleRepositoryChange,
+  handleSubmit,
+}) => {
+  return (
+    <div className="my-4 flex space-x-2">
+      {currentStep === 1 && (
+        <FormMetadata
+          model={metadata.model}
+          onChangeModel={onChangeModel}
+          author={metadata.author}
+          onChangeAuthor={onChangeAuthor}
+          manufacturer={metadata.manufacturer}
+          onChangeManufacturer={onChangeManufacturer}
+          license={metadata.license}
+          onChangeLicense={onChangeLicense}
+          copyrightYear={metadata.copyrightYear}
+          onChangeCopyrightYear={onChangeCopyrightYear}
+          holder={metadata.holder}
+          onChangeHolder={onChangeHolder}
+          onClickCatalogValidation={onClickCatalogValidation}
+          onClickCopyThingModel={onClickCopyThingModel}
+          isValidating={metadata.validation === "VALIDATING"}
+          isValid={metadata.validation === "VALID"}
+          errorMessage={metadata.errorMessage}
+          copied={metadata.copied}
+        />
+      )}
+
+      {currentStep === 2 && (
+        <FormInteraction
+          filteredHeaders={filteredHeaders}
+          filteredRows={filteredRows}
+          backgroundTdToSend={backgroundTdToSend}
+          interaction={interaction}
+          dispatch={dispatch}
+          handleFieldChange={handleFieldChange}
+        />
+      )}
+
+      {currentStep === 3 && (
+        <FormSubmission
+          tmCatalogEndpoint={submission.tmCatalogEndpoint}
+          tmCatalogEndpointError={submission.tmCatalogEndpointError}
+          handleTmCatalogEndpointChange={handleTmCatalogEndpointChange}
+          repository={submission.repository}
+          repositoryError={submission.repositoryError}
+          handleRepositoryChange={handleRepositoryChange}
+          handleSubmit={handleSubmit}
+          submittedError={submission.submittedError}
+          submitted={submission.submitted}
+          id={submission.id}
+          link={submission.link}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ContributeToCatalog;

src/components/App/ConvertTm.tsx

@@ -0,0 +1,12 @@
+/********************************************************************************
+ * Copyright (c) 2018 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0, or the W3C Software Notice and
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
+ ********************************************************************************/

src/components/Dialogs/base/FormCreateTd.tsx → src/components/App/CreateTd.tsx

@@ -12,13 +12,13 @@
  ********************************************************************************/
 import React from "react";
 import { ChevronDown } from "react-feather";
-import { parseCsv, mapCsvToProperties } from "../../../utils/parser";
-import FormField from "./FormField";
-import BaseButton from "../../TDViewer/base/BaseButton";
+import { parseCsv, mapCsvToProperties } from "../../utils/parser";
+import FormField from "../base/FormField";
+import BaseButton from "../TDViewer/base/BaseButton";
 
 type ThingType = "TD" | "TM";
 
-interface FormCreateTdProps {
+interface CreateTdProps {
   type: ThingType;
   onChangeType: (e: React.ChangeEvent<HTMLSelectElement>) => void;
   protocol: string;
@@ -43,7 +43,7 @@ interface FormCreateTdProps {
   setThingSecurity: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const FormCreateTd: React.FC<FormCreateTdProps> = ({
+const CreateTd: React.FC<CreateTdProps> = ({
   type,
   onChangeType,
   protocol,
@@ -290,4 +290,4 @@ const FormCreateTd: React.FC<FormCreateTdProps> = ({
   );
 };
 
-export default FormCreateTd;
+export default CreateTd;