Add More option entry in navbar

MAIF · Sep 13, 2024 · ef1ed18 · ef1ed18
1 parent 10a8c28
commit ef1ed18
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 33 deletions.
diff --git a/daikoku/javascript/src/components/utils/sidebar/SideBar.tsx b/daikoku/javascript/src/components/utils/sidebar/SideBar.tsx
@@ -6,6 +6,7 @@ import MessageSquare from 'react-feather/dist/icons/message-square';
 import Plus from 'react-feather/dist/icons/plus';
 import Search from 'react-feather/dist/icons/search';
 import Zap from 'react-feather/dist/icons/zap';
+import More from 'react-feather/dist/icons/more-vertical';
 import { Link, useLocation } from 'react-router-dom';
 import RectangleList from 'react-feather/dist/icons/list';
 import { I18nContext } from '../../../contexts/i18n-context';
@@ -14,6 +15,7 @@ import * as Services from '../../../services';
 import { MessagesContext } from '../../backoffice';
 import { Companion } from './companions';
 import { AddPanel, DarkModeActivator, GuestPanel, MessagePanel, SearchPanel, SettingsPanel } from './panels';
+import { MorePanel } from './panels/MorePanel';
 
 
 export const state = {
@@ -60,24 +62,24 @@ export const SideBar = () => {
     <div className="navbar-container d-flex flex-row">
       <div className="navbar d-flex flex-column p-2 align-items-center justify-content-between">
         <div className="navbar_top d-flex flex-column align-items-center">
-              <Link
-                to='/'
-                title={translate("Daikoku.home")}
-                aria-label={translate("Daikoku.home")}
-                className="mb-3 brand"
-              >
-                <img src={tenant.logo} alt={translate("tenant.logo")} />
-              </Link>
-              <div className="nav_item mb-3 cursor-pointer">
-                <Link
-                  to="/apis"
-                  title={translate("API.list")}
-                  aria-label={translate("API.list")}
-                  className="mb-3 brand"
-                >
-                  <RectangleList />
-                </Link>
-              </div>
+          <Link
+            to='/'
+            title={translate("Daikoku.home")}
+            aria-label={translate("Daikoku.home")}
+            className="mb-3 brand"
+          >
+            <img src={tenant.logo} alt={translate("tenant.logo")} />
+          </Link>
+          <div className="nav_item mb-3 cursor-pointer">
+            <Link
+              to="/apis"
+              title={translate("API.list")}
+              aria-label={translate("API.list")}
+              className="mb-3 brand"
+            >
+              <RectangleList />
+            </Link>
+          </div>
 
           {!connectedUser.isGuest && (
             <>
@@ -103,16 +105,15 @@ export const SideBar = () => {
             </>
           )}
           {!connectedUser.isGuest && (
-            <Link
-              to="/apis/fast"
-              className={classNames(
-                'nav-item mb-3 cursor-pointer'
-              )}
-              title={translate('fastMode.access')}
-            >
-              <Zap
-                className="notification-link notification-link-color" />
-            </Link>
+            <div className="nav_item mb-3 cursor-pointer">
+              <More
+                className="notification-link notification-link-color"
+                aria-label="create"
+                onClick={() => {
+                  setPanelState(state.opened);
+                  setPanelContent(<MorePanel />);
+                }} />
+            </div>
           )}
         </div>
 

diff --git a/daikoku/javascript/src/components/utils/sidebar/panels/MorePanel.tsx b/daikoku/javascript/src/components/utils/sidebar/panels/MorePanel.tsx
@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
+
+import { GlobalContext } from '../../../../contexts/globalContext';
+import { I18nContext } from '../../../../contexts/i18n-context';
+
+export const MorePanel = () => {
+  const { translate } = useContext(I18nContext);
+  const { connectedUser } = useContext(GlobalContext);
+
+  return (
+    <div className="ms-3 mt-2 col-8 d-flex flex-column panel">
+      <div>
+        <h3>{translate('more.nav.options')}</h3>
+      </div>
+      <div className="blocks">
+        <div className="mb-3 block">
+          <div className="block__entries d-flex flex-column">
+            {!connectedUser.isGuest && (
+              <Link
+                to="/apis/fast"
+                className='block__entry__link d-flex align-items-center justify-content-between'
+                title={translate('fastMode.access')}
+              >
+                {translate('fastMode.access')}
+                <button className="btn btn-sm btn-outline-primary me-1">
+                  <i className="fas fa-location-arrow" />
+                </button>
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/daikoku/javascript/src/locales/en/translation.json b/daikoku/javascript/src/locales/en/translation.json
@@ -1474,5 +1474,6 @@
     "subscription.retrieve.login.required.message": "Please log in to continue. You need to be authenticated to access this feature.",
     "subscription.retrieve.token.unavalaible": "token unavailable",
     "Daikoku.home" : "Daikoku home",
-    "API.list" : "APIs list"
+    "API.list" : "APIs list",
+    "more.nav.options": "More options"
 }
diff --git a/daikoku/javascript/src/locales/fr/translation.json b/daikoku/javascript/src/locales/fr/translation.json
@@ -1474,5 +1474,6 @@
   "subscription.retrieve.login.required.message": "Veuillez vous connecter pour continuer. Vous devez être authentifié pour accéder à cette fonctionnalité.",
   "subscription.retrieve.token.unavalaible": "Le jeton n'est plus valable",
   "Daikoku.home" : "Accueil Daikoku",
-  "API.list" : "Liste des APIs"
+  "API.list" : "Liste des APIs",
+  "more.nav.options": "Plus d'options"
 }
diff --git a/daikoku/javascript/src/style/template/default.css b/daikoku/javascript/src/style/template/default.css
@@ -23,7 +23,7 @@
     --menu-text-color: #aaa;
     --menu-text-hover-bg-color: #444;
     --menu-text-hover-color: #fff;
-    --menu-link-color: #666; 
+    --menu-link-color: #666;
 
     --card_header-bg-color: #404040;
     --card_header-text-color: #fff;
@@ -110,7 +110,7 @@
     --form-select-hover-text-color: white;  
 
     --error-color:#dc3545;
-    --info-color: #17a2b8;
+    --info-color: #17a2b8;
     --success-color: #65B741;
     --warning-color: #ffc107;
     --danger-color: #dc3545;

diff --git a/daikoku/javascript/tests/resources/daikoku-test-export.ndjson b/daikoku/javascript/tests/resources/daikoku-test-export.ndjson
@@ -1,4 +1,4 @@
-{"type":"tenants","payload":{"_id":"default","name":"Evil Corp.","style":{"js":"","css":"","logo":"/assets/images/daikoku.svg","jsUrl":null,"title":"Evil Corp.","cssUrl":null,"footer":null,"cacheTTL":60000,"colorTheme":":root {\n  --error-color: #ff6347;\n --success-color: #65B741;\n\n  --link-color: #7f96af;\n  --link--hover-color: #8fa6bf;\n\n  --body-bg-color: #fff;\n  --body-text-color: #212529;\n  --navbar-bg-color: #7f96af;\n  --navbar-brand-color: #fff;\n  --menu-bg-color: #fff;\n  --menu-text-color: #212529;\n  --menu-text-hover-bg-color: #9bb0c5;\n  --menu-text-hover-color: #fff;\n  --section-bg-color: #f8f9fa;\n  --section-text-color: #6c757d;\n  --section-bottom-color: #eee;\n  --addContent-bg-color: #e9ecef;\n  --addContent-text-color: #000;\n  --sidebar-bg-color: #f8f9fa;\n\n  --btn-bg-color: #fff;\n  --btn-text-color: #495057;\n  --btn-border-color: #97b0c7;\n\n  --badge-tags-bg-color: #ffc107;\n  --badge-tags-bg-color: #ffe1a7;\n  --badge-tags-text-color: #212529;\n\n  --pagination-text-color: #586069;\n  --pagination-border-color: #586069;\n\n  --table-bg-color: #f8f9fa;\n\n  --apicard-visibility-color: #586069;\n  --apicard-visibility-border-color: rgba(27,31,35,.15);\n  --modal-selection-bg-color: rgba(27,31,35,.15);\n}","faviconUrl":null,"description":"A new organization to host very fine APIs","homeCmsPage":"63c67b5150010024104b0e8c","unloggedHome":"","fontFamilyUrl":null,"homePageVisible":false,"notFoundCmsPage":null,"cmsHistoryLength":10,"authenticatedCmsPage":null},"domain":"localhost","contact":"[email protected]","enabled":true,"_deleted":false,"adminApi":"admin-api-tenant-default","robotTxt":null,"isPrivate":false,"tenantMode":"Default","authProvider":"Local","bucketSettings":null,"defaultMessage":null,"mailerSettings":{"host":"localhost","port":"1025","type":"smtpClient","template":null,"fromEmail":"[email protected]","fromTitle":"daikoku"},"defaultLanguage":"En","_humanReadableId":"evil-corp.","auditTrailConfig":{"kafkaConfig":null,"alertsEmails":[],"auditWebhooks":[],"elasticConfigs":null},"creationSecurity":false,"otoroshiSettings":[{"_id":"default","url":"http://127.0.0.1:9000/fakeotoroshi","host":"otoroshi-api.foo.bar","clientId":"admin-api-apikey-id","clientSecret":"admin-api-apikey-id"}],"adminSubscriptions":[],"authProviderSettings":{"sessionMaxAge":86400},"subscriptionSecurity":true,"apiReferenceHideForGuest":true,"thirdPartyPaymentSettings":[],"aggregationApiKeysSecurity":false}}
+{"type":"tenants","payload":{"_id":"default","name":"Evil Corp.","style":{"js":"","css":"","logo":"/assets/images/daikoku.svg","jsUrl":null,"title":"Evil Corp.","cssUrl":null,"footer":null,"cacheTTL":60000,"colorTheme":":root {\n    --body_bg-color: #f1f3f6;\n    --body_text-color: #8a8a8a;\n    --body_link-color:#4c4c4d;\n    --body_link-hover-color:orange;\n    \n    --level2_bg-color: #e5e7ea;\n    --level2_text-color: #4c4c4d;\n    --level2_link-color: #605c5c;\n    --level2_link-hover-color: #000;  \n  \n    --level3_bg-color : #fff;\n    --level3_text-color : #222;\n    --level3_link-color: #4c4c4d;\n    --level3_link-hover-color : #000;\n    --level3_link-hover-bg-color :grey;\n\n    --sidebar-bg-color: #e5e7ea;\n    --sidebar-text-color: #4c4c4d;\n    --sidebar-text-hover-color:orange;\n  \n    --menu-bg-color: #fff;\n    --menu-text-color: #aaa;\n    --menu-text-hover-bg-color: #444;\n    --menu-text-hover-color: #fff;\n    --menu-link-color: #666;\n  \n    --card_header-bg-color: #404040;\n    --card_header-text-color: #fff;\n    --card_bg-color: #282828;\n    --card_text-color: #fff;\n    --card_link-color: #ffe1a7;\n    --card_link-hover-color : #ffc107;\n  \n    --btn-bg-color: #fff;\n    --btn-text-color: #495057;\n    --btn-border-color: #97b0c7;\n  \n    --badge-tags-bg-color: #ffc107;\n    --badge-tags-bg-hover-color: #ffe1a7;\n    --badge-tags-text-color: #212529;    \n  \n    --form-text-color: #000;\n    --form-border-color: #586069;\n    --form-bg-color: #fff;\n\n    --form-select-focused-color: lightgrey;\n    --form-select-focused-text-color: white;\n    --form-select-heading-color: yellow;\n    --form-select-hover-color: lightgrey;\n    --form-select-hover-text-color: white;\n\n    --error-color:#dc3545;\n    --info-color: #17a2b8;\n    --success-color: #65B741;\n    --warning-color: #ffc107;\n    --danger-color: #dc3545;  \n  }\n  \n  :root[data-theme=\"DARK\"] {  \n    --body_bg-color: #000;\n    --body_text-color: #b3b3b3;\n    --body_link-color:#b3b3b3;\n    --body_link-hover-color:orange;\n  \n    --level2_bg-color: #121212;\n    --level2_text-color: #b3b3b3;\n    --level2_link-color: #9f9e9e;\n    --level2_link-hover-color: #fff;\n  \n    --level3_bg-color : #242424;\n    --level3_text-color : #e8e8e8;\n    --level3_link-color: #9f9e9e;\n    --level3_link-hover-color : #fff;\n    --level3_link-hover-bg-color : grey;    \n  \n    --sidebar-bg-color: #121212;\n    --sidebar-text-color: #b3b3b3;\n    --sidebar-text-hover-color:orange;\n    \n    --menu-bg-color: #242424;\n    --menu-text-color: #fff;\n    --menu-text-hover-bg-color: #121212;\n    --menu-text-hover-color: #fff;\n    --menu-link-color: #b3b3b3;  \n  \n    --card_header-bg-color : #404040;\n    --card_header-text-color: #fff;\n    --card_bg-color: #282828;\n    --card_text-color: #fff;\n    --card_link-color: #ffe1a7;\n    --card_link-hover-color : #ffc107;\n    \n    --btn-bg-color: #fff;\n    --btn-text-color: #495057;\n    --btn-border-color: #97b0c7;\n  \n    --badge-tags-bg-color: #ffc107;\n    --badge-tags-bg-hover-color: #ffe1a7;\n    --badge-tags-text-color: #212529;\n  \n    --form-text-color: #000;\n    --form-border-color: #586069;\n    --form-bg-color: #fff;\n  \n    --form-select-focused-color: grey;\n    --form-select-focused-text-color: white;\n    --form-select-heading-color: yellow;\n    --form-select-hover-color: grey;\n    --form-select-hover-text-color: white;  \n\n    --error-color:#dc3545;\n    --info-color: #17a2b8;\n    --success-color: #65B741;\n    --warning-color: #ffc107;\n    --danger-color: #dc3545;\n  }","faviconUrl":null,"description":"A new organization to host very fine APIs","homeCmsPage":"63c67b5150010024104b0e8c","unloggedHome":"","fontFamilyUrl":null,"homePageVisible":false,"notFoundCmsPage":null,"cmsHistoryLength":10,"authenticatedCmsPage":null},"domain":"localhost","contact":"[email protected]","enabled":true,"_deleted":false,"adminApi":"admin-api-tenant-default","robotTxt":null,"isPrivate":false,"tenantMode":"Default","authProvider":"Local","bucketSettings":null,"defaultMessage":null,"mailerSettings":{"host":"localhost","port":"1025","type":"smtpClient","template":null,"fromEmail":"[email protected]","fromTitle":"daikoku"},"defaultLanguage":"En","_humanReadableId":"evil-corp.","auditTrailConfig":{"kafkaConfig":null,"alertsEmails":[],"auditWebhooks":[],"elasticConfigs":null},"creationSecurity":false,"otoroshiSettings":[{"_id":"default","url":"http://127.0.0.1:9000/fakeotoroshi","host":"otoroshi-api.foo.bar","clientId":"admin-api-apikey-id","clientSecret":"admin-api-apikey-id"}],"adminSubscriptions":[],"authProviderSettings":{"sessionMaxAge":86400},"subscriptionSecurity":true,"apiReferenceHideForGuest":true,"thirdPartyPaymentSettings":[],"aggregationApiKeysSecurity":false}}
 {"type":"users","payload":{"_id":"7cxa2bvog4k8e8d3uswmwnf90w9x8nea","name":"User","email":"[email protected]","isGuest":false,"origins":["Local"],"picture":"/assets/images/anonymous.jpg","tenants":["default"],"_deleted":false,"metadata":{},"password":"$2a$10$/Vpj1lFN0AcCfbutd7FJwO0j1vU4X0fR6t.4vvWBqSEqtoUFFxfDG","invitation":null,"lastTenant":null,"starredApis":[],"personalToken":"m775o13fduvnmpygimyyd6jpgh6ephl7","isDaikokuAdmin":false,"defaultLanguage":null,"_humanReadableId":"user-foo.bar","pictureFromProvider":true,"twoFactorAuthentication":null,"hardwareKeyRegistrations":[]}}
 {"type":"users","payload":{"_id":"mom9ff7opam5nv576rpo98n9sqpxag5l","name":"Tester","email":"[email protected]","isGuest":false,"origins":["Local"],"picture":"https://www.gravatar.com/avatar/7075180bc9c01c6ece2925b9822b6d77?size=128&d=robohash","tenants":["default"],"_deleted":false,"metadata":{},"password":"$2a$10$/Vpj1lFN0AcCfbutd7FJwO0j1vU4X0fR6t.4vvWBqSEqtoUFFxfDG","invitation":null,"lastTenant":null,"starredApis":[],"personalToken":"z05xtwwlgf1vlj4q1xkr6j0kbdjrz8q0","isDaikokuAdmin":false,"defaultLanguage":null,"_humanReadableId":"tester-foo.bar","pictureFromProvider":true,"twoFactorAuthentication":null,"hardwareKeyRegistrations":[]}}
 {"type":"users","payload":{"_id":"SR9OKNdEcz1CZwe8WEMB6QYvFQPGfDTs6RXHDGYMCIva0SjEA11EOpmbMzYvBrQL","name":"Admin","email":"[email protected]","isGuest":false,"origins":["Local"],"picture":"https://www.gravatar.com/avatar/87d47b53c88259042a50fa24a6d6b0f4?size=128&d=robohash","tenants":["default"],"_deleted":false,"metadata":{},"password":"$2a$10$/Vpj1lFN0AcCfbutd7FJwO0j1vU4X0fR6t.4vvWBqSEqtoUFFxfDG","invitation":null,"lastTenant":null,"starredApis":[],"personalToken":"bvBvXclSTmCmdAmEN2W03zTDwga7nKtZ","isDaikokuAdmin":true,"defaultLanguage":null,"_humanReadableId":"admin-foo.bar","pictureFromProvider":true,"twoFactorAuthentication":null,"hardwareKeyRegistrations":[]}}