[frontend] Added auto collapse and submenu icon switches to settings #6341

Bonsai8863 · 2024-03-13T18:59:38Z

Proposed changes

Add setting to toggle hiding of left nav submenu icons
Add setting to toggle auto collapse left nav submenus

Related issues

https://filigran-community.slack.com/archives/C06CETVDJ5R/p1709241125254959

Checklist

I consider the submitted work as finished
I tested the code for its functionality
I wrote/updated test cases for the relevant uses case
I added/update the relevant documentation (either on github or on notion)
Where necessary I refactored code to improve the overall quality

…penCTI-Platform#6341)

codecov · 2024-03-14T12:19:32Z

Codecov Report

Attention: Patch coverage is 75.00000% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 67.65%. Comparing base (9c6ebf9) to head (3d85864).

❗ Current head 3d85864 differs from pull request most recent head 44264e9. Consider uploading reports for the commit 44264e9 to get more accurate results

Files	Patch %	Lines
...pencti-platform/opencti-graphql/src/domain/user.js	50.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6341      +/-   ##
==========================================
- Coverage   67.69%   67.65%   -0.05%     
==========================================
  Files         532      532              
  Lines       65004    64997       -7     
  Branches     5445     5433      -12     
==========================================
- Hits        44006    43975      -31     
- Misses      20998    21022      +24

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…penCTI-Platform#6341)

lndrtrbn · 2024-03-26T10:22:21Z

Hello, thank you for your contribution !

We love the idea of saving auto collapse and submenu icons as preferences. But there is an issue with the implementation because the Settings page is not a page accessible by all the users (admin page).

Below, the implementation we suggest to do so every user can set their preferences:

Move the toggle inputs in the Profile page instead of Settings (accessible from top right button > Profile),
Save the 2 preferences in database below "user profile" and fetch them through the "me" object while loading the app instead of using local storage as the user will lose the preferences if switching computer by using local storage,
Use the local storage to keep in browser memory the state of the left menu items so when refreshing the app the menu will keep the same state for each item (if it should be closed or opened).

…penCTI-Platform#6341)

Bonsai8863 · 2024-03-26T14:30:17Z

Hello, thank you for your contribution !

We love the idea of saving auto collapse and submenu icons as preferences. But there is an issue with the implementation because the Settings page is not a page accessible by all the users (admin page).

Below, the implementation we suggest to do so every user can set their preferences:

Move the toggle inputs in the Profile page instead of Settings (accessible from top right button > Profile),

Save the 2 preferences in database below "user profile" and fetch them through the "me" object while loading the app instead of using local storage as the user will lose the preferences if switching computer by using local storage,

Use the local storage to keep in browser memory the state of the left menu items so when refreshing the app the menu will keep the same state for each item (if it should be closed or opened).

@lndrtrbn Thanks for the feedback! All your points have been addressed in the latest push.

…penCTI-Platform#6341)

lndrtrbn

I have tested locally and it works fine 👍
I just make some small remarks that should be easily fixed.

I was also questioned myself about this behavior: if several person use the same computer and browser then the state of the left navigation saved in local storage will collide between those users and they will have inconsistencies when login. It could be fixed by using the id of the user in the key for local storage. But I don't know if it is a real issue that need to be tackled, I'll ask info in the team.

EDIT : this local storage collision won't be tackle here

lndrtrbn · 2024-03-28T08:26:45Z

opencti-platform/opencti-front/lang/front/fr.json

@@ -2673,5 +2673,7 @@
  "Strategic": "Stratégique",
  "Link created": "Lien créé",
  "Public dashboard": "Tableau de bord public",
+  "Show left navigation submenu icons": "Afficher les icônes du sous-menu de navigation de gauche",


Suggested change

"Show left navigation submenu icons": "Afficher les icônes du sous-menu de navigation de gauche",

"Show left navigation submenu icons": "Afficher les icônes des sous-menus de la navigation de gauche",

lndrtrbn · 2024-03-28T08:27:40Z

