From 07bb6b8daee24e5ec7cfbab5a71447ede46f080b Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Tue, 26 Jan 2021 09:53:39 +0100
Subject: [PATCH] Grafana/UI: Add disable prop to Segment (#30539)

* Grafana/UI: Add disable prop to Segment

SegmentSync, SegmentAsync and SegmentInput had the disable prop inherited from HTMLProp but it did not disable the component. The disable prop should now disable the component.

* Use InlineLabel instead of span and remove some sass-classes in Segments

* Change MetricsQueryEditor test to reflect new layout of AsyncSegment

* Use useStyles hook to get themed styles for segment inputs

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
---
 .../src/components/Segment/Segment.tsx        | 20 +++++++++++++--
 .../src/components/Segment/SegmentAsync.tsx   | 20 +++++++++++++--
 .../src/components/Segment/SegmentInput.tsx   | 19 ++++++++++++--
 .../src/components/Segment/styles.ts          | 21 ++++++++++++++++
 .../src/components/Segment/types.ts           |  1 +
 .../components/Segment/useExpandableLabel.tsx | 25 +++++++++++--------
 .../components/MetricsQueryEditor.test.tsx    |  6 ++---
 7 files changed, 93 insertions(+), 19 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/Segment/styles.ts

diff --git a/packages/grafana-ui/src/components/Segment/Segment.tsx b/packages/grafana-ui/src/components/Segment/Segment.tsx
index 750fdf47e7b..53cdfb834cf 100644
--- a/packages/grafana-ui/src/components/Segment/Segment.tsx
+++ b/packages/grafana-ui/src/components/Segment/Segment.tsx
@@ -3,6 +3,9 @@ import { cx } from 'emotion';
 import _ from 'lodash';
 import { SelectableValue } from '@grafana/data';
 import { SegmentSelect, useExpandableLabel, SegmentProps } from './';
+import { getSegmentStyles } from './styles';
+import { InlineLabel } from '../Forms/InlineLabel';
+import { useStyles } from '../../themes';
 
 export interface SegmentSyncProps<T> extends SegmentProps<T>, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
   value?: T | SelectableValue<T>;
@@ -18,19 +21,32 @@ export function Segment<T>({
   className,
   allowCustomValue,
   placeholder,
+  disabled,
   ...rest
 }: React.PropsWithChildren<SegmentSyncProps<T>>) {
   const [Label, width, expanded, setExpanded] = useExpandableLabel(false);
+  const styles = useStyles(getSegmentStyles);
 
   if (!expanded) {
     const label = _.isObject(value) ? value.label : value;
+
     return (
       <Label
+        disabled={disabled}
         Component={
           Component || (
-            <a className={cx('gf-form-label', 'query-part', !value && placeholder && 'query-placeholder', className)}>
+            <InlineLabel
+              className={cx(
+                styles.segment,
+                {
+                  [styles.queryPlaceholder]: placeholder !== undefined && !value,
+                  [styles.disabled]: disabled,
+                },
+                className
+              )}
+            >
               {label || placeholder}
-            </a>
+            </InlineLabel>
           )
         }
       />
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
index f18611b2c9e..f7a840925ea 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
@@ -6,6 +6,9 @@ import { SelectableValue } from '@grafana/data';
 import { useExpandableLabel, SegmentProps } from '.';
 import { useAsyncFn } from 'react-use';
 import { AsyncState } from 'react-use/lib/useAsync';
+import { getSegmentStyles } from './styles';
+import { InlineLabel } from '../Forms/InlineLabel';
+import { useStyles } from '../../themes';
 
 export interface SegmentAsyncProps<T> extends SegmentProps<T>, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
   value?: T | SelectableValue<T>;
@@ -20,22 +23,35 @@ export function SegmentAsync<T>({
   Component,
   className,
   allowCustomValue,
+  disabled,
   placeholder,
   ...rest
 }: React.PropsWithChildren<SegmentAsyncProps<T>>) {
   const [state, fetchOptions] = useAsyncFn(loadOptions, [loadOptions]);
   const [Label, width, expanded, setExpanded] = useExpandableLabel(false);
+  const styles = useStyles(getSegmentStyles);
 
   if (!expanded) {
     const label = _.isObject(value) ? value.label : value;
+
     return (
       <Label
         onClick={fetchOptions}
+        disabled={disabled}
         Component={
           Component || (
-            <a className={cx('gf-form-label', 'query-part', !value && placeholder && 'query-placeholder', className)}>
+            <InlineLabel
+              className={cx(
+                styles.segment,
+                {
+                  [styles.queryPlaceholder]: placeholder !== undefined && !value,
+                  [styles.disabled]: disabled,
+                },
+                className
+              )}
+            >
               {label || placeholder}
-            </a>
+            </InlineLabel>
           )
         }
       />
diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
index 18ec2017d52..2ecb6682a5b 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
@@ -3,6 +3,9 @@ import { cx, css } from 'emotion';
 import useClickAway from 'react-use/lib/useClickAway';
 import { measureText } from '../../utils/measureText';
 import { useExpandableLabel, SegmentProps } from '.';
+import { getSegmentStyles } from './styles';
+import { InlineLabel } from '../Forms/InlineLabel';
+import { useStyles } from '../../themes';
 
 export interface SegmentInputProps<T> extends SegmentProps<T>, Omit<HTMLProps<HTMLInputElement>, 'value' | 'onChange'> {
   value: string | number;
@@ -18,6 +21,7 @@ export function SegmentInput<T>({
   Component,
   className,
   placeholder,
+  disabled,
   autofocus = false,
   ...rest
 }: React.PropsWithChildren<SegmentInputProps<T>>) {
@@ -25,6 +29,7 @@ export function SegmentInput<T>({
   const [value, setValue] = useState<number | string>(initialValue);
   const [inputWidth, setInputWidth] = useState<number>(measureText((initialValue || '').toString(), FONT_SIZE).width);
   const [Label, , expanded, setExpanded] = useExpandableLabel(autofocus);
+  const styles = useStyles(getSegmentStyles);
 
   useClickAway(ref, () => {
     setExpanded(false);
@@ -34,11 +39,21 @@ export function SegmentInput<T>({
   if (!expanded) {
     return (
       <Label
+        disabled={disabled}
         Component={
           Component || (
-            <a className={cx('gf-form-label', 'query-part', !value && placeholder && 'query-placeholder', className)}>
+            <InlineLabel
+              className={cx(
+                styles.segment,
+                {
+                  [styles.queryPlaceholder]: placeholder !== undefined && !value,
+                  [styles.disabled]: disabled,
+                },
+                className
+              )}
+            >
               {initialValue || placeholder}
-            </a>
+            </InlineLabel>
           )
         }
       />
diff --git a/packages/grafana-ui/src/components/Segment/styles.ts b/packages/grafana-ui/src/components/Segment/styles.ts
new file mode 100644
index 00000000000..22efd47abaf
--- /dev/null
+++ b/packages/grafana-ui/src/components/Segment/styles.ts
@@ -0,0 +1,21 @@
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
+
+export const getSegmentStyles = (theme: GrafanaTheme) => {
+  return {
+    segment: css`
+      cursor: pointer;
+      width: auto;
+    `,
+
+    queryPlaceholder: css`
+      color: ${theme.palette.gray2};
+    `,
+
+    disabled: css`
+      cursor: not-allowed;
+      opacity: 0.65;
+      box-shadow: none;
+    `,
+  };
+};
diff --git a/packages/grafana-ui/src/components/Segment/types.ts b/packages/grafana-ui/src/components/Segment/types.ts
index 4bb12aa568f..3f1ed1a5a7a 100644
--- a/packages/grafana-ui/src/components/Segment/types.ts
+++ b/packages/grafana-ui/src/components/Segment/types.ts
@@ -5,4 +5,5 @@ export interface SegmentProps<T> {
   className?: string;
   allowCustomValue?: boolean;
   placeholder?: string;
+  disabled?: boolean;
 }
diff --git a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
index fe3f963412e..07719b33123 100644
--- a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
+++ b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
@@ -3,6 +3,7 @@ import React, { useState, useRef, ReactElement } from 'react';
 interface LabelProps {
   Component: ReactElement;
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 export const useExpandableLabel = (
@@ -12,18 +13,22 @@ export const useExpandableLabel = (
   const [expanded, setExpanded] = useState<boolean>(initialExpanded);
   const [width, setWidth] = useState(0);
 
-  const Label: React.FC<LabelProps> = ({ Component, onClick }) => (
+  const Label: React.FC<LabelProps> = ({ Component, onClick, disabled }) => (
     <div
       ref={ref}
-      onClick={() => {
-        setExpanded(true);
-        if (ref && ref.current) {
-          setWidth(ref.current.clientWidth * 1.25);
-        }
-        if (onClick) {
-          onClick();
-        }
-      }}
+      onClick={
+        disabled
+          ? undefined
+          : () => {
+              setExpanded(true);
+              if (ref && ref.current) {
+                setWidth(ref.current.clientWidth * 1.25);
+              }
+              if (onClick) {
+                onClick();
+              }
+            }
+      }
     >
       {Component}
     </div>
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
index c203bdf6a42..7dfd6b55f6e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
@@ -107,9 +107,9 @@ describe('QueryEditor', () => {
         const props = setup();
         props.query.region = (null as unknown) as string;
         const wrapper = mount(<MetricsQueryEditor {...props} />);
-        expect(wrapper.find('.gf-form-inline').first().find('.gf-form-label.query-part').first().text()).toEqual(
-          'default'
-        );
+        expect(
+          wrapper.find('.gf-form-inline').first().find('Segment').find('InlineLabel').find('label').text()
+        ).toEqual('default');
       });
     });