add description and styles on route wizard

MAIF · Dec 6, 2024 · 9832d59 · 9832d59
1 parent b0c2d9d
commit 9832d59
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 62 deletions.
diff --git a/otoroshi/javascript/src/components/inputs/Table.js b/otoroshi/javascript/src/components/inputs/Table.js
@@ -873,7 +873,6 @@ export class Table extends Component {
                     : []
                 }
                 onFetchData={(state, instance) => {
-                  // console.log('onFetchData')
                   this.update(state);
                 }}
                 onFilteredChange={(column, value) => {

diff --git a/otoroshi/javascript/src/pages/JwtVerifiersPage.js b/otoroshi/javascript/src/pages/JwtVerifiersPage.js
@@ -45,7 +45,7 @@ export class JwtVerifiersPage extends Component {
         <PageTitle title={title} {...this.props}>
           {isEditPage && (
             <Dropdown>
-              <YAMLExportButton value={verifier} entityKind="JwtVerifier" />
+              <YAMLExportButton value={verifier} entityKind="security.otoroshi.io/JwtVerifier" />
               <JsonExportButton value={verifier} entityKind="security.otoroshi.io/JwtVerifier" />
               <SquareButton
                 level="danger"

diff --git a/otoroshi/javascript/src/pages/RouteDesigner/Informations.js b/otoroshi/javascript/src/pages/RouteDesigner/Informations.js
@@ -71,29 +71,33 @@ export const Informations = forwardRef(
       },
       enabled: {
         renderer: props => {
-          return <div className='d-flex align-items-baseline'>
-            <p className='ms-2'>Exposition of the route</p>
-            <span className={`mx-2 badge bg-${props.value ? 'success' : 'danger'}`}>
-              {props.value ? 'Exposed' : 'Disabled'}
-            </span>
-            {props.value ?
-              <Button type="danger" className="btn-sm" text="Disable this route"
-                onClick={() => {
-                  window
-                    .newConfirm('Are you sure you disable this route ? Traffic will be stop immediately.')
-                    .then((ok) => {
-                      if (ok) {
-                        saveRoute({ ...value, enabled: false })
-                          .then(() => window.location.reload())
-                      }
-                    })
-                }} /> :
-              <Button type="success" className="btn-sm" text="Publish this route"
-                onClick={() => {
-                  saveRoute({ ...value, enabled: true })
-                    .then(() => window.location.reload())
-                }} />}
-          </div>
+          return <>
+            <div className='d-flex align-items-baseline'>
+              <p className='ms-2'>Exposition of the route</p>
+              <div className='d-flex flex-column gap-3 ms-3'>
+                <span className={`badge bg-${props.value ? 'success' : 'danger'}`} style={{ width: 'fit-content' }}>
+                  {props.value ? 'Exposed' : 'Disabled'}
+                </span>
+                {props.value ?
+                  <Button type="danger" className="btn-sm mb-3" text="Disable this route"
+                    onClick={() => {
+                      window
+                        .newConfirm('Are you sure you disable this route ? Traffic will be stop immediately.')
+                        .then((ok) => {
+                          if (ok) {
+                            saveRoute({ ...value, enabled: false })
+                              .then(() => window.location.reload())
+                          }
+                        })
+                    }} /> :
+                  <Button type="success" className="btn-sm mb-3" text="Publish this route"
+                    onClick={() => {
+                      saveRoute({ ...value, enabled: true })
+                        .then(() => window.location.reload())
+                    }} />}
+              </div>
+            </div>
+          </>
         }
       },
       capture: {

diff --git 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 }) => (
         <button
           type="button"
-          className={`btn py-3 wizard-route-chooser  ${
-            state.route.kind === kind ? "btn-primaryColor" : "btn-quiet"
-          }`}
+          className={`btn py-3 wizard-route-chooser  ${state.route.kind === kind ? "btn-primaryColor" : "btn-quiet"
+            }`}
           onClick={() => onChange(kind)}
           key={kind}
         >
@@ -162,7 +160,6 @@ const BackendStep = ({ state, onChange, onError, error }) => {
 };
 
 const ProcessStep = ({ state, history }) => {
-  const [loading, setLoading] = useState(true);
   const [createdRoute, setCreatedRoute] = useState({});
 
   const API_PLUGINS = [
@@ -204,10 +201,10 @@ const ProcessStep = ({ state, history }) => {
     ]).then(([plugins, oldPlugins, metadataPlugins, template]) => {
       const url = ["mock", "graphql"].includes(state.route.kind)
         ? {
-            pahtname: "/",
-            hostname: "",
-            protocol: "https://",
-          }
+          pahtname: "/",
+          hostname: "",
+          protocol: "https://",
+        }
         : new URL(state.route.url);
       const secured = url.protocol.includes("https");
 
@@ -261,14 +258,11 @@ const ProcessStep = ({ state, history }) => {
           },
         })
         .then((r) => {
-          setLoading(false);
           setCreatedRoute(r);
         });
     });
   }, []);
 
-  const pluginsLength = PLUGINS[state.route.kind].length;
-
   const timers = [...PLUGINS[state.route.kind], {}, {}].reduce((acc, _, i) => {
     if (i === 0) return [100 + Math.floor(Math.random() * 250)];
     return [...acc, acc[i - 1] + 100 + Math.floor(Math.random() * 250)];
@@ -300,22 +294,22 @@ const ProcessStep = ({ state, history }) => {
       </div>
 
       <LoaderItem timeout={timers[timers.length - 1]}>
-        <div className="d-flex">
+        <div className="d-flex justify-content-center">
           <div className="cards mx-3">
             <div className="cards-header d-flex align-items-center justify-content-center">
               <h4 className="mt-3" style={{ color: "var(--text)" }}>
                 {state.route.kind === "mock"
                   ? "Creating mocks"
                   : state.route.kind === "graphql"
-                  ? "Creating schema"
-                  : "Editing plugins"}
+                    ? "Creating schema"
+                    : "Editing plugins"}
               </h4>
             </div>
             <div className="cards-body">
-              <div className="cards-title">lorem50</div>
-              <div className="cards-description">
-                <p>ma petite description</p>
-                <div className="d-flex justify-content-end">
+              <div className="cards-title">Draft way</div>
+              <div className="cards-description d-flex flex-column" style={{ flex: 1 }}>
+                <p>Continue to edit your route before publishing it</p>
+                <div className="d-flex justify-content-end mt-auto">
                   <button
                     className="btn btn-primaryColor"
                     onClick={() => {
@@ -332,8 +326,8 @@ const ProcessStep = ({ state, history }) => {
                     {state.route.kind === "mock"
                       ? "Start creating mocks"
                       : state.route.kind === "graphql"
-                      ? "Start creating schema"
-                      : "Start editing plugins"}
+                        ? "Start creating schema"
+                        : "Start editing plugins"}
                   </button>
                 </div>
               </div>
@@ -342,22 +336,25 @@ const ProcessStep = ({ state, history }) => {
           <div className="cards mx-3 cursor-pointer">
             <div className="cards-header d-flex align-items-center justify-content-center">
               <h4 className="mt-3" style={{ color: "var(--text)" }}>
-                Publish your route
+                Road to production
               </h4>
             </div>
             <div className="cards-body">
               <div className="cards-title">
-               lorem50
+                Publish way
               </div>
-              <div className="cards-description">
-                <p>ma petite description</p>
-                <div className="d-flex justify-content-end">
+              <div className="cards-description d-flex flex-column" style={{ flex: 1 }}>
+                <p>Expose the generate route to the world</p>
+                <div className="d-flex justify-content-end mt-auto">
                   <button
                     className="ms-2 btn btn-primaryColor"
                     onClick={() => {
-                      history.push(
-                        `/routes/${createdRoute.id}?tab=informations`
-                      );
+                      nextClient.forEntityNext(nextClient.ENTITIES.ROUTES).update({
+                        ...createdRoute,
+                        enabled: true
+                      }).then(() => {
+                        history.push(`/routes/${createdRoute.id}?tab=informations`);
+                      })
                     }}
                   >
                     Publish
@@ -527,11 +524,10 @@ export class RouteWizard extends React.Component {
 
               {step <= 4 && (
                 <div
-                  className={`mt-auto d-flex align-items-center ${
-                    step !== 1
-                      ? "justify-content-between"
-                      : "justify-content-end"
-                  }`}
+                  className={`mt-auto d-flex align-items-center ${step !== 1
+                    ? "justify-content-between"
+                    : "justify-content-end"
+                    }`}
                 >
                   {step !== 1 && (
                     <Button

diff --git a/otoroshi/javascript/src/pages/RouteDesigner/index.js b/otoroshi/javascript/src/pages/RouteDesigner/index.js
@@ -130,8 +130,8 @@ function MoreActionsButton({ value, menu, history }) {
   return (
     <div className="mb-1 d-flex" style={{ gap: '.5rem' }}>
       <DuplicateButton value={value} history={history} />
-      <YAMLExportButton value={value} entityKind="JwtVerifier" />
-      <JsonExportButton value={value} entityKind="JwtVerifier" />
+      <YAMLExportButton value={value} entityKind="proxy.otoroshi.io/Route" />
+      <JsonExportButton value={value} entityKind="proxy.otoroshi.io/Route" />
       {menu}
     </div>
   );

diff --git 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;