add edit flow to edit consumers

Author: Zwiterrion

otoroshi/app/next/models/Api.scala

@@ -109,7 +109,7 @@ object ApiRoute {
 
 case class ApiFlows(id: String,
                     name: String,
-                    consumers: Seq[ApiConsumer] = Seq.empty,
+                    consumers: Seq[String] = Seq.empty,
                     plugins: NgPlugins)
 
 object ApiFlows {
@@ -134,8 +134,7 @@ object ApiFlows {
         name = json.select("name").asString,
         plugins = NgPlugins.readFrom(json.select("plugins")),
         consumers = (json \ "consumers")
-          .asOpt[Seq[JsValue]]
-          .map(_.flatMap(v => ApiConsumer._fmt.reads(v).asOpt))
+          .asOpt[Seq[String]]
           .getOrElse(Seq.empty)
       )
     } match {
@@ -148,7 +147,8 @@ object ApiFlows {
     override def writes(o: ApiFlows): JsValue = Json.obj(
       "id" -> o.id,
       "name" -> o.name,
-      "plugins" -> o.plugins.json
+      "plugins" -> o.plugins.json,
+      "consumers" -> o.consumers,
     )
   }
 }

otoroshi/javascript/src/pages/ApiEditor/Sidebar.js

@@ -125,7 +125,7 @@ export default (props) => {
                 {!isOnApisHome && <>
                     {openedSidebar && <p className="sidebar-title mt-3">General</p>}
                     <div className='me-1 my-2'>
-                        {openedSidebar && version !== 'staging' && <Select
+                        {openedSidebar && version && version !== 'staging' && <Select
                             value={{ value: version, label: version }}
                             onChange={item => {
                                 const queryParams = new URLSearchParams(window.location.search);

otoroshi/javascript/src/pages/ApiEditor/index.js

@@ -1644,7 +1644,107 @@ function SidebarComponent(props) {
 }
 
 function EditFlow(props) {
+    const history = useHistory()
+    const params = useParams()
+    const location = useLocation()
+
+    const { item, updateItem, isLoading } = useDraftOfAPI()
+
+    const [flow, setFlow] = useState()
+
+    useEffect(() => {
+        if (item && !flow) {
+            const currentFlow = item.flows.find(flow => flow.id === params.flowId)
+
+            if (currentFlow) {
+                props.setTitle({
+                    value: `Update ${currentFlow.name}`,
+                    noThumbtack: true,
+                    children: <VersionBadge />
+                })
+
+                setFlow({
+                    ...currentFlow,
+                    consumers: item.consumers.reduce((acc, item) => ({
+                        ...acc,
+                        [item.id]: currentFlow.consumers.includes(item.id)
+                    }), {})
+                })
+            }
+        }
+        return () => props.setTitle(undefined)
+    }, [item])
+
+    const updateFlow = () => {
+        return updateItem({
+            ...item,
+            flows: item.flows.map(ite => {
+                if (ite.id === params.flowId) {
+                    return {
+                        ...flow,
+                        consumers: Object.entries(flow.consumers).filter(f => f[1]).map(f => f[0])
+                    }
+                } else {
+                    return ite
+                }
+            })
+        })
+            .then(() => historyPush(history, location, `/apis/${params.apiId}/flows`));
+    }
+
+    if (isLoading || !item)
+        return <SimpleLoader />
+
+    return <div style={{
+        maxWidth: MAX_WIDTH,
+        margin: 'auto'
+    }}>
+        <NgForm
+            schema={FLOW_FORM_SETTINGS.schema(item)}
+            flow={FLOW_FORM_SETTINGS.flow}
+            value={flow}
+            onChange={setFlow}
+        />
+        <Button
+            type="success"
+            className="btn-sm ms-auto d-flex align-items-center"
+            onClick={updateFlow}
+        >
+            Update <VersionBadge size="xs" className="ms-2" />
+        </Button>
+    </div>
+}
 
+const FLOW_FORM_SETTINGS = {
+    schema: item => ({
+        name: {
+            type: 'string',
+            props: { label: 'Name' },
+        },
+        consumers: {
+            type: 'form',
+            label: 'Enabled consumers',
+            schema: item.consumers.reduce((acc, item) => ({
+                ...acc,
+                [item.id]: {
+                    type: 'box-bool',
+                    label: item.name,
+                    props: {
+                        description: item.description || item.consumer_kind
+                    }
+                }
+            }), {}),
+        }
+    }),
+    flow: [
+        {
+            type: 'group',
+            name: 'Informations',
+            collapsable: false,
+            fields: ["name"]
+        },
+        'consumers'
+    ]
 }
 
 function NewFlow(props) {
@@ -1665,42 +1765,33 @@ function NewFlow(props) {
     const [flow, setFlow] = useState({
         id: v4(),
         name: 'New flow name',
-        plugins: []
+        plugins: [],
+        consumers: []
     })
 
     const { item, updateItem, isLoading } = useDraftOfAPI()
 
     const createFlow = () => {
         return updateItem({
             ...item,
-            flows: [...item.flows, flow]
+            flows: [...item.flows, {
+                ...flow,
+                consumers: Object.entries(flow.consumers).filter(f => f[1]).map(f => f[0])
+            }]
         })
             .then(() => historyPush(history, location, `/apis/${params.apiId}/flows/${flow.id}`));
     }
 
-    if (isLoading)
+    if (isLoading || !item)
         return <SimpleLoader />
 
-    return <>
-        <Form
-            schema={{
-                name: {
-                    type: 'string',
-                    props: { label: 'Name' },
-                },
-                consumers: {
-                    type: 'select',
-                    props: {
-                        label: 'Consumers',
-                    },
-                    options: item.consumers,
-                    optionsTransformer: {
-                        label: 'name',
-                        value: 'id'
-                    }
-                }
-            }}
-            flow={["name", "consumers"]}
+    return <div style={{
+        maxWidth: MAX_WIDTH,
+        margin: 'auto'
+    }}>
+        <NgForm
+            schema={FLOW_FORM_SETTINGS.schema(item)}
+            flow={FLOW_FORM_SETTINGS.flow}
             value={flow}
             onChange={setFlow}
         />
@@ -1711,7 +1802,7 @@ function NewFlow(props) {
         >
             Create <VersionBadge size="xs" className="ms-2" />
         </Button>
-    </>
+    </div>
 }
 
 function NewAPI(props) {