changed query filter designs (#59)

Author: gurinder39

package.json

@@ -275,6 +275,7 @@
     "@lezer/lr": "1.2.3",
     "@lingui/core": "3.14.0",
     "@lingui/react": "3.14.0",
+    "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.10.9",
     "@mui/styled-engine": "^5.10.8",
     "@opentelemetry/api": "1.2.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 } from '@grafana/data';
@@ -56,6 +58,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
     return (
       <div className="submenu-controls">
         <form aria-label="Template variables" className={styles}>
+          <FilterWithIcon />
           <SubMenuItems
             variables={variables}
             readOnly={readOnlyVariables}
@@ -93,3 +96,20 @@ const styles = css`
 export const SubMenu = 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/variables/pickers/PickerRenderer.tsx

@@ -1,8 +1,10 @@
+import { css } from '@emotion/css';
 import React, { CSSProperties, FunctionComponent, PropsWithChildren, ReactElement, useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Tooltip, useTheme2 } from '@grafana/ui';
+import { Tooltip } from '@grafana/ui';
 import { FnGlobalState } from 'app/core/reducers/fn-slice';
 import type { StoreState } from 'app/types';
 
@@ -14,6 +16,18 @@ interface Props {
   readOnly?: boolean;
 }
 
+const renderWrapperStyle = css`
+  & button,
+  & span,
+  & label,
+  & input {
+    height: 24px;
+    font-size: 12px;
+    line-height: 24px;
+    align-self: center;
+  }
+`;
+
 export const PickerRenderer: FunctionComponent<Props> = (props) => {
   const PickerToRender = useMemo(() => variableAdapters.get(props.variable.type).picker, [props.variable]);
 
@@ -25,36 +39,53 @@ export const PickerRenderer: FunctionComponent<Props> = (props) => {
     <div className="gf-form">
       <PickerLabel variable={props.variable} />
       {props.variable.hide !== VariableHide.hideVariable && PickerToRender && (
-        <PickerToRender variable={props.variable} readOnly={props.readOnly ?? false} />
+        <div className={renderWrapperStyle}>
+          <PickerToRender variable={props.variable} readOnly={props.readOnly ?? false} />
+        </div>
       )}
     </div>
   );
 };
 
 const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
-  borderRadius: '4px',
+  borderRadius: '2px',
   border: 'none',
-  fontWeight: 600,
+  fontWeight: 400,
   fontSize: '12px',
+  padding: '3px 6px',
+  letterSpacing: '0.15px',
+  height: '24px',
 };
 
 function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
   const labelOrName = useMemo(() => variable.label || variable.name, [variable]);
-  const { FNDashboard } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
-  const theme = useTheme2();
+  const { FNDashboard, mode } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
+
+  const fnLabelStyle = useMemo(
+    () => ({
+      ...COMMON_PICKER_LABEL_STYLE,
+      ...(FNDashboard
+        ? {
+            color: mode === 'light' ? '#2D333E' : '#DBD9D7',
+            backgroundColor: mode === 'light' ? '#E0E0E0' : '#56524D',
+          }
+        : {}),
+    }),
+    [mode, FNDashboard]
+  );
 
   if (variable.hide !== VariableHide.dontHide) {
     return null;
   }
-  const fnLabelOrName = FNDashboard ? labelOrName.replace('druid', '') : labelOrName;
+  const fnLabelOrName = FNDashboard ? labelOrName.replace('druid_adhoc_filters', 'ad-hoc') : labelOrName;
 
   const elementId = `var-${variable.id}`;
   if (variable.description) {
     return (
       <Tooltip content={variable.description} placement={'bottom'}>
         <label
           className="gf-form-label gf-form-label--variable"
-          style={FNDashboard ? { ...COMMON_PICKER_LABEL_STYLE, color: theme.colors.text.secondary } : {}}
+          style={fnLabelStyle}
           data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
           htmlFor={elementId}
         >
@@ -66,7 +97,7 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
   return (
     <label
       className="gf-form-label gf-form-label--variable"
-      style={FNDashboard ? { ...COMMON_PICKER_LABEL_STYLE, color: theme.colors.text.secondary } : {}}
+      style={fnLabelStyle}
       data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
       htmlFor={elementId}
     >

yarn.lock

@@ -1897,6 +1897,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.21.0":
+  version: 7.21.0
+  resolution: "@babel/runtime@npm:7.21.0"
+  dependencies:
+    regenerator-runtime: ^0.13.11
+  checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.12.7, @babel/template@npm:^7.18.10, @babel/template@npm:^7.18.6, @babel/template@npm:^7.20.7, @babel/template@npm:^7.3.3":
   version: 7.20.7
   resolution: "@babel/template@npm:7.20.7"
@@ -5408,6 +5417,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^5.11.11":
+  version: 5.11.11
+  resolution: "@mui/icons-material@npm:5.11.11"
+  dependencies:
+    "@babel/runtime": ^7.21.0
+  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: 6ec89f3c68aaedd521f6a5106964394c410b08cec6875166d3ee97dcbaf2983c67d3b19cd58113d767d9f934cc0e9439fb5856e45471f5094656c0f87bbefecd
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.10.9":
   version: 5.11.3
   resolution: "@mui/material@npm:5.11.3"
@@ -20080,6 +20105,7 @@ __metadata:
     "@lingui/macro": 3.14.0
     "@lingui/react": 3.14.0
     "@microsoft/api-extractor": 7.28.6
+    "@mui/icons-material": ^5.11.11
     "@mui/material": ^5.10.9
     "@mui/styled-engine": ^5.10.8
     "@opentelemetry/api": 1.2.0