Add "remove" option inside "configure integration" page (#4562)

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes

https://linear.app/unleash/issue/1-1268/add-remove-option-inside-configure-integration-page


![image](https://github.com/Unleash/unleash/assets/2625371/eb192f1e-65df-4208-90b4-f2757bc27868)

frontend/src/component/integrations/IntegrationForm/IntegrationDeleteDialog/IntegrationDeleteDialog.tsx

@@ -0,0 +1,51 @@
+import { type VFC } from 'react';
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import type { AddonSchema } from 'openapi';
+import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
+import useAddons from 'hooks/api/getters/useAddons/useAddons';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
+import { useNavigate } from 'react-router-dom';
+
+interface IIntegrationDeleteDialogProps {
+    id: AddonSchema['id'];
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const IntegrationDeleteDialog: VFC<IIntegrationDeleteDialogProps> = ({
+    id,
+    isOpen,
+    onClose,
+}) => {
+    const { removeAddon } = useAddonsApi();
+    const { refetchAddons } = useAddons();
+    const { setToastData, setToastApiError } = useToast();
+    const navigate = useNavigate();
+    const onSubmit = async () => {
+        try {
+            await removeAddon(id);
+            refetchAddons();
+            setToastData({
+                type: 'success',
+                title: 'Success',
+                text: 'Deleted addon successfully',
+            });
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
+        }
+        onClose();
+        navigate('/integrations');
+    };
+
+    return (
+        <Dialogue
+            open={isOpen}
+            onClick={onSubmit}
+            onClose={onClose}
+            title="Confirm deletion"
+        >
+            <div>Are you sure you want to delete this Addon?</div>
+        </Dialogue>
+    );
+};

frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx

@@ -33,10 +33,10 @@ export const StyledButtonContainer = styled('div')({
 });
 
 export const StyledButtonSection = styled('section')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
     paddingTop: theme.spacing(2),
-    '& > *': {
-        marginRight: theme.spacing(1),
-    },
+    gap: theme.spacing(1),
 }));
 
 export const StyledTextField = styled(TextField)({

frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx

@@ -31,6 +31,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import {
     CREATE_ADDON,
+    DELETE_ADDON,
     UPDATE_ADDON,
 } from '../../providers/AccessProvider/permissions';
 import {
@@ -46,6 +47,7 @@ import {
 import { useTheme } from '@mui/system';
 import { GO_BACK } from 'constants/navigate';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { IntegrationDeleteDialog } from './IntegrationDeleteDialog/IntegrationDeleteDialog';
 
 interface IAddonFormProps {
     provider?: IAddonProvider;
@@ -64,6 +66,7 @@ export const IntegrationForm: VFC<IAddonFormProps> = ({
     const { setToastData, setToastApiError } = useToast();
     const navigate = useNavigate();
     const theme = useTheme();
+    const [isDeleteOpen, setDeleteOpen] = useState(false);
     const { projects: availableProjects } = useProjects();
     const selectableProjects = availableProjects.map(project => ({
         value: project.id,
@@ -374,6 +377,34 @@ export const IntegrationForm: VFC<IAddonFormProps> = ({
                         <Button type="button" onClick={onCancel}>
                             Cancel
                         </Button>
+                        <ConditionallyRender
+                            condition={Boolean(
+                                uiConfig?.flags?.integrationsRework && editMode
+                            )}
+                            show={() => (
+                                <>
+                                    <PermissionButton
+                                        type="button"
+                                        variant="text"
+                                        color="error"
+                                        permission={DELETE_ADDON}
+                                        onClick={e => {
+                                            e.preventDefault();
+                                            setDeleteOpen(true);
+                                        }}
+                                    >
+                                        Delete
+                                    </PermissionButton>
+                                    <IntegrationDeleteDialog
+                                        id={formValues.id}
+                                        isOpen={isDeleteOpen}
+                                        onClose={() => {
+                                            setDeleteOpen(false);
+                                        }}
+                                    />
+                                </>
+                            )}
+                        />
                     </StyledButtonSection>
                 </StyledButtonContainer>
             </StyledForm>