frontend: components: redux: Add feature to keep resource maps expanded by default

Author: mudit06mah

frontend/src/components/App/Settings/Settings.tsx

@@ -43,11 +43,13 @@ export default function Settings() {
   const storedTimezone = settingsObj.timezone;
   const storedRowsPerPageOptions = settingsObj.tableRowsPerPageOptions;
   const storedSortSidebar = settingsObj.sidebarSortAlphabetically;
+  const resourceMapAlwaysExpand = settingsObj.resourceMapAlwaysExpand;
   const storedUseEvict = settingsObj.useEvict;
   const [selectedTimezone, setSelectedTimezone] = useState<string>(
     storedTimezone || Intl.DateTimeFormat().resolvedOptions().timeZone
   );
   const [sortSidebar, setSortSidebar] = useState<boolean>(storedSortSidebar);
+  const [alwaysExpand, setAlwaysExpand] = useState<boolean>(resourceMapAlwaysExpand);
   const [useEvict, setUseEvict] = useState<boolean>(storedUseEvict);
   const dispatch = useDispatch();
   const themeName = useTypedSelector(state => state.theme.name);
@@ -77,10 +79,19 @@ export default function Settings() {
     );
   }, [useEvict]);
 
+  useEffect(() => {
+    dispatch(
+      setAppSettings({
+        resourceMapAlwaysExpand: alwaysExpand,
+      })
+    );
+  }, [alwaysExpand]);
+
   const sidebarLabelID = 'sort-sidebar-label';
   const evictLabelID = 'use-evict-label';
   const tableRowsLabelID = 'rows-per-page-label';
   const timezoneLabelID = 'timezone-label';
+  const alwaysExpandID = 'always-expand-label';
 
   return (
     <SectionBox
@@ -160,6 +171,20 @@ export default function Settings() {
             ),
             nameID: evictLabelID,
           },
+          {
+            name: t('translation|Always Expand Resource Map groups'),
+            value: (
+              <Switch
+                color="primary"
+                checked={alwaysExpand}
+                onChange={e => setAlwaysExpand(e.target.checked)}
+                inputProps={{
+                  'aria-labelledby': alwaysExpandID,
+                }}
+              />
+            ),
+            nameID: alwaysExpandID,
+          },
         ]}
       />
       <Box

frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot

@@ -382,13 +382,13 @@
             </span>
           </dd>
           <dt
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3 MuiGrid-grid-md-2 css-1779c3p-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3 MuiGrid-grid-md-2 css-1g8ukv4-MuiGrid-root"
             id="use-evict-label"
           >
             Use evict for pod deletion
           </dt>
           <dd
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-9 MuiGrid-grid-md-10 css-ui3itl-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-9 MuiGrid-grid-md-10 css-1dbzfsd-MuiGrid-root"
           >
             <span
               class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
@@ -414,6 +414,38 @@
               />
             </span>
           </dd>
+          <dt
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3 MuiGrid-grid-md-2 css-1779c3p-MuiGrid-root"
+            id="always-expand-label"
+          >
+            Always Expand Resource Map groups
+          </dt>
+          <dd
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-9 MuiGrid-grid-md-10 css-ui3itl-MuiGrid-root"
+          >
+            <span
+              class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
+            >
+              <span
+                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1emuodk-MuiButtonBase-root-MuiSwitch-switchBase"
+              >
+                <input
+                  aria-labelledby="always-expand-label"
+                  class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+                  type="checkbox"
+                />
+                <span
+                  class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+                />
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </span>
+              <span
+                class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+              />
+            </span>
+          </dd>
         </dl>
         <div
           class="MuiBox-root css-1k57ox4"

frontend/src/components/resourceMap/GraphView.tsx

