Refactor Roles component

web/packages/shared/components/AccessRequests/NewRequest/Roles/Roles.story.tsx

@@ -0,0 +1,53 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useState } from 'react';
+
+import { Roles } from './Roles';
+
+export default {
+  title: 'Shared/AccessRequests/Roles',
+};
+
+export function Default() {
+  const [requested, setRequested] = useState(new Set<string>());
+  return (
+    <Roles
+      requestable={['auditor', 'editor', 'admin', 'access']}
+      requested={requested}
+      onToggleRole={role =>
+        setRequested(prev => {
+          const newSet = new Set(prev);
+          newSet.has(role) ? newSet.delete(role) : newSet.add(role);
+          return newSet;
+        })
+      }
+    />
+  );
+}
+
+export function Disabled() {
+  return (
+    <Roles
+      requestable={['auditor', 'editor', 'admin', 'access']}
+      requested={new Set()}
+      onToggleRole={() => {}}
+      disabled
+    />
+  );
+}

web/packages/shared/components/AccessRequests/NewRequest/Roles/Roles.test.tsx

@@ -0,0 +1,70 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { within, screen } from '@testing-library/react';
+import { render } from 'design/utils/testing';
+
+import { Roles } from './Roles';
+
+test('renders requestable roles with a request option', async () => {
+  render(
+    <Roles
+      requestable={['editor', 'access']}
+      requested={new Set()}
+      onToggleRole={() => {}}
+    />
+  );
+
+  const row = await screen.findByRole('row', {
+    name: /editor/i,
+  });
+
+  expect(
+    await within(row).findByRole('button', {
+      name: /request access/i,
+    })
+  ).toBeVisible();
+});
+
+test('renders requested roles with a remove option and requestable roles with an add option', async () => {
+  render(
+    <Roles
+      requestable={['editor', 'access']}
+      requested={new Set(['editor'])}
+      onToggleRole={() => {}}
+    />
+  );
+
+  const rowEditor = await screen.findByRole('row', {
+    name: /editor/i,
+  });
+  expect(
+    await within(rowEditor).findByRole('button', {
+      name: /remove/i,
+    })
+  ).toBeVisible();
+
+  const rowAccess = await screen.findByRole('row', {
+    name: /access/i,
+  });
+  expect(
+    await within(rowAccess).findByRole('button', {
+      name: /add to request/i,
+    })
+  ).toBeVisible();
+});

web/packages/shared/components/AccessRequests/NewRequest/Roles/Roles.tsx

@@ -0,0 +1,71 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Table, { Cell } from 'design/DataTable';
+import { ButtonPrimary, ButtonBorder } from 'design/Button';
+
+export function Roles(props: {
+  requestable: string[];
+  requested: Set<string>;
+  onToggleRole(role: string): void;
+  /** Disables buttons.*/
+  disabled?: boolean;
+}) {
+  const addToRequestText = props.requested.size
+    ? '+ Add to Request'
+    : '+ Request Access';
+
+  return (
+    <Table
+      data={props.requestable.map(role => ({ role }))}
+      pagination={{ pagerPosition: 'top', pageSize: 10 }}
+      isSearchable={true}
+      columns={[
+        {
+          key: 'role',
+          headerText: 'Role Name',
+          isSortable: true,
+        },
+        {
+          altKey: 'action',
+          render: ({ role }) => {
+            const isAdded = props.requested.has(role);
+            const commonProps = {
+              disabled: props.disabled,
+              width: '137px',
+              size: 'small' as const,
+              onClick: () => props.onToggleRole(role),
+            };
+            return (
+              <Cell align="right">
+                {isAdded ? (
+                  <ButtonPrimary {...commonProps}>Remove</ButtonPrimary>
+                ) : (
+                  <ButtonBorder {...commonProps}>
+                    {addToRequestText}
+                  </ButtonBorder>
+                )}
+              </Cell>
+            );
+          },
+        },
+      ]}
+      emptyText="No Requestable Roles Found"
+    />
+  );
+}

web/packages/shared/components/AccessRequests/NewRequest/ResourceList/index.ts → web/packages/shared/components/AccessRequests/NewRequest/Roles/index.ts

@@ -16,4 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { ResourceList } from './ResourceList';
+export { Roles } from './Roles';

web/packages/shared/components/AccessRequests/NewRequest/index.ts

@@ -17,7 +17,7 @@
  */
 
 export * from './RequestCheckout';
-export * from './ResourceList';
+export * from './Roles';
 export type { ResourceMap, RequestableResourceKind } from './resource';
 export { getEmptyResourceState } from './resource';
 export { isKubeClusterWithNamespaces } from './kube';