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

Author: Spikatrix

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

@@ -1,21 +1,18 @@
 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, TypedVariableModel, GrafanaTheme2 } from '@grafana/data';
-import { FnGlobalState } from 'app/core/reducers/fn-slice';
+import { AnnotationQuery, DataQuery, GrafanaTheme2 } from '@grafana/data';
+import { stylesFactory, Themeable2, withTheme2 } from '@grafana/ui';
 
 import { StoreState } from '../../../../types';
 import { getSubMenuVariables, getVariablesState } from '../../../variables/state/selectors';
+import { VariableModel } from '../../../variables/types';
 import { DashboardModel } from '../../state';
 
 import { Annotations } from './Annotations';
 import { DashboardLinks } from './DashboardLinks';
 import { SubMenuItems } from './SubMenuItems';
-// import { VariableModel } from 'app/features/variables/types';
-import { Themeable2, stylesFactory, withTheme2 } from '@grafana-ui';
 import { DashboardLink } from '@grafana/schema/dist/esm/index';
 
 interface OwnProps extends Themeable2 {
@@ -25,8 +22,7 @@ interface OwnProps extends Themeable2 {
 }
 
 interface ConnectedProps {
-  variables: TypedVariableModel[];
-  hiddenVariables: FnGlobalState['hiddenVariables'];
+  variables: VariableModel[];
 }
 
 interface DispatchProps {}
@@ -56,17 +52,16 @@ class SubMenuUnConnected extends PureComponent<Props> {
 
     const styles = getStyles(theme);
 
+    if (!dashboard.isSubMenuVisible()) {
+      return null;
+    }
+
     const readOnlyVariables = dashboard.meta.isSnapshot ?? false;
 
     return (
-      <div className="submenu-controls">
-        <form aria-label="Template variables" className={styles}>
-          <FilterWithIcon />
-          <SubMenuItems
-            variables={variables}
-            readOnly={readOnlyVariables}
-            hiddenVariables={this.props.hiddenVariables}
-          />
+      <div className={styles.submenu}>
+        <form aria-label="Template variables" className={styles.formStyles} onSubmit={this.disableSubmitOnEnter}>
+          <SubMenuItems variables={variables} readOnly={readOnlyVariables} />
         </form>
         <Annotations
           annotations={annotations}
@@ -86,25 +81,25 @@ const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (
 
   return {
     variables: getSubMenuVariables(uid, templatingState.variables),
-    hiddenVariables: state.fnGlobalState.hiddenVariables,
   };
 };
 
 const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
-    formStyles: css({
-      display: 'contents',
-      flexWrap: 'wrap',
-    }),
-    submenu: css({
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      alignContent: 'flex-start',
-      alignItems: 'flex-start',
-      gap: `${theme.spacing(1)} ${theme.spacing(2)}`,
-      padding: `0 0 ${theme.spacing(1)} 0`,
-    }),
+    formStyles: css`
+      display: flex;
+      flex-wrap: wrap;
+      display: contents;
+    `,
+    submenu: css`
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      align-items: flex-start;
+      gap: ${theme.spacing(1)} ${theme.spacing(2)};
+      padding: 0 0 ${theme.spacing(1)} 0;
+    `,
     spacer: css({
       flexGrow: 1,
     }),
@@ -114,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,21 +1,26 @@
-import React, { useEffect, useState } from 'react';
+import { css } from '@emotion/css';
+import { useEffect, useState } from 'react';
 
+import { GrafanaTheme2, TypedVariableModel, VariableHide } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useSelector } from 'app/types';
+import { useStyles2 } from '@grafana/ui';
 
 import { PickerRenderer } from '../../../variables/pickers/PickerRenderer';
-import { VariableHide, VariableModel } from '../../../variables/types';
+import { useSelector } from 'app/types';
 
 interface Props {
-  variables: VariableModel[];
+  variables: TypedVariableModel[];
   readOnly?: boolean;
 }
 
+
 export const SubMenuItems = ({ variables, readOnly }: Props) => {
-  const [visibleVariables, setVisibleVariables] = useState<VariableModel[]>([]);
+  const [visibleVariables, setVisibleVariables] = useState<TypedVariableModel[]>([]);
 
   const hiddenVariables = useSelector((state) => state.fnGlobalState.hiddenVariables);
 
+  const styles = useStyles2(getStyles);
+
   useEffect(() => {
     setVisibleVariables(
       variables.filter((state) => state.hide !== VariableHide.hideVariable && !hiddenVariables?.includes(state.id))
@@ -32,7 +37,7 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
         return (
           <div
             key={variable.id}
-            className="submenu-item gf-form-inline"
+            className={styles.submenuItem}
             data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}
           >
             <PickerRenderer variable={variable} readOnly={readOnly} />
@@ -42,3 +47,18 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
     </>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  submenuItem: css({
+    display: 'inline-block',
+
+    '.fa-caret-down': {
+      fontSize: '75%',
+      paddingLeft: theme.spacing(1),
+    },
+
+    '.gf-form': {
+      marginBottom: 0,
+    },
+  }),
+});