Merge pull request #292 from grafana/silence-button-fix

fix silence button size and collapsing escalationchain select

grafana-plugin/src/containers/AlertRules/AlertRules.tsx

@@ -714,16 +714,18 @@ class AlertRules extends React.Component<AlertRulesProps, AlertRulesState> {
           )}
           escalate to{' '}
           <WithPermissionControl userAction={UserAction.UpdateAlertReceiveChannels}>
-            <GSelect
-              showSearch
-              modelName="escalationChainStore"
-              displayField="name"
-              placeholder="Select Escalation Chain"
-              className={cx('select', 'control', 'no-trigger-collapse-please')}
-              value={channelFilter.escalation_chain}
-              onChange={this.getEscalationChainChangeHandler(channelFilterId)}
-              showWarningIfEmptyValue={true}
-            />
+            <div onClick={(e) => e.stopPropagation()}>
+              <GSelect
+                showSearch
+                modelName="escalationChainStore"
+                displayField="name"
+                placeholder="Select Escalation Chain"
+                className={cx('select', 'control', 'no-trigger-collapse-please')}
+                value={channelFilter.escalation_chain}
+                onChange={this.getEscalationChainChangeHandler(channelFilterId)}
+                showWarningIfEmptyValue={true}
+              />
+            </div>
           </WithPermissionControl>
         </div>
         <div onClick={(e) => e.stopPropagation()}>{this.renderChannelFilterButtons(channelFilterId, index)}</div>

grafana-plugin/src/pages/incident/Incident.helpers.tsx

@@ -214,6 +214,7 @@ export function getActionButtons(incident: AlertType, cx: any, callbacks: { [key
           key="silence"
           disabled={incident.loading}
           onSelect={onSilence}
+          buttonSize="sm"
         />
       );
     }

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

@@ -12,10 +12,11 @@ interface SilenceDropdownProps {
   onSelect: (value: number) => void;
   className?: string;
   disabled?: boolean;
+  buttonSize?: string;
 }
 
 const SilenceDropdown = observer((props: SilenceDropdownProps) => {
-  const { onSelect, className, disabled = false } = props;
+  const { onSelect, className, disabled = false, buttonSize } = props;
 
   const onSelectCallback = useCallback(
     ([value, ...rest]) => {
@@ -43,6 +44,7 @@ const SilenceDropdown = observer((props: SilenceDropdownProps) => {
           label: silenceOption.display_name,
         }))}
         value={undefined}
+        buttonProps={{ size: buttonSize }}
       >
         Silence
       </ButtonCascader>