From f7f1ef5f8046e427259f37fd16801f485d3ef2cc Mon Sep 17 00:00:00 2001 From: baudelotphilippe Date: Fri, 15 Nov 2024 14:30:19 +0100 Subject: [PATCH 01/11] fix typo --- otoroshi/javascript/src/pages/RouteDesigner/Designer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/otoroshi/javascript/src/pages/RouteDesigner/Designer.js b/otoroshi/javascript/src/pages/RouteDesigner/Designer.js index a9e8bba2b..99d49632c 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/Designer.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/Designer.js @@ -256,8 +256,8 @@ const Modal = ({ question, onOk, onCancel }) => ( Cancel @@ -925,7 +925,7 @@ class Designer extends React.Component { this.setState({ alertModal: { show: true, - question: `Delete this plugin ?`, + question: `Remove this plugin ?`, onCancel: (e) => { e.stopPropagation(); this.setState({ From 57d9f37c8f673461a36e27feaeb079f0df7f6b85 Mon Sep 17 00:00:00 2001 From: baudelotphilippe Date: Fri, 15 Nov 2024 14:30:49 +0100 Subject: [PATCH 02/11] improve UX --- otoroshi/javascript/src/components/nginputs/components.js | 3 ++- otoroshi/javascript/src/style/components/_components.scss | 4 ++++ otoroshi/javascript/src/style/main.scss | 2 ++ 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 otoroshi/javascript/src/style/components/_components.scss diff --git a/otoroshi/javascript/src/components/nginputs/components.js b/otoroshi/javascript/src/components/nginputs/components.js index bf8164b6c..297e3ad49 100644 --- a/otoroshi/javascript/src/components/nginputs/components.js +++ b/otoroshi/javascript/src/components/nginputs/components.js @@ -250,7 +250,8 @@ export class NgFormRenderer extends Component { onClick={() => { if (clickable) this.setBreadcrumb(); }} - > + className={showChildren ? '' : 'component_collapsable' } + >
Date: Fri, 15 Nov 2024 14:32:15 +0100 Subject: [PATCH 03/11] add a steps-bar --- .../src/pages/RouteDesigner/RouteWizard.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js index d72d6d008..68d18ed2a 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js @@ -418,6 +418,24 @@ export class RouteWizard extends React.Component { }); }; + displaySteps = (step, steps) => { + return Array.from({ length: steps }, (_, i) => { + const index = i + 1; + return ( + + ); + }); + } + render() { const { steps, step, error } = this.state; @@ -431,8 +449,9 @@ export class RouteWizard extends React.Component { onClick={() => this.props.hide()} style={{ cursor: 'pointer' }} /> - {`Create a new route(Step ${step <= steps ? step : steps} of ${steps})`} + Create a new route +
{this.displaySteps(step, steps)}
{step === 1 && ( From a1e73d7552151ec3bfe5e0f38f4f37f33daa1891 Mon Sep 17 00:00:00 2001 From: baudelotphilippe Date: Tue, 19 Nov 2024 14:57:10 +0100 Subject: [PATCH 04/11] improve steps --- .../src/pages/RouteDesigner/Informations.js | 2 +- .../src/pages/RouteDesigner/RouteWizard.js | 342 ++++++++++-------- .../src/style/components/_designer.scss | 6 +- 3 files changed, 194 insertions(+), 156 deletions(-) diff --git a/otoroshi/javascript/src/pages/RouteDesigner/Informations.js b/otoroshi/javascript/src/pages/RouteDesigner/Informations.js index 4c949db29..27f0039b8 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/Informations.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/Informations.js @@ -294,7 +294,7 @@ export const Informations = forwardRef( const flow = [ { type: 'group', - name: 'Expose your route', + name: 'Publish your route', fields: ['enabled'], }, '_loc', diff --git a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js index 68d18ed2a..2cb18f32f 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js @@ -1,9 +1,13 @@ -import React, { useEffect, useState } from 'react'; -import { TextInput } from '../../components/inputs'; -import { getOldPlugins, getPlugins, nextClient } from '../../services/BackOfficeServices'; -import { Plugins } from '../../forms/ng_plugins'; -import Loader from '../../components/Loader'; -import { Button } from '../../components/Button'; +import React, { useEffect, useState } from "react"; +import { TextInput } from "../../components/inputs"; +import { + getOldPlugins, + getPlugins, + nextClient, +} from "../../services/BackOfficeServices"; +import { Plugins } from "../../forms/ng_plugins"; +import Loader from "../../components/Loader"; +import { Button } from "../../components/Button"; const RouteNameStep = ({ state, onChange }) => ( <> @@ -17,7 +21,7 @@ const RouteNameStep = ({ state, onChange }) => ( flex={true} className="my-3" style={{ - fontSize: '2em', + fontSize: "2em", }} label="Route name" value={state.route.name} @@ -32,44 +36,48 @@ const RouteChooser = ({ state, onChange }) => (

Select a route template

{[ - { kind: 'empty', title: 'BLANK ROUTE', text: 'From scratch, no plugin added' }, { - kind: 'api', - title: 'REST API', - text: 'Already setup secured rest api with api management', + kind: "empty", + title: "BLANK ROUTE", + text: "From scratch, no plugin added", }, { - kind: 'webapp', - title: 'WEBAPP', - text: 'Already setup web application with authentication', + kind: "api", + title: "REST API", + text: "Already setup secured rest api with api management", }, { - kind: 'graphql-proxy', - title: 'GRAPHQL API', - text: 'Already setup grapqhl api with api management and validation', + kind: "webapp", + title: "WEBAPP", + text: "Already setup web application with authentication", }, { - kind: 'mock', - title: 'QUICKSTART REST API', - text: 'Already setup rest api with extended mocking capabilities', + kind: "graphql-proxy", + title: "GRAPHQL API", + text: "Already setup grapqhl api with api management and validation", }, { - kind: 'graphql', - title: 'GRAPHQL COMPOSER API', - text: 'Create a graphql api from scratch from existing sources', + kind: "mock", + title: "QUICKSTART REST API", + text: "Already setup rest api with extended mocking capabilities", + }, + { + kind: "graphql", + title: "GRAPHQL COMPOSER API", + text: "Create a graphql api from scratch from existing sources", }, ].map(({ kind, title, text }) => ( @@ -293,33 +309,42 @@ const ProcessStep = ({ state, history }) => {

Your route is now available!

- - +
+ + +
@@ -338,22 +363,22 @@ const LoaderItem = ({ text, timeout }) => { return (
- - {step === steps && ( - - )} + } else { + this.nextStep(); + } + }} + > + {step === 4 ? "Create" : "Continue"} +
)}
diff --git a/otoroshi/javascript/src/style/components/_designer.scss b/otoroshi/javascript/src/style/components/_designer.scss index 23119769c..964e2ccc1 100644 --- a/otoroshi/javascript/src/style/components/_designer.scss +++ b/otoroshi/javascript/src/style/components/_designer.scss @@ -645,9 +645,9 @@ max-height: 80px !important; min-height: 80px; - color: var(--color_level2); - background-color: var(--bg-color_level2); - border-color: var(--bg-color_level1); + // color: var(--color_level2); + // background-color: var(--bg-color_level2); + // border-color: var(--bg-color_level1); } .wizard-route-chooser h3 { From b8ef58b14b1a525f98eb0fb92871ed9427cbfb66 Mon Sep 17 00:00:00 2001 From: baudelotphilippe Date: Tue, 19 Nov 2024 16:12:34 +0100 Subject: [PATCH 05/11] new anim --- .../src/pages/RouteDesigner/RouteWizard.js | 20 +++++-------------- .../src/style/components/_designer.scss | 14 ++++++++++++- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js index 2cb18f32f..7d3e487b1 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js @@ -367,23 +367,13 @@ const LoaderItem = ({ text, timeout }) => { alignItems: "center", justifyContent: "center", marginBottom: "6px", + animation: `routePlugin 1s ease-in-out forwards`, + animationDelay: `${timeout * 2}ms`, + opacity:0 }} + className="anim_route_plugin" > - - - +
Date: Thu, 21 Nov 2024 11:03:21 +0100 Subject: [PATCH 06/11] refacto expose route form and route wizard --- .../src/pages/RouteDesigner/Informations.js | 42 ++++-- .../src/pages/RouteDesigner/RouteWizard.js | 134 +++++++----------- 2 files changed, 85 insertions(+), 91 deletions(-) diff --git a/otoroshi/javascript/src/pages/RouteDesigner/Informations.js b/otoroshi/javascript/src/pages/RouteDesigner/Informations.js index 27f0039b8..febafb65c 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/Informations.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/Informations.js @@ -37,16 +37,19 @@ export const Informations = forwardRef( ); }, [value]); - function saveRoute() { + function saveRoute(customValue) { + + const finalValue = customValue || value; + if (isCreation || location.state?.routeFromService) { return nextClient .forEntityNext(nextClient.ENTITIES[fetchName]) - .create(value) - .then(() => history.push(`/${link}/${value.id}?tab=flow`)); + .create(finalValue) + .then(() => history.push(`/${link}/${finalValue.id}?tab=flow`)); } else { return nextClient .forEntityNext(nextClient.ENTITIES[fetchName]) - .update(value) + .update(finalValue) .then((res) => { if (!res.error) setValue(res); }); @@ -66,9 +69,32 @@ export const Informations = forwardRef( // constraints: [constraints.required()], }, enabled: { - type: 'bool', - label: 'Enabled', - props: {}, + renderer: props => { + console.log(props) + return
+

Exposition of the route

+ + {props.value ? 'Exposed' : 'Disabled'} + + {props.value ? +
+ } }, capture: { type: 'bool', @@ -294,7 +320,7 @@ export const Informations = forwardRef( const flow = [ { type: 'group', - name: 'Publish your route', + name: 'Expose your route', fields: ['enabled'], }, '_loc', diff --git a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js index 7d3e487b1..c2b2e6e0d 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js @@ -75,9 +75,8 @@ const RouteChooser = ({ state, onChange }) => ( ].map(({ kind, title, text }) => ( - )} -
-

Your route is now available!

-
- - -
+ +
- + ); }; -const LoaderItem = ({ text, timeout }) => { - const [loading, setLoading] = useState(true); - - useEffect(() => { - const timeout = setTimeout(() => setLoading(false), timeout); - - return () => timeout; - }, []); - +const LoaderItem = ({ text, timeout, children }) => { return (
{ marginBottom: "6px", animation: `routePlugin 1s ease-in-out forwards`, animationDelay: `${timeout * 2}ms`, - opacity:0 + opacity: 0 }} - className="anim_route_plugin" > -
{text}
+ {children}
); }; @@ -517,11 +486,10 @@ export class RouteWizard extends React.Component { {step <= 4 && (
{step !== 1 && ( - +
+
+

+ {state.route.kind === "mock" + ? "Creating mocks" + : state.route.kind === "graphql" + ? "Creating schema" + : "Editing plugins"} +

+
+
+
lorem50
+
+

ma petite description

+
+ +
+
+
+
+
+
+

+ Publish your route +

+
+
+
+ lorem50 +
+
+

ma petite description

+
+ +
+
+
+
@@ -339,13 +382,11 @@ const LoaderItem = ({ text, timeout, children }) => { marginBottom: "6px", animation: `routePlugin 1s ease-in-out forwards`, animationDelay: `${timeout * 2}ms`, - opacity: 0 + opacity: 0, }} >
@@ -486,10 +527,11 @@ export class RouteWizard extends React.Component { {step <= 4 && (
{step !== 1 && (
+ return <> +
+

Exposition of the route

+
+ + {props.value ? 'Exposed' : 'Disabled'} + + {props.value ? +
+
+ } }, capture: { diff --git a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js index c0e142eeb..38f4d33c8 100644 --- a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js +++ b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js @@ -6,7 +6,6 @@ import { nextClient, } from "../../services/BackOfficeServices"; import { Plugins } from "../../forms/ng_plugins"; -import Loader from "../../components/Loader"; import { Button } from "../../components/Button"; const RouteNameStep = ({ state, onChange }) => ( @@ -75,9 +74,8 @@ const RouteChooser = ({ state, onChange }) => ( ].map(({ kind, title, text }) => (
-
+

{state.route.kind === "mock" ? "Creating mocks" : state.route.kind === "graphql" - ? "Creating schema" - : "Editing plugins"} + ? "Creating schema" + : "Editing plugins"}

-
lorem50
-
-

ma petite description

-
+
Draft way
+
+

Continue to edit your route before publishing it

+
@@ -342,22 +336,25 @@ const ProcessStep = ({ state, history }) => {

- Publish your route + Road to production

- lorem50 + Publish way
-
-

ma petite description

-
+
+

Expose the generate route to the world

+
); diff --git a/otoroshi/javascript/src/style/components/_card.scss b/otoroshi/javascript/src/style/components/_card.scss index 9513c735b..8ba5eea52 100644 --- a/otoroshi/javascript/src/style/components/_card.scss +++ b/otoroshi/javascript/src/style/components/_card.scss @@ -1,7 +1,7 @@ .cards { background-color: var(--bg-color_level2); margin: 5px 0px; - height: 100%; + flex: 1; border-radius: 12px; max-width: 300px; min-width: 300px;