opencti-platform/opencti-front/lang/front/fr.json

@@ -2673,5 +2673,7 @@
  "Strategic": "Stratégique",
  "Link created": "Lien créé",
  "Public dashboard": "Tableau de bord public",
+  "Show left navigation submenu icons": "Afficher les icônes du sous-menu de navigation de gauche",
+  "Auto collapse submenus in left navigation": "Sous-menus à réduction automatique dans la navigation de gauche",


Suggested change

"Auto collapse submenus in left navigation": "Sous-menus à réduction automatique dans la navigation de gauche",

"Auto collapse submenus in left navigation": "Fermer automatiquement les sous-menus de la navigation de gauche",

lndrtrbn · 2024-03-28T08:29:31Z

opencti-platform/opencti-front/src/private/components/nav/LeftBar.jsx

@@ -220,25 +226,47 @@ const LeftBar = () => {
    data: useRef(null),
    settings: useRef(null),
  };
-  const [selectedMenu, setSelectedMenu] = useState(null);
+  // console.log(localStorage.getItem('selectedMenu'));


Leftover of debug I guess

lndrtrbn · 2024-03-28T08:38:30Z

opencti-platform/opencti-front/src/private/components/nav/LeftBar.jsx

+  menuToggleSubmenuIcons: {
+    marginRight: 15,
+  },


It seems this style is never used?

lndrtrbn · 2024-03-28T08:48:45Z

opencti-platform/opencti-front/src/private/components/nav/LeftBar.jsx

