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)

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')}

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}

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' },
 ];

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>
   );
 

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)}
                 />

grafana-plugin/src/pages/incidents/parts/SilenceButtonCascader.tsx

@@ -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[];
-  }
-});

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}