WebDiscover: Add delete integration operation

lib/web/integrations.go

@@ -133,7 +133,7 @@ func (h *Handler) integrationsDelete(w http.ResponseWriter, r *http.Request, p h
 		return nil, trace.Wrap(err)
 	}
 
-	return nil, nil
+	return OK(), nil
 }
 
 // integrationsGet returns an Integration based on its name

web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx

@@ -69,7 +69,7 @@ export function ConnectAwsAccount() {
   function fetchAwsIntegrations() {
     run(() =>
       integrationService.fetchIntegrations().then(res => {
-        const options = res.map(i => {
+        const options = res.items.map(i => {
           if (i.kind === 'aws-oidc') {
             return {
               value: i.name,

web/packages/teleport/src/Integrations/DeleteIntegrationDialog.tsx

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { ButtonSecondary, ButtonWarning, Text, Alert } from 'design';
+import Dialog, {
+  DialogHeader,
+  DialogTitle,
+  DialogContent,
+  DialogFooter,
+} from 'design/DialogConfirmation';
+import useAttempt from 'shared/hooks/useAttemptNext';
+
+type Props = {
+  onClose(): void;
+  onDelete(): Promise<void>;
+  name: string;
+};
+
+export function DeleteIntegrationDialog(props: Props) {
+  const { onClose, onDelete } = props;
+  const { attempt, run } = useAttempt();
+  const isDisabled = attempt.status === 'processing';
+
+  function onOk() {
+    run(() => onDelete());
+  }
+
+  return (
+    <Dialog disableEscapeKeyDown={false} onClose={onClose} open={true}>
+      <DialogHeader>
+        <DialogTitle>Delete Integration?</DialogTitle>
+      </DialogHeader>
+      <DialogContent width="450px">
+        {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
+        <Text typography="paragraph" mb="6">
+          Are you sure you want to delete integration{' '}
+          <Text as="span" bold color="text.contrast">
+            {props.name}
+          </Text>{' '}
+          ?
+        </Text>
+      </DialogContent>
+      <DialogFooter>
+        <ButtonWarning mr="3" disabled={isDisabled} onClick={onOk}>
+          Yes, Remove Integration
+        </ButtonWarning>
+        <ButtonSecondary disabled={isDisabled} onClick={onClose}>
+          Cancel
+        </ButtonSecondary>
+      </DialogFooter>
+    </Dialog>
+  );
+}

web/packages/teleport/src/Integrations/IntegrationList.tsx

@@ -35,7 +35,8 @@ import {
 
 type Props<IntegrationLike> = {
   list: IntegrationLike[];
-  onDelete(i: IntegrationLike): void;
+  onDeletePlugin?(p: Plugin): void;
+  onDeleteIntegration?(i: Integration): void;
 };
 
 type IntegrationLike = Integration | Plugin;
@@ -69,11 +70,29 @@ export function IntegrationList(props: Props<IntegrationLike>) {
         },
         {
           altKey: 'options-btn',
-          render: item => (
-            <ActionCell
-              onDelete={props.onDelete ? () => props.onDelete(item) : null}
-            />
-          ),
+          render: item => {
+            if (item.resourceType === 'plugin') {
+              return (
+                <Cell align="right">
+                  <MenuButton>
+                    <MenuItem onClick={() => props.onDeletePlugin(item)}>
+                      Delete...
+                    </MenuItem>
+                  </MenuButton>
+                </Cell>
+              );
+            }
+
+            return (
+              <Cell align="right">
+                <MenuButton>
+                  <MenuItem onClick={() => props.onDeleteIntegration(item)}>
+                    Delete...
+                  </MenuItem>
+                </MenuButton>
+              </Cell>
+            );
+          },
         },
       ]}
       emptyText="No Results Found"
@@ -100,20 +119,6 @@ const StatusCell = ({ item }: { item: IntegrationLike }) => {
   );
 };
 
-const ActionCell = ({ onDelete }: { onDelete: () => void }) => {
-  if (!onDelete) {
-    return null;
-  }
-
-  return (
-    <Cell align="right">
-      <MenuButton>
-        <MenuItem onClick={onDelete}>Delete...</MenuItem>
-      </MenuButton>
-    </Cell>
-  );
-};
-
 enum Status {
   Success,
   Warning,
@@ -170,7 +175,7 @@ const IconCell = ({ item }: { item: IntegrationLike }) => {
     // Default is integration.
     switch (item.kind) {
       case IntegrationKind.AwsOidc:
-        formattedText = 'Amazon Web Services (OIDC)';
+        formattedText = item.name;
         icon = <IconContainer src={awsIcon} />;
         break;
     }

web/packages/teleport/src/Integrations/Integrations.story.tsx

@@ -17,17 +17,23 @@
 import React from 'react';
 
 import { IntegrationList } from './IntegrationList';
+import { DeleteIntegrationDialog } from './DeleteIntegrationDialog';
 import { plugins, integrations } from './fixtures';
 
 export default {
   title: 'Teleport/Integrations',
 };
 
 export function List() {
+  return <IntegrationList list={[...plugins, ...integrations]} />;
+}
+
+export function DeleteDialog() {
   return (
-    <IntegrationList
-      list={[...plugins, ...integrations]}
+    <DeleteIntegrationDialog
+      onClose={() => null}
       onDelete={() => null}
+      name="some-integration-name"
     />
   );
 }

web/packages/teleport/src/Integrations/Integrations.tsx

@@ -28,36 +28,64 @@ import { integrationService } from 'teleport/services/integrations';
 
 import { IntegrationsAddButton } from './IntegrationsAddButton';
 import { IntegrationList } from './IntegrationList';
+import { DeleteIntegrationDialog } from './DeleteIntegrationDialog';
+import { useIntegrationOperation } from './useIntegrationOperation';
 
 import type { Integration } from 'teleport/services/integrations';
 
 export function Integrations() {
+  const integrationOps = useIntegrationOperation();
   const [items, setItems] = useState<Integration[]>([]);
   const { attempt, run } = useAttempt('processing');
 
   const ctx = useTeleport();
   const canCreateIntegrations = ctx.storeUser.getIntegrationsAccess().create;
 
   useEffect(() => {
-    run(() => integrationService.fetchIntegrations().then(setItems));
+    // TODO(lisa): handle paginating as a follow up polish.
+    // Default fetch is 1k of integrations, which is plenty for beginning.
+    run(() =>
+      integrationService.fetchIntegrations().then(resp => setItems(resp.items))
+    );
   }, []);
 
+  function deleteIntegration() {
+    return integrationOps.remove().then(() => {
+      const updatedItems = items.filter(
+        i => i.name !== integrationOps.item.name
+      );
+      setItems(updatedItems);
+      integrationOps.clear();
+    });
+  }
+
   return (
-    <FeatureBox>
-      <FeatureHeader>
-        <FeatureHeaderTitle>Integrations</FeatureHeaderTitle>
-        <IntegrationsAddButton canCreate={canCreateIntegrations} />
-      </FeatureHeader>
-      {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
-      {attempt.status === 'processing' && (
-        <Box textAlign="center" m={10}>
-          <Indicator />
-        </Box>
-      )}
-      {attempt.status === 'success' && (
-        /* TODO(lisa): deletion is stubbed until backend is implemented*/
-        <IntegrationList list={items} onDelete={null} />
+    <>
+      <FeatureBox>
+        <FeatureHeader>
+          <FeatureHeaderTitle>Integrations</FeatureHeaderTitle>
+          <IntegrationsAddButton canCreate={canCreateIntegrations} />
+        </FeatureHeader>
+        {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
+        {attempt.status === 'processing' && (
+          <Box textAlign="center" m={10}>
+            <Indicator />
+          </Box>
+        )}
+        {attempt.status === 'success' && (
+          <IntegrationList
+            list={items}
+            onDeleteIntegration={integrationOps.onRemove}
+          />
+        )}
+      </FeatureBox>
+      {integrationOps.type === 'delete' && (
+        <DeleteIntegrationDialog
+          name={integrationOps.item.name}
+          onClose={integrationOps.clear}
+          onDelete={deleteIntegration}
+        />
       )}
-    </FeatureBox>
+    </>
   );
 }

web/packages/teleport/src/Integrations/useIntegrationOperation.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState } from 'react';
+
+import { integrationService } from 'teleport/services/integrations';
+
+import type { Integration, Plugin } from 'teleport/services/integrations';
+
+export function useIntegrationOperation() {
+  const [operation, setOperation] = useState({
+    type: 'none',
+  } as Operation);
+
+  function clear() {
+    setOperation({ type: 'none' });
+  }
+
+  function remove() {
+    return integrationService.deleteIntegration(operation.item.name);
+  }
+
+  function onRemove(item: Integration) {
+    setOperation({ type: 'delete', item });
+  }
+
+  return {
+    ...operation,
+    clear,
+    remove,
+    onRemove,
+  };
+}
+
+export type Operation = {
+  type: 'create' | 'edit' | 'delete' | 'reset' | 'none';
+  item?: Plugin | Integration;
+};

web/packages/teleport/src/config.ts

@@ -618,7 +618,7 @@ const cfg = {
   getIntegrationsUrl(integrationName?: string) {
     // Currently you can only create integrations at the root cluster.
     const clusterId = cfg.proxyCluster;
-    return generateResourcePath(cfg.api.integrationsPath, {
+    return generatePath(cfg.api.integrationsPath, {
       clusterId,
       name: integrationName,
     });

web/packages/teleport/src/services/integrations/integrations.ts

@@ -21,15 +21,22 @@ import {
   Integration,
   IntegrationCreateRequest,
   IntegrationStatusCode,
+  IntegrationListResponse,
 } from './types';
 
 export const integrationService = {
   fetchIntegration(name: string): Promise<Integration> {
     return api.get(cfg.getIntegrationsUrl(name)).then(makeIntegration);
   },
 
-  fetchIntegrations(): Promise<Integration[]> {
-    return api.get(cfg.getIntegrationsUrl()).then(makeIntegrations);
+  fetchIntegrations(): Promise<IntegrationListResponse> {
+    return api.get(cfg.getIntegrationsUrl()).then(resp => {
+      const integrations = resp?.items ?? [];
+      return {
+        items: integrations.map(makeIntegration),
+        nextKey: resp?.nextKey,
+      };
+    });
   },
 
   createIntegration(req: IntegrationCreateRequest): Promise<void> {

web/packages/teleport/src/services/integrations/types.ts

@@ -97,3 +97,8 @@ export type IntegrationCreateRequest = {
   subKind: IntegrationKind;
   awsoidc?: IntegrationSpecAwsOidc;
 };
+
+export type IntegrationListResponse = {
+  items: Integration[];
+  nextKey?: string;
+};