From 8910e91330ce6e9f7e7473e06697c4ab5067045c Mon Sep 17 00:00:00 2001
From: Etienne ANNE <etienne.anne@icloud.com>
Date: Mon, 14 Oct 2024 14:50:24 +0200
Subject: [PATCH] fix draft daemon

---
 .../src/components/Drafts/DraftEditor.js      |  57 ++++++++-
 .../components/Drafts/DraftEditorSignal.js    |   6 +
 .../src/components/DynamicTitleSignal.js      |  14 +++
 .../javascript/src/components/inputs/Table.js |  10 +-
 .../src/pages/RouteDesigner/index.js          | 110 ++++++++----------
 .../src/pages/ServiceApiKeysPage.js           |   2 -
 .../src/style/layout/_pagecontent.scss        |   3 +
 7 files changed, 133 insertions(+), 69 deletions(-)

diff --git a/otoroshi/javascript/src/components/Drafts/DraftEditor.js b/otoroshi/javascript/src/components/Drafts/DraftEditor.js
index 94ff7becc..f06360a81 100644
--- a/otoroshi/javascript/src/components/Drafts/DraftEditor.js
+++ b/otoroshi/javascript/src/components/Drafts/DraftEditor.js
@@ -6,10 +6,13 @@ import {
     QueryClientProvider,
 } from 'react-query'
 import { nextClient } from '../../services/BackOfficeServices'
-import { draftSignal, draftVersionSignal, entityContentSignal, resetDraftSignal } from './DraftEditorSignal'
+import { draftSignal, draftVersionSignal, entityContentSignal, resetDraftSignal, updateEntityURLSignal } from './DraftEditorSignal'
 import { useSignalValue } from 'signals-react-safe'
 import { PillButton } from '../PillButton'
 import { withRouter } from 'react-router-dom'
+import JsonViewCompare from './Compare'
+import { dynamicTitleContent } from '../DynamicTitleSignal'
+import { Button } from '../Button'
 
 const queryClient = new QueryClient()
 
