Show filters icon only when there are some variables to show (#116)

Author: Spikatrix

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

@@ -1,7 +1,5 @@
 import { css } from '@emotion/css';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import { Box, styled } from '@mui/material';
-import React, { FC, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { connect, MapStateToProps } from 'react-redux';
 
 import { AnnotationQuery, DataQuery, GrafanaTheme2 } from '@grafana/data';
@@ -63,7 +61,6 @@ 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
@@ -112,20 +109,3 @@ 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/components/SubMenu/SubMenuItems.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import { Box, styled } from '@mui/material';
+import React, { FC, useEffect, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { useSelector } from 'app/types';
@@ -17,20 +19,19 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
   const hiddenVariables = useSelector((state) => state.fnGlobalState.hiddenVariables);
 
   useEffect(() => {
-    setVisibleVariables(variables.filter((state) => state.hide !== VariableHide.hideVariable));
-  }, [variables]);
+    setVisibleVariables(
+      variables.filter((state) => state.hide !== VariableHide.hideVariable && !hiddenVariables?.includes(state.id))
+    );
+  }, [variables, hiddenVariables]);
 
   if (visibleVariables.length === 0) {
     return null;
   }
 
   return (
     <>
+      <FilterWithIcon />
       {visibleVariables.map((variable) => {
-        if (hiddenVariables?.includes(variable.id)) {
-          return null;
-        }
-
         return (
           <div
             key={variable.id}
@@ -44,3 +45,20 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
     </>
   );
 };
+
+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,
+});