+                      style: {
+                        whiteSpace: 'wrap',
+                        lineHeight: 1.2,
+                        padding: '4px 0 4px 10px',


Is this padding property really useful? It doesn't seem to change much, the less custom css we have, the better

lndrtrbn · 2024-03-28T08:59:52Z

opencti-platform/opencti-graphql/src/domain/user.js

+    R.assoc('submenu_show_icons', newUser.submenu_show_icons),
+    R.assoc('submenu_auto_collapse', newUser.submenu_auto_collapse),


I'm not sure we should add those lines as those properties are not present in the input to create a user. So it will be always undefined.

…penCTI-Platform#6341)

…form#6341)

Bonsai8863 added a commit to fbicyber/opencti__opencti that referenced this pull request Mar 13, 2024

[frontend] Added auto collapse and submenu icon switches to settings (O…

6dc29d7

…penCTI-Platform#6341)

Bonsai8863 force-pushed the left_nav_settings branch from 482033f to 6dc29d7 Compare March 13, 2024 19:00

Bonsai8863 added a commit to fbicyber/opencti__opencti that referenced this pull request Mar 14, 2024

[frontend] Added auto collapse and submenu icon switches to settings (O…

b7c8b44

…penCTI-Platform#6341)

Bonsai8863 force-pushed the left_nav_settings branch from 6dc29d7 to b7c8b44 Compare March 14, 2024 11:54

Bonsai8863 added a commit to fbicyber/opencti__opencti that referenced this pull request Mar 14, 2024

[frontend] Added auto collapse and submenu icon switches to settings (O…

2e680cd

…penCTI-Platform#6341)

Bonsai8863 force-pushed the left_nav_settings branch from b7c8b44 to 2e680cd Compare March 14, 2024 12:25

Bonsai8863 added a commit to fbicyber/opencti__opencti that referenced this pull request Mar 14, 2024

[frontend] Added auto collapse and submenu icon switches to settings (O…

ffa7ff3

…penCTI-Platform#6341)

Bonsai8863 force-pushed the left_nav_settings branch from 2e680cd to ffa7ff3 Compare March 14, 2024 14:19

richard-julien force-pushed the master branch 5 times, most recently from 84a7fec to 5dff342 Compare March 14, 2024 23:42

Bonsai8863 added a commit to fbicyber/opencti__opencti that referenced this pull request Mar 15, 2024

[frontend] Added auto collapse and submenu icon switches to settings (O…

542e139

…penCTI-Platform#6341)

Bonsai8863 force-pushed the left_nav_settings branch from ffa7ff3 to 542e139 Compare March 15, 2024 12:25

labo-flg added the community use to identify PR from community label Mar 19, 2024

lndrtrbn self-requested a review March 22, 2024 14:43

Bonsai8863 added a commit to fbicyber/opencti__opencti that referenced this pull request Mar 26, 2024

[frontend] Added auto collapse and submenu icon switches to settings (O…

b2123cd

…penCTI-Platform#6341)

Bonsai8863 force-pushed the left_nav_settings branch from 542e139 to b2123cd Compare March 26, 2024 14:28

Bonsai8863 added a commit to fbicyber/opencti__opencti that referenced this pull request Mar 26, 2024

[frontend] Added auto collapse and submenu icon switches to settings (O…

3d85864

…penCTI-Platform#6341)

Bonsai8863 force-pushed the left_nav_settings branch from b2123cd to 3d85864 Compare March 26, 2024 18:47

lndrtrbn reviewed Mar 28, 2024

View reviewed changes

Bonsai8863 and others added 2 commits March 30, 2024 17:32

[frontend] Added auto collapse and submenu icon switches to settings (O…

4e1a3f2

…penCTI-Platform#6341)

[backend/frontend] Adapt left menu behavior and cleanup (OpenCTI-Plat…

44264e9

…form#6341)

richard-julien force-pushed the left_nav_settings branch from 3d85864 to 44264e9 Compare March 30, 2024 17:32

richard-julien merged commit ff91835 into OpenCTI-Platform:master Mar 30, 2024
1 of 2 checks passed

richard-julien deleted the left_nav_settings branch March 30, 2024 18:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[frontend] Added auto collapse and submenu icon switches to settings #6341

[frontend] Added auto collapse and submenu icon switches to settings #6341

Bonsai8863 commented Mar 13, 2024 •

edited

codecov bot commented Mar 14, 2024 •

edited

lndrtrbn commented Mar 26, 2024

Bonsai8863 commented Mar 26, 2024

lndrtrbn left a comment •

edited

lndrtrbn Mar 28, 2024

lndrtrbn Mar 28, 2024

lndrtrbn Mar 28, 2024

lndrtrbn Mar 28, 2024

lndrtrbn Mar 28, 2024

lndrtrbn Mar 28, 2024

	"Show left navigation submenu icons": "Afficher les icônes du sous-menu de navigation de gauche",
	"Show left navigation submenu icons": "Afficher les icônes des sous-menus de la navigation de gauche",

	"Auto collapse submenus in left navigation": "Sous-menus à réduction automatique dans la navigation de gauche",
	"Auto collapse submenus in left navigation": "Fermer automatiquement les sous-menus de la navigation de gauche",

		R.assoc('submenu_show_icons', newUser.submenu_show_icons),
		R.assoc('submenu_auto_collapse', newUser.submenu_auto_collapse),

[frontend] Added auto collapse and submenu icon switches to settings #6341

[frontend] Added auto collapse and submenu icon switches to settings #6341

Conversation

Bonsai8863 commented Mar 13, 2024 • edited

Proposed changes

Related issues

Checklist

codecov bot commented Mar 14, 2024 • edited

Codecov Report

lndrtrbn commented Mar 26, 2024

Bonsai8863 commented Mar 26, 2024

lndrtrbn left a comment • edited

Choose a reason for hiding this comment

lndrtrbn Mar 28, 2024

Choose a reason for hiding this comment

lndrtrbn Mar 28, 2024

Choose a reason for hiding this comment

lndrtrbn Mar 28, 2024

Choose a reason for hiding this comment

lndrtrbn Mar 28, 2024

Choose a reason for hiding this comment

lndrtrbn Mar 28, 2024

Choose a reason for hiding this comment

lndrtrbn Mar 28, 2024

Choose a reason for hiding this comment

Bonsai8863 commented Mar 13, 2024 •

edited

codecov bot commented Mar 14, 2024 •

edited

lndrtrbn left a comment •

edited