@@ -168,6 +168,16 @@ function GraphViewContent({
   // Expand all groups state
   const [expandAll, setExpandAll] = useState(false);
 
+  // Expand by Default
+  const alwaysExpand = useTypedSelector(state => state.config.settings.resourceMapAlwaysExpand);
+  useEffect(() => {
+    if (alwaysExpand) {
+      setExpandAll(true);
+    } else {
+      setExpandAll(false);
+    }
+  }, [alwaysExpand]);
+
   // Load source data
   const { nodes, edges, selectedSources, sourceData, isLoading, toggleSelection } = useSources();
 
@@ -237,10 +247,10 @@ function GraphViewContent({
 
   const graphSize = getGraphSize(visibleGraph);
   useEffect(() => {
-    if (expandAll && graphSize > 50) {
+    if (expandAll && !alwaysExpand && graphSize > 50) {
       setExpandAll(false);
     }
-  }, [graphSize]);
+  }, [graphSize, expandAll, alwaysExpand]);
 
   const contextValue = useMemo(
     () => ({ nodeSelection: selectedNodeId, setNodeSelection: setSelectedNodeId }),
@@ -332,7 +342,7 @@ function GraphViewContent({
                   onClick={() => setHasErrorsFilter(!hasErrorsFilter)}
                 />
 
-                {graphSize < 50 && (
+                {(graphSize < 50 || alwaysExpand) && (
                   <ChipToggleButton
                     label={t('Expand All')}
                     isActive={expandAll}

frontend/src/i18n/locales/de/translation.json

@@ -142,6 +142,7 @@
   "Timezone to display for dates": "Zeitzone",
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
+  "Always Expand Resource Map groups": "",
   "Theme": "Design",
   "Cluster Settings": "Cluster-Einstellungen",
   "There seem to be no clusters configured…": "",

frontend/src/i18n/locales/en/translation.json

@@ -142,6 +142,7 @@
   "Timezone to display for dates": "Timezone to display for dates",
   "Sort sidebar items alphabetically": "Sort sidebar items alphabetically",
   "Use evict for pod deletion": "Use evict for pod deletion",
+  "Always Expand Resource Map groups": "Always Expand Resource Map groups",
   "Theme": "Theme",
   "Cluster Settings": "Cluster Settings",
   "There seem to be no clusters configured…": "There seem to be no clusters configured…",

frontend/src/i18n/locales/es/translation.json

@@ -142,6 +142,7 @@
   "Timezone to display for dates": "Huso horario para mostrar en fechas",
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
+  "Always Expand Resource Map groups": "",
   "Theme": "Tema",
   "Cluster Settings": "Configuración del cluster",
   "There seem to be no clusters configured…": "No parece haber clusters configurados…",

frontend/src/i18n/locales/fr/translation.json

@@ -142,6 +142,7 @@
   "Timezone to display for dates": "Fuseau horaire à afficher pour les dates",
   "Sort sidebar items alphabetically": "Trier les éléments de la barre latérale par ordre alphabétique",
   "Use evict for pod deletion": "Utiliser l'éviction pour la suppression de pods",
+  "Always Expand Resource Map groups": "",
   "Theme": "Thème",
   "Cluster Settings": "Paramètres du cluster",
   "There seem to be no clusters configured…": "Il ne semble pas y avoir de clusters configurés…",

frontend/src/i18n/locales/hi/translation.json

@@ -142,6 +142,7 @@
   "Timezone to display for dates": "तिथियों के लिए प्रदर्शित करने का समय क्षेत्र",
   "Sort sidebar items alphabetically": "साइडबार आइटमों को वर्णानुक्रम में सॉर्ट करें",
   "Use evict for pod deletion": "Pod हटाने के लिए निष्कासन का उपयोग करें",
+  "Always Expand Resource Map groups": "",
   "Theme": "थीम",
   "Cluster Settings": "क्लस्टर सेटिंग्स",
   "There seem to be no clusters configured…": "ऐसा लगता है कि कोई क्लस्टर कॉन्फ़िगर नहीं किया गया है…",

frontend/src/i18n/locales/it/translation.json

@@ -142,6 +142,7 @@
   "Timezone to display for dates": "Fuso orario per la visualizzazione delle date",
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
+  "Always Expand Resource Map groups": "",
   "Theme": "Tema",
   "Cluster Settings": "Impostazioni Cluster",
   "There seem to be no clusters configured…": "Sembra che non ci siano cluster configurati…",

frontend/src/i18n/locales/ja/translation.json

@@ -142,6 +142,7 @@
   "Timezone to display for dates": "日付表示のタイムゾーン",
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
+  "Always Expand Resource Map groups": "",
   "Theme": "テーマ",
   "Cluster Settings": "クラスター設定",
   "There seem to be no clusters configured…": "設定されたクラスターがないようです...",