show delete integration btn only if allow_delete is truthy (#3377)

# What this PR does Show delete integration btn only if `allow_delete` is `true` for it ## Which issue(s) this PR fixes grafana/oncall-private#2302 ## Checklist - [x] Unit, integration, and e2e (if applicable) tests updated - [x] Documentation added (or `pr:no public docs` PR label added if not required) - [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not required)
grafana · Nov 17, 2023 · 53ca533 · 53ca533
1 parent 8f13e31
commit 53ca533
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 208 deletions.
diff --git a/grafana-plugin/src/components/RenderConditionally/RenderConditionally.tsx b/grafana-plugin/src/components/RenderConditionally/RenderConditionally.tsx
@@ -0,0 +1,11 @@
+import React, { FC, ReactNode } from 'react';
+
+interface RenderConditionallyProps {
+  shouldRender?: boolean;
+  children: ReactNode;
+}
+
+const RenderConditionally: FC<RenderConditionallyProps> = ({ shouldRender, children }) =>
+  shouldRender ? <>{children}</> : null;
+
+export default RenderConditionally;
diff --git a/...ntainers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer.module.css b/...ntainers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer.module.css
diff --git a/.../src/containers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer.tsx b/.../src/containers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer.tsx
diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx
@@ -29,6 +29,7 @@ import {
   initErrorDataState,
 } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers';
 import PluginLink from 'components/PluginLink/PluginLink';
+import RenderConditionally from 'components/RenderConditionally/RenderConditionally';
 import Text from 'components/Text/Text';
 import TextEllipsisTooltip from 'components/TextEllipsisTooltip/TextEllipsisTooltip';
 import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
@@ -540,39 +541,39 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
                 </HorizontalGroup>
               </div>
             </CopyToClipboard>
-
-            <div className={cx('thin-line-break')} />
-
-            <WithPermissionControlTooltip key="delete" userAction={UserActions.IntegrationsWrite}>
-              <div className={cx('integrations-actionItem')}>
-                <div
-                  onClick={() => {
-                    this.setState({
-                      confirmationModal: {
-                        isOpen: true,
-                        confirmText: 'Delete',
-                        dismissText: 'Cancel',
-                        onConfirm: () => this.handleDeleteAlertReceiveChannel(item.id),
-                        title: 'Delete integration',
-                        body: (
-                          <Text type="primary">
-                            Are you sure you want to delete <Emoji text={item.verbal_name} /> integration?
-                          </Text>
-                        ),
-                      },
-                    });
-                  }}
-                  style={{ width: '100%' }}
-                >
-                  <Text type="danger">
-                    <HorizontalGroup spacing={'xs'}>
-                      <Icon name="trash-alt" />
-                      <span>Delete Integration</span>
-                    </HorizontalGroup>
-                  </Text>
+            <RenderConditionally shouldRender={item.allow_delete}>
+              <div className={cx('thin-line-break')} />
+              <WithPermissionControlTooltip key="delete" userAction={UserActions.IntegrationsWrite}>
+                <div className={cx('integrations-actionItem')}>
+                  <div
+                    onClick={() => {
+                      this.setState({
+                        confirmationModal: {
+                          isOpen: true,
+                          confirmText: 'Delete',
+                          dismissText: 'Cancel',
+                          onConfirm: () => this.handleDeleteAlertReceiveChannel(item.id),
+                          title: 'Delete integration',
+                          body: (
+                            <Text type="primary">
+                              Are you sure you want to delete <Emoji text={item.verbal_name} /> integration?
+                            </Text>
+                          ),
+                        },
+                      });
+                    }}
+                    className="u-width-100"
+                  >
+                    <Text type="danger">
+                      <HorizontalGroup spacing={'xs'}>
+                        <Icon name="trash-alt" />
+                        <span>Delete Integration</span>
+                      </HorizontalGroup>
+                    </Text>
+                  </div>
                 </div>
-              </div>
-            </WithPermissionControlTooltip>
+              </WithPermissionControlTooltip>
+            </RenderConditionally>
           </div>
         )}
       >