Add make a copy action for advanced webhooks (#1852)

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

@@ -19,22 +19,28 @@ const cx = cn.bind(styles);
 
 interface OutgoingWebhook2FormProps {
   id: OutgoingWebhook2['id'] | 'new';
+  action: 'new' | 'update';
   onHide: () => void;
   onUpdate: () => void;
 }
 
 const OutgoingWebhook2Form = observer((props: OutgoingWebhook2FormProps) => {
-  const { id, onUpdate, onHide } = props;
+  const { id, action, onUpdate, onHide } = props;
 
   const store = useStore();
 
   const { outgoingWebhook2Store } = store;
 
-  const data = id === 'new' ? { is_webhook_enabled: true, is_legacy: false } : outgoingWebhook2Store.items[id];
+  const data =
+    id === 'new'
+      ? { is_webhook_enabled: true, is_legacy: false }
+      : action === 'new'
+      ? { ...outgoingWebhook2Store.items[id], is_legacy: false, name: '' }
+      : outgoingWebhook2Store.items[id];
 
   const handleSubmit = useCallback(
     (data: Partial<OutgoingWebhook2>) => {
-      (id === 'new' ? outgoingWebhook2Store.create(data) : outgoingWebhook2Store.update(id, data)).then(() => {
+      (action === 'new' ? outgoingWebhook2Store.create(data) : outgoingWebhook2Store.update(id, data)).then(() => {
         onHide();
 
         onUpdate();
@@ -48,7 +54,7 @@ const OutgoingWebhook2Form = observer((props: OutgoingWebhook2FormProps) => {
       scrollableContent
       title={
         <Text.Title className={cx('title')} level={4}>
-          {id === 'new' ? 'Create' : 'Edit'} Outgoing Webhook
+          {action === 'new' ? 'Create' : 'Edit'} Outgoing Webhook
         </Text.Title>
       }
       onClose={onHide}
@@ -58,7 +64,7 @@ const OutgoingWebhook2Form = observer((props: OutgoingWebhook2FormProps) => {
         <GForm form={form} data={data} onSubmit={handleSubmit} />
         <WithPermissionControlTooltip userAction={UserActions.OutgoingWebhooksWrite}>
           <Button form={form.name} type="submit" disabled={data.is_legacy}>
-            {id === 'new' ? 'Create' : 'Update'} Webhook
+            {action === 'new' ? 'Create' : 'Update'} Webhook
           </Button>
         </WithPermissionControlTooltip>
       </div>

grafana-plugin/src/pages/outgoing_webhooks_2/OutgoingWebhooks2.tsx

@@ -39,6 +39,7 @@ const cx = cn.bind(styles);
 const Action = {
   STATUS: 'status',
   EDIT: 'edit',
+  COPY: 'copy',
 };
 
 interface OutgoingWebhooks2Props
@@ -47,8 +48,8 @@ interface OutgoingWebhooks2Props
     RouteComponentProps<{ id: string; action: string }> {}
 
 interface OutgoingWebhooks2State extends PageBaseState {
-  outgoingWebhook2IdToEdit?: OutgoingWebhook2['id'] | 'new';
-  outgoingWebhook2IdToShowStatus?: OutgoingWebhook2['id'];
+  outgoingWebhook2Action?: 'new' | 'update';
+  outgoingWebhook2Id?: OutgoingWebhook2['id'];
 }
 
 @observer
@@ -66,7 +67,7 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
   parseQueryParams = async () => {
     this.setState((_prevState) => ({
       errorData: initErrorDataState(),
-      outgoingWebhook2IdToEdit: undefined,
+      outgoingWebhook2Id: undefined,
     })); // reset state on query parse
 
     const {
@@ -89,10 +90,12 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
         .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } }));
     }
 
-    if (isNewWebhook || (action === Action.EDIT && outgoingWebhook2)) {
-      this.setState({ outgoingWebhook2IdToEdit: id });
+    if (isNewWebhook || (action === Action.COPY && outgoingWebhook2)) {
+      this.setState({ outgoingWebhook2Id: id, outgoingWebhook2Action: 'new' });
+    } else if (action === Action.EDIT && outgoingWebhook2) {
+      this.setState({ outgoingWebhook2Id: id, outgoingWebhook2Action: 'update' });
     } else if (action === Action.STATUS && outgoingWebhook2) {
-      this.setState({ outgoingWebhook2IdToShowStatus: id });
+      this.setState({ outgoingWebhook2Id: id, outgoingWebhook2Action: undefined });
     }
   };
 
@@ -104,7 +107,7 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
 
   render() {
     const { store, query } = this.props;
-    const { outgoingWebhook2IdToEdit, outgoingWebhook2IdToShowStatus, errorData } = this.state;
+    const { outgoingWebhook2Id, outgoingWebhook2Action, errorData } = this.state;
 
     const webhooks = store.outgoingWebhook2Store.getSearchResult();
 
@@ -116,15 +119,10 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
         render: this.renderName,
       },
       {
-        width: '5%',
+        width: '10%',
         title: 'Trigger type',
         dataIndex: 'trigger_type_name',
       },
-      {
-        width: '5%',
-        title: 'HTTP method',
-        dataIndex: 'http_method',
-      },
       {
         width: '35%',
         title: 'URL',
@@ -194,16 +192,17 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
                 data={webhooks}
               />
             </div>
-            {outgoingWebhook2IdToEdit && !outgoingWebhook2IdToShowStatus && (
+            {outgoingWebhook2Id && outgoingWebhook2Action && (
               <OutgoingWebhook2Form
-                id={outgoingWebhook2IdToEdit}
+                id={outgoingWebhook2Id}
+                action={outgoingWebhook2Action}
                 onUpdate={this.update}
                 onHide={this.handleOutgoingWebhookFormHide}
               />
             )}
-            {outgoingWebhook2IdToShowStatus && (
+            {outgoingWebhook2Id && !outgoingWebhook2Action && (
               <OutgoingWebhook2Status
-                id={outgoingWebhook2IdToShowStatus}
+                id={outgoingWebhook2Id}
                 onUpdate={this.update}
                 onHide={this.handleOutgoingWebhookFormHide}
               />
@@ -264,20 +263,32 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
           />
         </CopyToClipboard>
         <WithPermissionControlTooltip key={'status_action'} userAction={UserActions.OutgoingWebhooksRead}>
-          <Button onClick={() => this.onStatusClick(record.id)} fill="text">
-            Status
-          </Button>
+          <IconButton
+            tooltip="Status"
+            tooltipPlacement="top"
+            name="history"
+            onClick={() => this.onStatusClick(record.id)}
+          />
         </WithPermissionControlTooltip>
         <WithPermissionControlTooltip key={'edit_action'} userAction={UserActions.OutgoingWebhooksWrite}>
-          <Button onClick={() => this.onEditClick(record.id)} fill="text">
-            Edit
-          </Button>
+          <IconButton tooltip="Edit" tooltipPlacement="top" name="cog" onClick={() => this.onEditClick(record.id)} />
+        </WithPermissionControlTooltip>
+        <WithPermissionControlTooltip key={'copy_action'} userAction={UserActions.OutgoingWebhooksWrite}>
+          <IconButton
+            tooltip="Make a copy"
+            tooltipPlacement="top"
+            name="copy"
+            onClick={() => this.onCopyClick(record.id)}
+          />
         </WithPermissionControlTooltip>
         <WithPermissionControlTooltip key={'delete_action'} userAction={UserActions.OutgoingWebhooksWrite}>
-          <WithConfirm>
-            <Button onClick={this.getDeleteClickHandler(record.id)} fill="text" variant="destructive">
-              Delete
-            </Button>
+          <WithConfirm title={`Are you sure to remove "${record.name}"?`} confirmText="Remove">
+            <IconButton
+              tooltip="Remove"
+              tooltipPlacement="top"
+              onClick={this.getDeleteClickHandler(record.id)}
+              name="trash-alt"
+            />
           </WithConfirm>
         </WithPermissionControlTooltip>
       </HorizontalGroup>
@@ -331,15 +342,23 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
   onEditClick = (id: OutgoingWebhook2['id']) => {
     const { history } = this.props;
 
-    this.setState({ outgoingWebhook2IdToEdit: id, outgoingWebhook2IdToShowStatus: undefined });
+    this.setState({ outgoingWebhook2Id: id, outgoingWebhook2Action: 'update' });
 
     history.push(`${PLUGIN_ROOT}/outgoing_webhooks_2/edit/${id}`);
   };
 
+  onCopyClick = (id: OutgoingWebhook2['id']) => {
+    const { history } = this.props;
+
+    this.setState({ outgoingWebhook2Id: id, outgoingWebhook2Action: 'new' });
+
+    history.push(`${PLUGIN_ROOT}/outgoing_webhooks_2/copy/${id}`);
+  };
+
   onStatusClick = (id: OutgoingWebhook2['id']) => {
     const { history } = this.props;
 
-    this.setState({ outgoingWebhook2IdToEdit: undefined, outgoingWebhook2IdToShowStatus: id });
+    this.setState({ outgoingWebhook2Id: id, outgoingWebhook2Action: undefined });
 
     history.push(`${PLUGIN_ROOT}/outgoing_webhooks_2/status/${id}`);
   };
@@ -347,7 +366,7 @@ class OutgoingWebhooks2 extends React.Component<OutgoingWebhooks2Props, Outgoing
   handleOutgoingWebhookFormHide = () => {
     const { history } = this.props;
 
-    this.setState({ outgoingWebhook2IdToEdit: undefined, outgoingWebhook2IdToShowStatus: undefined });
+    this.setState({ outgoingWebhook2Id: undefined, outgoingWebhook2Action: undefined });
 
     history.push(`${PLUGIN_ROOT}/outgoing_webhooks_2`);
   };