@@ -128,6 +131,9 @@ export const DraftStateDaemon = withRouter(class _ extends React.Component {
     componentDidMount() {
         resetDraftSignal(this.props)
 
+        if (this.props.updateEntityURL)
+            this.props.updateEntityURL()
+
         this.unsubscribe = draftVersionSignal.subscribe(() => {
             const { value, setValue } = this.props
 
@@ -163,6 +169,7 @@ export const DraftStateDaemon = withRouter(class _ extends React.Component {
             }
         }
         if (prevProps.history.location.pathname !== this.props.history.location.pathname) {
+            console.log('[DraftStateDaemon] : componentDidUpdate')
             resetDraftSignal(this.props)
         }
     }
@@ -175,4 +182,50 @@ export const DraftStateDaemon = withRouter(class _ extends React.Component {
     render() {
         return null
     }
-})
\ No newline at end of file
+})
+
+
+
+function PublisDraftModalContent() {
+    const draftContext = useSignalValue(draftSignal)
+    const entityContent = useSignalValue(entityContentSignal)
+
+    return <div className='mt-3 d-flex flex-column' style={{ flex: 1 }}>
+        <JsonViewCompare oldData={entityContent} newData={draftContext.draft} />
+    </div>
+}
+
+export function PublisDraftButton(props) {
+    const publish = useSignalValue(draftVersionSignal)
+
+    if (publish.version === 'published')
+        return null
+
+    return <Button text="Publish draft" className={`btn-sm ${props.className ? props.className : 'ms-auto'}`} type="primaryColor" style={{
+        borderColor: 'var(--color-primary)'
+    }} onClick={() => {
+        window.wizard(
+            'Publish this draft',
+            () => <PublisDraftModalContent />,
+            {
+                style: { width: '100%' },
+                noCancel: false,
+                okClassName: "ms-2",
+                okLabel: 'I want to publish this route'
+            }
+        )
+            .then((ok) => {
+                if (ok) {
+                    if (updateEntityURLSignal && typeof updateEntityURLSignal.value === 'function') {
+                        try {
+                            updateEntityURLSignal.value()
+                                .then(() => window.location.reload())
+                        } catch (err) {
+                            console.log(err)
+                            alert("Something bad happened.")
+                        }
+                    }
+                }
+            });
+    }} />
+}
diff --git a/otoroshi/javascript/src/components/Drafts/DraftEditorSignal.js b/otoroshi/javascript/src/components/Drafts/DraftEditorSignal.js
index da2bcbf35..af3047ce8 100644
--- a/otoroshi/javascript/src/components/Drafts/DraftEditorSignal.js
+++ b/otoroshi/javascript/src/components/Drafts/DraftEditorSignal.js
@@ -22,13 +22,19 @@ export const draftSignal = signal(DRAFT_SIGNAL_TEMPLATE)
 
 export const entityContentSignal = signal(undefined)
 
+export const updateEntityURLSignal = signal(undefined)
+
 export const resetDraftSignal = (props = {}) => {
+
+  console.log('reset draft signal')
+
   draftSignal.value = {
     ...DRAFT_SIGNAL_TEMPLATE,
     processCallback: props.processCallback
   }
   draftVersionSignal.value = DRAFT_VERSION_SIGNAL_TEMPLATE
   entityContentSignal.value = undefined
+  updateEntityURLSignal.value = undefined
 }
 
 const saveDraft = debounce(() => {
diff --git a/otoroshi/javascript/src/components/DynamicTitleSignal.js b/otoroshi/javascript/src/components/DynamicTitleSignal.js
index 911b80751..7c9a6d555 100644
--- a/otoroshi/javascript/src/components/DynamicTitleSignal.js
+++ b/otoroshi/javascript/src/components/DynamicTitleSignal.js
@@ -1,12 +1,19 @@
 import React from 'react';
 import Thumbtack from './Thumbtack';
 import { signal, useSignalValue } from 'signals-react-safe';
+import { draftVersionSignal } from './Drafts/DraftEditorSignal';
+import { PublisDraftButton } from './Drafts/DraftEditor';
 
 export const dynamicTitleContent = signal();
 
+const EXCLUDED_DRAFT_PAGES = [
+  '/routes'
+]
+
 export function DynamicTitleSignal(props) {
 
   const content = useSignalValue(dynamicTitleContent)
+  const draftVersion = useSignalValue(draftVersionSignal);
 
   if (!content) {
     return null;
@@ -16,6 +23,10 @@ export function DynamicTitleSignal(props) {
     return (
       <div style={{ position: 'relative' }}>
         {content}
+
+        {draftVersion.version === 'draft' &&
+          !EXCLUDED_DRAFT_PAGES.find(path => window.location.pathname.includes(path)) &&
+          <PublisDraftButton />}
       </div>
     );
   }
@@ -26,6 +37,9 @@ export function DynamicTitleSignal(props) {
         <h3 className="page-header_title">
           {content}
           <Thumbtack {...props} getTitle={() => content} />
+          {draftVersion.version === 'draft' &&
+            !EXCLUDED_DRAFT_PAGES.find(path => window.location.pathname.includes(path)) &&
+            <PublisDraftButton />}
         </h3>
       </div>
     </div>
diff --git a/otoroshi/javascript/src/components/inputs/Table.js b/otoroshi/javascript/src/components/inputs/Table.js
index 5b28bab08..9b4549ad4 100644
--- a/otoroshi/javascript/src/components/inputs/Table.js
+++ b/otoroshi/javascript/src/components/inputs/Table.js
@@ -10,6 +10,7 @@ import _ from 'lodash';
 import { Button } from '../Button';
 import { firstLetterUppercase } from '../../util'
 import { DraftEditorContainer, DraftStateDaemon } from '../Drafts/DraftEditor';
+import { updateEntityURLSignal } from '../Drafts/DraftEditorSignal';
 
 function urlTo(url) {
   window.history.replaceState({}, '', url);
@@ -233,6 +234,7 @@ export class Table extends Component {
     if (this.props.injectTable) {
       this.props.injectTable(this);
     }
+
     this.readRoute();
   }
 
@@ -734,8 +736,6 @@ export class Table extends Component {
       });
     }
 
-    console.log(this.state.currentItem)
-
     return (
       <div>
         {this.state.currentItem && <>
@@ -746,7 +746,11 @@ export class Table extends Component {
 
           <DraftStateDaemon
             value={this.state.currentItem}
-            setValue={currentItem => this.setState({ currentItem })} />
+            setValue={currentItem => this.setState({ currentItem })}
+            updateEntityURL={() => {
+              updateEntityURLSignal.value = this.updateItemAndStay
+            }}
+          />
         </>}
 
         {!this.state.showEditForm && !this.state.showAddForm && (
diff --git a/otoroshi/javascript/src/pages/RouteDesigner/index.js b/otoroshi/javascript/src/pages/RouteDesigner/index.js
index 872749518..ef8037163 100644
--- a/otoroshi/javascript/src/pages/RouteDesigner/index.js
+++ b/otoroshi/javascript/src/pages/RouteDesigner/index.js
@@ -20,10 +20,10 @@ import { FeedbackButton } from './FeedbackButton';
 import Loader from '../../components/Loader';
 import _ from 'lodash';
 import { Button } from '../../components/Button';
-import { DraftEditorContainer } from '../../components/Drafts/DraftEditor';
+import { DraftEditorContainer, PublisDraftButton } from '../../components/Drafts/DraftEditor';
 import { dynamicTitleContent } from '../../components/DynamicTitleSignal';
-import { draftSignal, draftVersionSignal, entityContentSignal } from '../../components/Drafts/DraftEditorSignal';
-import { useSignalValue } from 'signals-react-safe';
+// import { draftSignal, draftVersionSignal, entityContentSignal } from '../../components/Drafts/DraftEditorSignal';
+// import { useSignalValue } from 'signals-react-safe';
 import PageTitle from '../../components/PageTitle';
 import { Dropdown } from '../../components/Dropdown';
 import { YAMLExportButton } from '../../components/exporters/YAMLButton';
@@ -207,64 +207,50 @@ function MoreActionsButton({ value, menu, history }) {
   );
 }
 
-function PublisDraftModalContent() {
-  const draftContext = useSignalValue(draftSignal)
-  const entityContent = useSignalValue(entityContentSignal)
-
-  return <div className='mt-3 d-flex flex-column' style={{ flex: 1 }}>
-    <JsonViewCompare oldData={entityContent} newData={draftContext.draft} />
-  </div>
-}
-
-function PublisDraftButton() {
-  const publish = useSignalValue(draftVersionSignal)
-  const context = useSignalValue(draftSignal)
-
-  if (publish.version === 'published')
-    return null
-
-  return <Button text="Publish draft" className='btn-sm ms-2 mb-1' type="primaryColor" style={{
-    borderColor: 'var(--color-primary)'
-  }} onClick={() => {
-    window.wizard(
-      'Publish this draft',
-      () => <PublisDraftModalContent />,
-      {
-        style: { width: '100%' },
-        noCancel: false,
-        okClassName: "ms-2",
-        okLabel: 'I want to publish this route'
-      }
-    )
-      .then((ok) => {
-        if (ok) {
-          const what = window.location.pathname.split('/')[3];
-          const kind = what === 'routes' ? nextClient.ENTITIES.ROUTES : nextClient.ENTITIES.SERVICES;
-
-          nextClient
-            .forEntityNext(kind)
-            .update(context.draft)
-            .then(() => {
-              window.location.reload()
-            });
-        }
-      });
-    // window.newConfirm(<PublisDraftModalContent />, {
-    //   title: `Publish this draft`,
-    //   yesText: 'I want to publish this route',
-    //   className: 'modal-dialog--lg'
-    // }).then((ok) => {
-    //   if (ok) {
-    //     nextClient
-    //       .forEntityNext(kind)
-    //       .update(context.draft)
-    //       .then(() => {
-    //         window.location.reload()
-    //       });
-    //   }
-    // });
-  }} />
-}
+// function PublisDraftModalContent() {
+//   const draftContext = useSignalValue(draftSignal)
+//   const entityContent = useSignalValue(entityContentSignal)
+
+//   return <div className='mt-3 d-flex flex-column' style={{ flex: 1 }}>
+//     <JsonViewCompare oldData={entityContent} newData={draftContext.draft} />
+//   </div>
+// }
+
+// function PublisDraftButton() {
+//   const publish = useSignalValue(draftVersionSignal)
+//   const context = useSignalValue(draftSignal)
+
+//   if (publish.version === 'published')
+//     return null
+
+//   return <Button text="Publish draft" className='btn-sm ms-2 mb-1' type="primaryColor" style={{
+//     borderColor: 'var(--color-primary)'
+//   }} onClick={() => {
+//     window.wizard(
+//       'Publish this draft',
+//       () => <PublisDraftModalContent />,
+//       {
+//         style: { width: '100%' },
+//         noCancel: false,
+//         okClassName: "ms-2",
+//         okLabel: 'I want to publish this route'
+//       }
+//     )
+//       .then((ok) => {
+//         if (ok) {
+//           const what = window.location.pathname.split('/')[3];
+//           const kind = what === 'routes' ? nextClient.ENTITIES.ROUTES : nextClient.ENTITIES.SERVICES;
+
+//           nextClient
+//             .forEntityNext(kind)
+//             .update(context.draft)
+//             .then(() => {
+//               window.location.reload()
+//             });
+//         }
+//       });
+//   }} />
+// }
 
 function ManagerTitle({
   query,
@@ -353,7 +339,7 @@ function ManagerTitle({
             })}
       </Dropdown>
       {saveButton}
-      <PublisDraftButton />
+      <PublisDraftButton className="ms-2 mb-1" />
     </PageTitle>
   );
 }
diff --git a/otoroshi/javascript/src/pages/ServiceApiKeysPage.js b/otoroshi/javascript/src/pages/ServiceApiKeysPage.js
index 8b3ad6581..19e7c553e 100644
--- a/otoroshi/javascript/src/pages/ServiceApiKeysPage.js
+++ b/otoroshi/javascript/src/pages/ServiceApiKeysPage.js
@@ -1201,8 +1201,6 @@ export class ApiKeysPage extends Component {
   render() {
     const { fields } = this.state;
 
-    console.log("ApiKeysPage")
-
     const lowercaseFields = Object.entries(fields)
       .map(([key, value]) => [key.toLowerCase(), value])
 
diff --git a/otoroshi/javascript/src/style/layout/_pagecontent.scss b/otoroshi/javascript/src/style/layout/_pagecontent.scss
index 95064018b..31f0c1970 100644
--- a/otoroshi/javascript/src/style/layout/_pagecontent.scss
+++ b/otoroshi/javascript/src/style/layout/_pagecontent.scss
@@ -60,6 +60,9 @@
   padding-bottom: 9px;
   border-bottom: 1px solid var(--color-primary);
   color: var(--color-primary);
+
+  display: flex;
+  align-items: center;
 }
 
 .sub-container {