Merge pull request #2036 from MAIF/testsForUX

Routes Wizard enhancement
MAIF · Dec 6, 2024 · e2c2ee8 · e2c2ee8
2 parents 8a8d2e1 + 9832d59
commit e2c2ee8
Show file tree

Hide file tree

Showing 12 changed files with 368 additions and 251 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/components/nginputs/components.js b/otoroshi/javascript/src/components/nginputs/components.js
@@ -256,7 +256,8 @@ export class NgFormRenderer extends Component {
             onClick={() => {
               if (clickable) this.setBreadcrumb();
             }}
-          >
+              className={showChildren ? '' : 'component_collapsable' }
+            >
             <div
               style={{
                 display: 'flex',

diff --git a/otoroshi/javascript/src/pages/FeaturesPage.js b/otoroshi/javascript/src/pages/FeaturesPage.js
@@ -389,53 +389,24 @@ const Feature = ({ title, description, img, link, icon }) => {
   return (
     <AutoLink
       to={link}
-      className="d-flex"
-      style={{
-        backgroundColor: 'var(--bg-color_level2)',
-        margin: '5px 0px',
-        height: '100%',
-        borderRadius: '12px',
-        maxWidth: 300,
-        minWidth: 300,
-        maxHeight: 300,
-        minHeight: 300,
-        padding: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-      }}
+      className="cards"
     >
       <div
+      className="cards-header"
         style={{
-          flex: 1,
-          background: `url(${img})`,
-          backgroundSize: 'contain',
-          backgroundPosition: 'center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: 150,
-          margin: 12,
+          background: `url(${img})`
         }}
       ></div>
       <div
-        className="d-flex flex-column"
-        style={{ flex: 1, backgroundColor: 'var(--bg-color_level3)', padding: '12px' }}
+        className="cards-body"
       >
         <div
-          style={{
-            fontWeight: 'bold',
-            marginLeft: '5px',
-            marginTop: '7px',
-            marginBottom: '10px',
-            fontSize: 20,
-            color: 'var(--color_level3)',
-            textTransform: 'capitalize',
-          }}
+          className="cards-title"
         >
           {zeIcon} {title}
         </div>
         <div
-          className="me-1"
-          style={{ marginLeft: '5px', marginBottom: '10px', color: 'var(--color_level3)' }}
+          className="cards-description"
         >
           <p>{description}</p>
         </div>

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/Designer.js b/otoroshi/javascript/src/pages/RouteDesigner/Designer.js
@@ -262,8 +262,8 @@ const Modal = ({ question, onOk, onCancel }) => (
         Cancel
       </button>
       <button type="button" className="btn btn-sm btn-success" onClick={onOk}>
-        <i className="fas fa-check me-1" />
-        Delete
+        <i className=" me-1" />
+        Remove
       </button>
     </div>
   </div>
@@ -927,7 +927,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({

diff --git a/otoroshi/javascript/src/pages/RouteDesigner/Informations.js b/otoroshi/javascript/src/pages/RouteDesigner/Informations.js
@@ -38,18 +38,19 @@ export const Informations = forwardRef(
       );
     }, [value]);
 
-    if (!value) return null;
+    function saveRoute(customValue) {
+
+      const finalValue = customValue || value;
 
-    function saveRoute() {
       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);
           });
@@ -69,9 +70,35 @@ export const Informations = forwardRef(
         // constraints: [constraints.required()],
       },
       enabled: {
-        type: 'bool',
-        label: 'Enabled',
-        props: {},
+        renderer: props => {
+          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: {
         type: 'bool',