[NUI-202] Config import from cli context (#33)

Author: pricelessrabbit

frontend/docs/entities/connection/def/connection.md

@@ -2,8 +2,6 @@
 
 Nui connection  that manages one or more underlying NATS servers connections
 
-```typescript
-
 ```typescript
 Connection {
 	id?: string

frontend/docs/entities/connection/def/nats-cli-import.md

@@ -0,0 +1,14 @@
+## CLI IMPORT
+
+Nui connection  that manages one or more underlying NATS servers connections
+
+```typescript
+CliImport
+{
+    name: string
+    path: string
+    error: string
+    importedContext: { [key: string]: any }
+}
+```
+

frontend/docs/entities/connection/import.md

@@ -0,0 +1,31 @@
+
+## IMPORT FROM CLI
+
+### URL
+
+```
+POST /api/connection/import/nats-cli
+```
+
+
+### BODY
+
+```typescript
+{
+    path: string
+}
+```
+
+### RESPONSE
+
+```typescript
+{
+    connections: Connection[]
+    imports: CliImport[]
+}
+connection
+```
+
+[CONNECTION](./def/connection.md)
+
+[CLI IMPORT](./def/nats-cli-import.md)

frontend/package-lock.json

@@ -18,7 +18,7 @@
     "@fontsource/darker-grotesque": "^5.0.8",
     "@monaco-editor/react": "^4.6.0",
     "@priolo/jon": "^0.7.7",
-    "@priolo/jack": "0.1.9",
+    "@priolo/jack": "^0.1.11",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.12",
     "monaco-editor": "^0.50.0",

frontend/package.json

@@ -1,33 +1,38 @@
 import ajax, { CallOptions } from "@/plugins/AjaxService"
-import { Connection } from "@/types/Connection"
+import { CliImport, Connection } from "@/types/Connection"
 
 
 /** INDEX
- * Recupera tutte le CONNECTION
+ * Get all the CONNECTIONs
  */
 function index(opt?: CallOptions): Promise<Connection[]> {
 	return ajax.get(`connection`, null, opt)
 }
 
 /** UPDATE
- * Modifica/crea un CONNECTION
+ * Update a CONNECTION
  */
 function save(cnn: Connection, opt?: CallOptions): Promise<Connection> {
 	const blockId = cnn.id ? `/${cnn.id}` : ""
 	return ajax.post(`connection${blockId}`, cnn, opt)
 }
 
 /** DELETE
- * Rimuove un CONNECTION 
+ * delete a CONNECTION
  */
 function remove(id: string, opt?: CallOptions): Promise<void> {
 	if (!id) return
 	return ajax.delete(`connection/${id}`, null, opt)
 }
 
-const api = {
+function importFromNatsCli(path: string, opt?: CallOptions): Promise<{ connections: Connection[], imports: CliImport[]}> {
+	return ajax.post(`connection/import/nats-cli`, {path: path}, opt)
+}
+
+const connectionApi = {
 	index,
 	remove,
 	save,
+	importFromNatsCli,
 }
-export default api
+export default connectionApi

frontend/src/api/connection.ts

@@ -36,6 +36,9 @@ const CardIcon: FunctionComponent<Props> = ({
 			return <ConnectionsIcon className={className} style={style} />
 		case DOC_TYPE.CONNECTION:
 			return <ConnectionIcon className={className} style={style} />
+		case DOC_TYPE.CNN_LOADER:
+			return <ConnectionIcon className={className} style={style} />
+
 		case DOC_TYPE.MESSAGES:
 			return <MessagesIcon className={className} style={style} />
 		case DOC_TYPE.MESSAGE:

frontend/src/components/cards/CardIcon.tsx

@@ -39,6 +39,8 @@ import StreamMessagesView from "../stacks/streams/messages/View"
 import SyncView from "../stacks/sync/View"
 import JsonConfigView from "../stacks/jsonconfig/View"
 import { JsonConfigStore } from "../../stores/stacks/jsonconfig"
+import { CnnImportStore } from "../../stores/stacks/cnnImport"
+import CnnLoaderView from "../stacks/cnnImport/View"
 
 
 
@@ -57,6 +59,9 @@ const PolymorphicCard: FunctionComponent<DocCmpProps> = ({
 				return <CnnListView store={view as CnnListStore} />
 			case DOC_TYPE.CONNECTION:
 				return <CnnDetailView store={view as CnnDetailStore} />
+			case DOC_TYPE.CNN_LOADER:
+				return <CnnLoaderView store={view as CnnImportStore} />
+
 			case DOC_TYPE.MESSAGES:
 				return <MessagesView store={view as MessagesStore} />
 			case DOC_TYPE.MESSAGE:

frontend/src/components/cards/PolymorphicCard.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@priolo/jack"
+import { useStore } from "@priolo/jon"
+import { FunctionComponent } from "react"
+import { CnnImportStore, IMPORT_STATUS } from "../../../stores/stacks/cnnImport"
+
+
+
+interface Props {
+	store?: CnnImportStore
+}
+
+const ActionsCmp: FunctionComponent<Props> = ({
+	store,
+}) => {
+
+	// STORE
+	useStore(store)
+
+	// HOOKs
+
+	// HANDLER
+	const handleImportClick = async () => {
+		if (store.state.status == IMPORT_STATUS.LOADING ) return
+		store.import()
+	}
+
+	// RENDER
+	if (store.state.status == IMPORT_STATUS.DONE) return null
+	const clsRoot = store.state.status == IMPORT_STATUS.LOADING ? "jack-ani-loading" : ""
+	const styRoot = store.state.status == IMPORT_STATUS.LOADING ? { color: "var(--cmp-select-fg)"} : null
+	
+	return <>
+		<Button
+			className={clsRoot} style={styRoot}
+			children="IMPORT"
+			onClick={handleImportClick}
+		/>
+	</>
+}
+
+export default ActionsCmp

frontend/src/components/stacks/cnnImport/Actions.tsx

@@ -0,0 +1,20 @@
+.root {
+	display: flex;
+	flex-direction: column;
+}
+.header {
+	display: flex;
+	font-size: 12px;
+	gap: 5px;
+}
+.header .key {
+	font-weight: 600;
+}
+.header .row {
+	flex: 1;
+	 display: flex; 
+	 flex-direction: column;
+}
+.header .values {
+	font-weight: 300;
+}

frontend/src/components/stacks/cnnImport/HeadersCmp.module.css

@@ -0,0 +1,49 @@
+import { FunctionComponent } from "react"
+import cls from "./HeadersCmp.module.css"
+import { CopyButton } from "@priolo/jack"
+
+
+
+interface Props {
+	headers?: { [key: string]: string[] }
+}
+
+/** dettaglio di un messaggio */
+const HeadersCmp: FunctionComponent<Props> = ({
+	headers,
+}) => {
+
+	// STORE
+
+	// HOOKs
+
+	// HANDLER
+
+	// RENDER
+	// const headers: [string, string][] = useMemo(() => {
+	// 	if (!msgSa.message.headers) return []
+	// 	return Object
+	// 		.entries(msgSa.message.headers)
+	// 		.reduce<[string, string][]>((acc, [key, values]) => {
+	// 			return acc.concat(values.map(v => [key, v]))
+	// 		}, [])
+	// }, [msgSa.message.headers])
+	if ( !headers ) return null
+
+	return <div className={cls.root}>
+		{Object.entries(headers).map(([key, values]) => <div className={cls.header}>
+			<div className={cls.key}>{key}</div>
+			<div>:</div>
+			<div className={cls.row}>
+				{values.map(value => <div className={`${cls.header} jack-hover-container`}>
+					<div className={cls.values}>{value}</div>
+					<CopyButton absolute value={value} />
+				</div>)}
+			</div>
+		</div>)}
+	</div>
+}
+
+export default HeadersCmp
+
+