Add filters icon to submenu

Author: Spikatrix

package.json

@@ -280,6 +280,7 @@
     "@locker/near-membrane-dom": "^0.12.15",
     "@locker/near-membrane-shared": "^0.12.15",
     "@locker/near-membrane-shared-dom": "^0.12.15",
+    "@mui/icons-material": "^5.14.13",
     "@mui/material": "^5.14.13",
     "@opentelemetry/api": "1.4.0",
     "@opentelemetry/exporter-collector": "0.25.0",

public/app/features/dashboard/components/SubMenu/SubMenu.tsx

@@ -1,5 +1,7 @@
 import { css } from '@emotion/css';
-import React, { PureComponent } from 'react';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import { Box, styled } from '@mui/material';
+import React, { FC, PureComponent } from 'react';
 import { connect, MapStateToProps } from 'react-redux';
 
 import { AnnotationQuery, DataQuery, GrafanaTheme2 } from '@grafana/data';
@@ -61,6 +63,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
     return (
       <div className={styles.submenu}>
         <form aria-label="Template variables" className={styles.formStyles} onSubmit={this.disableSubmitOnEnter}>
+          <FilterWithIcon />
           <SubMenuItems variables={variables} readOnly={readOnlyVariables} />
         </form>
         <Annotations
@@ -78,6 +81,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
 const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, ownProps) => {
   const { uid } = ownProps.dashboard;
   const templatingState = getVariablesState(uid, state);
+
   return {
     variables: getSubMenuVariables(uid, templatingState.variables),
   };
@@ -108,3 +112,20 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
 export const SubMenu = withTheme2(connect(mapStateToProps)(SubMenuUnConnected));
 
 SubMenu.displayName = 'SubMenu';
+
+const FilterWithIcon: FC = () => (
+  <FilterWithIconStyled>
+    <FilterListIcon sx={{ color: '#3A785E' }} />
+    FILTERS
+  </FilterWithIconStyled>
+);
+
+const FilterWithIconStyled = styled(Box)({
+  display: 'flex',
+  gap: 1,
+  alignItems: 'center',
+  color: '#3A785E',
+  fontWeight: 600,
+  lineHeight: '160%',
+  fontSize: 12,
+});

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -411,18 +411,18 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
           scrollRef={this.setScrollRef}
           scrollTop={updateScrollTop}
         >
-          {/* {showToolbar && ( */}
-          <header data-testid={selectors.pages.Dashboard.DashNav.navV2}>
-            <Box mb={4}>
-              <ToolbarButtonRow alignment="right">
-                <DashNavTimeControls
-                  dashboard={dashboard}
-                  onChangeTimeZone={updateTimeZoneForSession}
-                  key="time-controls"
-                />
-              </ToolbarButtonRow>
-            </Box>
-            {/* <DashNav
+          {showToolbar && (
+            <header data-testid={selectors.pages.Dashboard.DashNav.navV2}>
+              <Box mb={4}>
+                <ToolbarButtonRow alignment="right">
+                  <DashNavTimeControls
+                    dashboard={dashboard}
+                    onChangeTimeZone={updateTimeZoneForSession}
+                    key="time-controls"
+                  />
+                </ToolbarButtonRow>
+              </Box>
+              {/* <DashNav
                 dashboard={dashboard}
                 title={dashboard.title}
                 folderTitle={dashboard.meta.folderTitle}
@@ -431,11 +431,11 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
                 kioskMode={kioskMode}
                 hideTimePicker={dashboard.timepicker.hidden}
               /> */}
-          </header>
-          {/* )} */}
+            </header>
+          )}
           {!FNDashboard && <DashboardPrompt dashboard={dashboard} />}
           {initError && <DashboardFailed />}
-          {showSubMenu && !FNDashboard && (
+          {showSubMenu && (
             <section aria-label={selectors.pages.Dashboard.SubMenu.submenu}>
               <SubMenu dashboard={dashboard} annotations={dashboard.annotations.list} links={dashboard.links} />
             </section>

yarn.lock

@@ -5578,6 +5578,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^5.14.13":
+  version: 5.14.13
+  resolution: "@mui/icons-material@npm:5.14.13"
+  dependencies:
+    "@babel/runtime": ^7.23.1
+  peerDependencies:
+    "@mui/material": ^5.0.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a25db309d02654d1f2d51887986e11b26fc7aea864a398fdc55ca2f4ffd80bbc7402e7686f6a0aeab04a440993e0733aa52f752db50e083dae03e04c558f7bfd
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.14.13":
   version: 5.14.13
   resolution: "@mui/material@npm:5.14.13"
@@ -19750,6 +19766,7 @@ __metadata:
     "@locker/near-membrane-dom": ^0.12.15
     "@locker/near-membrane-shared": ^0.12.15
     "@locker/near-membrane-shared-dom": ^0.12.15
+    "@mui/icons-material": ^5.14.13
     "@mui/material": ^5.14.13
     "@opentelemetry/api": 1.4.0
     "@opentelemetry/exporter-collector": 0.25.0