[Feat][WRS-1889] Introduce "new" command to generate project structure (

#45)

src/connector-cli/debugger/src/App.tsx

@@ -1,12 +1,13 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import './App.css';
-import { DataModel } from './Helpers/DataModel';
-import { Header, initRuntime } from './Helpers/ConnectorRuntime';
-// import react
-import { useEffect } from 'react';
-import { Models } from './Helpers/Models';
 import { MainContent } from './Components/MainContent';
 import { Sidebar } from './Components/Sidebar';
+import { Header, initRuntime } from './Helpers/ConnectorRuntime';
+import { DataModel } from './Helpers/DataModel';
+import { Models } from './Helpers/Models';
+
+const httpHeadersStorageKey = 'connector-cli-http-headers';
+const runtimeSettingsStorageKey = 'connector-cli-runtime-settings';
 
 function App() {
   const [dataModel, setDataModel] = useState<DataModel | undefined>(undefined);
@@ -17,7 +18,7 @@ function App() {
 
   const [globalHeaders, setGlobalHeaders] = useState<Header[]>([]);
   const [authorization, setAuthorization] = useState<Header>({} as any);
-  const [runtimeOptions, setRuntimeOptinos] = useState<Record<string, unknown>>(
+  const [runtimeOptions, setRuntimeOptions] = useState<Record<string, unknown>>(
     {}
   );
 
@@ -32,11 +33,74 @@ function App() {
       .catch((err) => {
         setError('Could not fetch connector');
         setLoading(false);
-        console.log('error', err);
+        console.error('error', err);
       });
   }, [globalHeaders, runtimeOptions, authorization]);
 
+  useEffect(() => {
+    Models.updateConfiguration = (
+      name: 'headers' | 'options',
+      value: unknown
+    ) => {
+      switch (name) {
+        case 'headers':
+          const val: { authorization: Header; other: Header[] } = value as {
+            authorization: Header;
+            other: Header[];
+          };
+          setAuthorization(val.authorization);
+          setGlobalHeaders(val.other);
+
+          sessionStorage.setItem(httpHeadersStorageKey, JSON.stringify(val));
+          break;
+        case 'options': {
+          setRuntimeOptions(value as Record<string, unknown>);
+          sessionStorage.setItem(
+            runtimeSettingsStorageKey,
+            JSON.stringify(value)
+          );
+        }
+      }
+    };
+
+    // Read saved configuration from session storage
+    if (!!sessionStorage.getItem(runtimeSettingsStorageKey)) {
+      Models.updateConfiguration(
+        'options',
+        JSON.parse(sessionStorage.getItem(runtimeSettingsStorageKey)!)
+      );
+    }
+    if (!!sessionStorage.getItem(httpHeadersStorageKey)) {
+      Models.updateConfiguration(
+        'headers',
+        JSON.parse(sessionStorage.getItem(httpHeadersStorageKey)!)
+      );
+    }
+  }, []);
+
   function onModelChanged(model: DataModel): void {
+    // TODO: Implement better way of propagation stored values to the component params
+    if (
+      model.name === 'Runtime options' &&
+      Object.keys(runtimeOptions).length !== 0
+    ) {
+      model.parameters[0].value = runtimeOptions;
+    }
+    if (
+      model.name === 'headers' &&
+      (authorization.name || authorization.value)
+    ) {
+      model.parameters[0].value = { [authorization.name]: authorization.value };
+    }
+    if (model.name === 'headers' && Object.keys(globalHeaders).length !== 0) {
+      model.parameters[1].value = globalHeaders.reduce(
+        (val, gh) => {
+          val[gh.name] = gh.value;
+          return val;
+        },
+        {} as Record<string, string>
+      );
+    }
     setDataModel(model);
   }
 
@@ -48,24 +112,6 @@ function App() {
     return <div>Error: {error}</div>;
   }
 
-  Models.updateConfiguration = (
-    name: 'headers' | 'options',
-    value: unknown
-  ) => {
-    switch (name) {
-      case 'headers':
-        setAuthorization(
-          (value as { authorization: Header; other: Header[] }).authorization
-        );
-        setGlobalHeaders(
-          (value as { authorization: Header; other: Header[] }).other
-        );
-        break;
-      case 'options':
-        setRuntimeOptinos(value as Record<string, unknown>);
-    }
-  };
-
   Models.ConnectorMetadata = {
     name: connector.constructor.name,
     type:

src/connector-cli/debugger/src/Components/GenericComponent.tsx

@@ -1,13 +1,13 @@
-import { useCallback, useState } from 'react';
-import { ParameterInput } from './ParameterInput';
+import { useCallback, useEffect, useState } from 'react';
 import {
   DataModel,
   InvokableDataModel,
   Parameter,
   SettableDataModel,
 } from '../Helpers/DataModel';
-import JsonObjectRenderer from './JsonObjectRenderer';
 import ArrayBufferImage from './ImageFromBuffer';
+import JsonObjectRenderer from './JsonObjectRenderer';
+import { ParameterInput } from './ParameterInput';
 
 export const GenericComponent = ({ dataModel }: { dataModel: DataModel }) => {
   const [values, setValues] = useState<Record<string, unknown>>({});
@@ -28,6 +28,28 @@ export const GenericComponent = ({ dataModel }: { dataModel: DataModel }) => {
     []
   );
 
+  const denormalizeValues = useCallback(() => {
+    return dataModel.parameters.reduce(
+      (val, p) => {
+        if (p.componentType === 'complex') {
+          p.complex
+            .filter((cp) => cp.value !== undefined)
+            .forEach((cp) => {
+              val[`${p.name}.${cp.name}`] = cp.value;
+            });
+        } else if (p.value) {
+          val[p.name] = p.value;
+        }
+        return val;
+      },
+      {} as Record<string, unknown>
+    );
+  }, [dataModel.parameters]);
+
+  useEffect(() => {
+    setValues(denormalizeValues());
+  }, [denormalizeValues]);
+
   const normalizeValues = () => {
     // in the values we will find something like {"orderType.id": "dsfadf","orderType.name": "dsfaasdf","orderId": "dasfadsf"}
     // we want to flatten this to {"orderType": {"id": "dsfadf","name": "dsfaasdf"},"orderId": "dasfadsf"}
@@ -62,7 +84,6 @@ export const GenericComponent = ({ dataModel }: { dataModel: DataModel }) => {
         normalizedValues
       );
       setResult(result);
-      console.log('result', result);
     } catch (error) {
       setResult({
         message: `failed to invoke ${

src/connector-cli/debugger/src/Components/ParameterDictionaryInput.tsx

@@ -36,7 +36,14 @@ export const ParameterDictionaryInput = ({
 
   const handleRemove = (index: number) => {
     // remove the item from the list
-    setItems(items.filter((item, i) => i !== index));
+    const newItems = items.filter((item, i) => i !== index);
+    setItems(newItems);
+    // convert newItems to an object
+    const newItemsObject: { [key: string]: any } = {};
+    newItems.forEach((item) => {
+      newItemsObject[item.key] = item.value;
+    });
+    onChange(parameter.name, parameter, newItemsObject);
   };
 
   const handleKeyChange = (

src/connector-cli/debugger/src/Helpers/DataModel.tsx

@@ -21,28 +21,28 @@ export type ConnectorMetadata = {
 };
 
 export type SimpleParameter = {
-  value?: any | undefined;
+  value?: any;
   name: string;
   componentType: 'text' | 'boolean' | 'list';
 };
 
 export type SelectParameter = {
-  value?: any | undefined;
+  value?: any;
   name: string;
   componentType: 'select';
-  options: string[] | undefined;
+  options?: string[];
 };
 
 export type NumberParameter = {
-  value?: number | undefined;
+  value?: number;
   name: string;
   componentType: 'number';
   min?: number;
   max?: number;
 };
 
 export type DictionaryParameter = {
-  value?: any | undefined;
+  value?: any;
   name: string;
   componentType: 'dictionary';
   rectrictModification?: boolean;
@@ -56,10 +56,8 @@ export type Parameter =
   | NumberParameter;
 
 export type ComplexParameter = {
-  value?: any | undefined;
+  value?: any;
   name: string;
-  componentType: 'text' | 'boolean' | 'complex';
-  complex:
-    | Array<SimpleParameter | DictionaryParameter | NumberParameter>
-    | undefined;
+  componentType: 'complex';
+  complex: Array<SimpleParameter | DictionaryParameter | NumberParameter>;
 };

src/connector-cli/debugger/src/Helpers/Models.tsx

@@ -31,8 +31,8 @@ export const Models: {
       set: (values: any[]) => {
         Models.updateConfiguration('headers', {
           authorization: {
-            name: Object.keys(values[0])[0],
-            value: Object.values(values[0])[0],
+            name: Object.keys(values[0] ?? [])[0],
+            value: Object.values(values[0] ?? [])[0],
           },
           other: Object.entries(values[1] ?? []).map((h) => ({
             name: h[0],

src/connector-cli/package.json

@@ -16,6 +16,7 @@
     "commander": "^12.0.0",
     "dot-object": "^2.1.4",
     "express": "^4.19.2",
+    "reload": "^3.2.1",
     "js-yaml": "^4.1.0",
     "open": "^9.1.0",
     "prettier": "^3.0.3",

src/connector-cli/readme.md

@@ -1,23 +1,29 @@
 # @chili-publish/connector-cli
 
-`@chili-publish/connector-cli` is a command-line interface tool designed to facilitate the management of connector test and publish processes in the CHILI publisher ecosystem. It provides a suite of commands to initialize projects, build connectors, debug, test, deploy and publish them to the marketplace.
+`@chili-publish/connector-cli` is a command-line interface tool designed to facilitate the management of connector test and publish processes in the CHILI publisher ecosystem. It provides a suite of commands to initialize projects, build connectors, debug, test, deploy them to your environment.
 
 ## Features
 
-### Main
+### Project setup
+
+- **Init**: Scaffold a new connector project with `init`.
+- **New**: Scaffold a new connector project with `new`.
+
+### Development
 
-- **Initialize**: Scaffold a new connector with `init`.
-- **Publish**: Deploy your connector to the specified environment with `publish`.
-- **Set Auth**: Configure your connector authentication with `set-auth`.
 - **Build**: Build your connector from TypeScript to JavaScript with `build`.
 - **Debug**: Run a local debug server for your connector with `debug`.
 - **Test**: Run a test suite against your connector with `test`.
 - **Stress Test**: Perform stress tests on your compiled connector with `stress`.
 
+### Deployment
+
+- **Publish**: Deploy your connector to the specified environment with `publish`.
+- **Set Auth**: Configure your connector authentication with `set-auth`.
+
 ### Informational
 
-- **Info**: Retrieve runtime information about your connector with `info`.
-- **List options**: Retrieve information about particular connector config with `list-options`.
+- **Info**: Retrieve information about your connector with `info`.
 
 ## Installation
 
@@ -43,6 +49,12 @@ After installation, the `connector-cli` command will be available globally. Belo
 connector-cli init --name YourConnectorName
 ```
 
+or
+
+```sh
+connector-cli new --name YourConnectorName
+```
+
 ### Build a connector
 
 ```sh
@@ -58,13 +70,13 @@ connector-cli login
 ### Deploy a connector to environment
 
 ```sh
-connector-cli publish pathToTsFile --baseUrl EnvironmentAPIBaseURL --environment YOUR_ENVIRONMENT --name YourConnectorName
+connector-cli publish pathToProject --baseUrl EnvironmentAPIBaseURL --environment YOUR_ENVIRONMENT --name YourConnectorName
 ```
 
 ### Configure a connector authentication
 
 ```sh
-connector-cli set-auth pathToConnectorDir --baseUrl EnvironmentAPIBaseURL --environment YOUR_ENVIRONMENT --connectorId ConnectorIdFromEnv --usage browser --type staticKey --auth-data-file ./pathToAuthData
+connector-cli set-auth pathToProject --baseUrl EnvironmentAPIBaseURL --environment YOUR_ENVIRONMENT --connectorId ConnectorIdFromEnv --usage browser --type staticKey --auth-data-file ./pathToAuthData
 ```
 
 ### Debug a connector