From 038d62788f66c5123174bd0efe41fa0ecd97c671 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 8 Jul 2024 12:03:26 +0300
Subject: [PATCH] Leftover tweaks (#4615)

# What this PR does

- Moved `Custom` as the last option for silencing period
- Added placeholder for "Select or type" on dropdowns where input is
allowed (such as custom wait durations)
- Cleanup (removed `SilenceCascaderButton` component)
---
 .../components/Policy/EscalationPolicy.tsx    |  4 +-
 .../components/Policy/NotificationPolicy.tsx  |  1 -
 .../src/components/Policy/Policy.consts.ts    |  2 +-
 .../src/pages/incident/Incident.helpers.tsx   |  4 +-
 .../src/pages/incidents/Incidents.tsx         |  4 +-
 .../incidents/parts/SilenceButtonCascader.tsx | 40 -------------------
 .../pages/incidents/parts/SilenceSelect.tsx   |  4 +-
 7 files changed, 10 insertions(+), 49 deletions(-)
 delete mode 100644 grafana-plugin/src/pages/incidents/parts/SilenceButtonCascader.tsx

diff --git a/grafana-plugin/src/components/Policy/EscalationPolicy.tsx b/grafana-plugin/src/components/Policy/EscalationPolicy.tsx
index 95212384..c91700e9 100644
--- a/grafana-plugin/src/components/Policy/EscalationPolicy.tsx
+++ b/grafana-plugin/src/components/Policy/EscalationPolicy.tsx
@@ -279,7 +279,7 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
         <Select
           menuShouldPortal
           disabled={isDisabled}
-          placeholder="Select Wait Delay"
+          placeholder="Select or type"
           className={cx(styles.select, styles.control)}
           value={waitDelayInSeconds ? waitDelayOptionItem : undefined}
           onChange={(option: SelectableValue) =>
@@ -335,7 +335,7 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
         <Select
           menuShouldPortal
           disabled={isDisabled}
-          placeholder="Period"
+          placeholder="Select or type"
           className={cx(styles.select, styles.control)}
           value={num_minutes_in_window ? optionValue : undefined}
           onChange={this.getOnSelectChangeHandler('num_minutes_in_window')}
diff --git a/grafana-plugin/src/components/Policy/NotificationPolicy.tsx b/grafana-plugin/src/components/Policy/NotificationPolicy.tsx
index 68308dbe..bf22a741 100644
--- a/grafana-plugin/src/components/Policy/NotificationPolicy.tsx
+++ b/grafana-plugin/src/components/Policy/NotificationPolicy.tsx
@@ -203,7 +203,6 @@ export class NotificationPolicy extends React.Component<NotificationPolicyProps,
         <div className={this.styles.container}>
           <Select
             key="wait-delay"
-            placeholder="Wait Delay"
             className={cx(this.styles.delay, this.styles.control)}
             value={wait_delay ? optionValue : undefined}
             disabled={disabled}
diff --git a/grafana-plugin/src/components/Policy/Policy.consts.ts b/grafana-plugin/src/components/Policy/Policy.consts.ts
index 7f749666..77e466bd 100644
--- a/grafana-plugin/src/components/Policy/Policy.consts.ts
+++ b/grafana-plugin/src/components/Policy/Policy.consts.ts
@@ -35,7 +35,6 @@ export const POLICY_DURATION_LIST_MINUTES: SelectableValue[] = [...POLICY_DURATI
 export const CUSTOM_SILENCE_VALUE = -100;
 
 export const SILENCE_DURATION_LIST: SelectableValue[] = [
-  { value: CUSTOM_SILENCE_VALUE, label: 'Custom' },
   { value: 30 * 60, label: '30 minutes' },
   { value: 1 * 60 * 60, label: '1 hour' },
   { value: 2 * 60 * 60, label: '2 hours' },
@@ -43,4 +42,5 @@ export const SILENCE_DURATION_LIST: SelectableValue[] = [
   { value: 12 * 60 * 60, label: '12 hours' },
   { value: 24 * 60 * 60, label: '24 hours' },
   { value: -1, label: 'Forever' },
+  { value: CUSTOM_SILENCE_VALUE, label: 'Custom' },
 ];
diff --git a/grafana-plugin/src/pages/incident/Incident.helpers.tsx b/grafana-plugin/src/pages/incident/Incident.helpers.tsx
index b493e733..ec32a3ce 100644
--- a/grafana-plugin/src/pages/incident/Incident.helpers.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.helpers.tsx
@@ -11,7 +11,7 @@ import { TextEllipsisTooltip } from 'components/TextEllipsisTooltip/TextEllipsis
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { IncidentStatus } from 'models/alertgroup/alertgroup.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
-import { SilenceButtonCascader } from 'pages/incidents/parts/SilenceButtonCascader';
+import { SilenceSelect } from 'pages/incidents/parts/SilenceSelect';
 import { move } from 'state/helpers';
 import { UserActions } from 'utils/authorization/authorization';
 
@@ -153,7 +153,7 @@ export function getActionButtons(
 
   const silenceButton = (
     <WithPermissionControlTooltip key="silence" userAction={UserActions.AlertGroupsWrite}>
-      <SilenceButtonCascader disabled={incident?.loading} onSelect={onSilence} />
+      <SilenceSelect disabled={incident?.loading} onSelect={onSilence} />
     </WithPermissionControlTooltip>
   );
 
diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx
index 9db18ffb..bcefaf3f 100644
--- a/grafana-plugin/src/pages/incidents/Incidents.tsx
+++ b/grafana-plugin/src/pages/incidents/Incidents.tsx
@@ -60,7 +60,7 @@ import { getItem, setItem } from 'utils/localStorage';
 import { TableColumn } from 'utils/types';
 
 import { IncidentDropdown } from './parts/IncidentDropdown';
-import { SilenceButtonCascader } from './parts/SilenceButtonCascader';
+import { SilenceSelect } from './parts/SilenceSelect';
 
 interface Pagination {
   start: number;
@@ -487,7 +487,7 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
             )}
             {'restart' in store.alertGroupStore.bulkActions && (
               <WithPermissionControlTooltip key="silence" userAction={UserActions.AlertGroupsWrite}>
-                <SilenceButtonCascader
+                <SilenceSelect
                   disabled={!hasSelected || isBulkUpdate}
                   onSelect={(ev) => this.onBulkActionClick('silence', ev)}
                 />
diff --git a/grafana-plugin/src/pages/incidents/parts/SilenceButtonCascader.tsx b/grafana-plugin/src/pages/incidents/parts/SilenceButtonCascader.tsx
deleted file mode 100644
index 7b1b2064..00000000
--- a/grafana-plugin/src/pages/incidents/parts/SilenceButtonCascader.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { ButtonCascader, CascaderOption, ComponentSize } from '@grafana/ui';
-import { observer } from 'mobx-react';
-
-import { SILENCE_DURATION_LIST } from 'components/Policy/Policy.consts';
-import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { UserActions } from 'utils/authorization/authorization';
-
-interface SilenceButtonCascaderProps {
-  className?: string;
-  disabled?: boolean;
-  buttonSize?: string;
-
-  onSelect: (value: number) => void;
-}
-
-export const SilenceButtonCascader = observer((props: SilenceButtonCascaderProps) => {
-  const { onSelect, className, disabled = false, buttonSize } = props;
-
-  return (
-    <WithPermissionControlTooltip key="silence" userAction={UserActions.AlertGroupsWrite}>
-      <ButtonCascader
-        variant="secondary"
-        className={className}
-        disabled={disabled}
-        onChange={(value) => onSelect(Number(value))}
-        options={getOptions()}
-        value={undefined}
-        buttonProps={{ size: buttonSize as ComponentSize }}
-      >
-        Silence
-      </ButtonCascader>
-    </WithPermissionControlTooltip>
-  );
-
-  function getOptions(): CascaderOption[] {
-    return [...SILENCE_DURATION_LIST] as CascaderOption[];
-  }
-});
diff --git a/grafana-plugin/src/pages/incidents/parts/SilenceSelect.tsx b/grafana-plugin/src/pages/incidents/parts/SilenceSelect.tsx
index f78a2e78..4f0c0b15 100644
--- a/grafana-plugin/src/pages/incidents/parts/SilenceSelect.tsx
+++ b/grafana-plugin/src/pages/incidents/parts/SilenceSelect.tsx
@@ -9,18 +9,20 @@ import { UserActions } from 'utils/authorization/authorization';
 
 interface SilenceSelectProps {
   placeholder?: string;
+  disabled?: boolean;
 
   onSelect: (value: number) => void;
 }
 
 export const SilenceSelect = observer((props: SilenceSelectProps) => {
-  const { placeholder = 'Silence for', onSelect } = props;
+  const { placeholder = 'Silence for', disabled = false, onSelect } = props;
 
   return (
     <>
       {' '}
       <WithPermissionControlTooltip key="silence" userAction={UserActions.AlertGroupsWrite}>
         <Select
+          disabled={disabled}
           menuShouldPortal
           placeholder={placeholder}
           value={undefined}