coder · BrunoQuaresma · Jan 4, 2023 · Jan 4, 2023 · Jan 4, 2023 · Jan 4, 2023
diff --git a/site/src/components/EditRolesButton/EditRolesButton.stories.tsx b/site/src/components/EditRolesButton/EditRolesButton.stories.tsx
@@ -0,0 +1,40 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  MockOwnerRole,
+  MockSiteRoles,
+  MockUserAdminRole,
+} from "testHelpers/entities"
+import { EditRolesButtonProps, EditRolesButton } from "./EditRolesButton"
+
+export default {
+  title: "components/EditRolesButton",
+  component: EditRolesButton,
+  argTypes: {
+    defaultIsOpen: {
+      defaultValue: true,
+    },
+  },
+} as ComponentMeta<typeof EditRolesButton>
+
+const Template: Story<EditRolesButtonProps> = (args) => (
+  <EditRolesButton {...args} />
+)
+
+export const Open = Template.bind({})
+Open.args = {
+  roles: MockSiteRoles,
+  selectedRoles: [MockUserAdminRole, MockOwnerRole],
+}
+Open.parameters = {
+  chromatic: { delay: 300 },
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  isLoading: true,
+  roles: MockSiteRoles,
+  selectedRoles: [MockUserAdminRole, MockOwnerRole],
+}
+Loading.parameters = {
+  chromatic: { delay: 300 },
+}
diff --git a/site/src/components/EditRolesButton/EditRolesButton.tsx b/site/src/components/EditRolesButton/EditRolesButton.tsx
@@ -0,0 +1,196 @@
+import IconButton from "@material-ui/core/IconButton"
+import { EditSquare } from "components/Icons/EditSquare"
+import { useRef, useState, FC } from "react"
+import { makeStyles } from "@material-ui/core/styles"
+import { useTranslation } from "react-i18next"
+import Popover from "@material-ui/core/Popover"
+import { Stack } from "components/Stack/Stack"
+import Checkbox from "@material-ui/core/Checkbox"
+import UserIcon from "@material-ui/icons/PersonOutline"
+import { Role } from "api/typesGenerated"
+
+const Option: React.FC<{
+  value: string
+  name: string
+  description: string
+  isChecked: boolean
+  onChange: (roleName: string) => void
+}> = ({ value, name, description, isChecked, onChange }) => {
+  const styles = useStyles()
+
+  return (
+    <label htmlFor={name} className={styles.option}>
+      <Stack direction="row" alignItems="flex-start">
+        <Checkbox
+          id={name}
+          size="small"
+          color="primary"
+          className={styles.checkbox}
+          value={value}
+          checked={isChecked}
+          onChange={(e) => {
+            onChange(e.currentTarget.value)
+          }}
+        />
+        <Stack spacing={0.5}>
+          <strong>{name}</strong>
+          <span className={styles.optionDescription}>{description}</span>
+        </Stack>
+      </Stack>
+    </label>
+  )
+}
+
+export interface EditRolesButtonProps {
+  isLoading: boolean
+  roles: Role[]
+  selectedRoles: Role[]
+  onChange: (roles: Role["name"][]) => void
+  defaultIsOpen?: boolean
+}
+
+export const EditRolesButton: FC<EditRolesButtonProps> = ({
+  roles,
+  selectedRoles,
+  onChange,
+  isLoading,
+  defaultIsOpen = false,
+}) => {
+  const styles = useStyles()
+  const { t } = useTranslation("usersPage")
+  const anchorRef = useRef<HTMLButtonElement>(null)
+  const [isOpen, setIsOpen] = useState(defaultIsOpen)
+  const id = isOpen ? "edit-roles-popover" : undefined
+  const selectedRoleNames = selectedRoles.map((role) => role.name)
+
+  const handleChange = (roleName: string) => {
+    if (selectedRoleNames.includes(roleName)) {
+      onChange(selectedRoleNames.filter((role) => role !== roleName))
+      return
+    }
+
+    onChange([...selectedRoleNames, roleName])
+  }
+
+  return (
+    <>
+      <IconButton
+        ref={anchorRef}
+        size="small"
+        className={styles.editButton}
+        title={t("editUserRolesTooltip")}
+        onClick={() => setIsOpen(true)}
+      >
+        <EditSquare />
+      </IconButton>
+
+      <Popover
+        id={id}
+        open={isOpen}
+        anchorEl={anchorRef.current}
+        onClose={() => setIsOpen(false)}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        classes={{ paper: styles.popoverPaper }}
+      >
+        <fieldset
+          className={styles.fieldset}
+          disabled={isLoading}
+          title={t("fieldSetRolesTooltip")}
+        >
+          <Stack className={styles.options} spacing={3}>
+            {roles.map((role) => (
+              <Option
+                key={role.name}
+                onChange={handleChange}
+                isChecked={selectedRoleNames.includes(role.name)}
+                value={role.name}
+                name={role.display_name}
+                description={t(`roleDescription.${role.name}`)}
+              />
+            ))}
+          </Stack>
+        </fieldset>
+        <div className={styles.footer}>
+          <Stack direction="row" alignItems="flex-start">
+            <UserIcon className={styles.userIcon} />
+            <Stack spacing={0.5}>
+              <strong>{t("member")}</strong>
+              <span className={styles.optionDescription}>
+                {t("roleDescription.member")}
+              </span>
+            </Stack>
+          </Stack>
+        </div>
+      </Popover>
+    </>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  editButton: {
+    color: theme.palette.text.secondary,
+
+    "& .MuiSvgIcon-root": {
+      width: theme.spacing(2),
+      height: theme.spacing(2),
+      position: "relative",
+      top: -2, // Align the pencil square
+    },
+
+    "&:hover": {
+      color: theme.palette.text.primary,
+      backgroundColor: "transparent",
+    },
+  },
+  popoverPaper: {
+    width: theme.spacing(45),
+    marginTop: theme.spacing(1),
+    background: theme.palette.background.paperLight,
+  },
+  fieldset: {
+    border: 0,
+    margin: 0,
+    padding: 0,
+
+    "&:disabled": {
+      opacity: 0.5,
+    },
+  },
+  options: {
+    padding: theme.spacing(3),
+  },
+  option: {
+    cursor: "pointer",
+  },
+  checkbox: {
+    padding: 0,
+    position: "relative",
+    top: 1, // Alignment
+
+    "& svg": {
+      width: theme.spacing(2.5),
+      height: theme.spacing(2.5),
+    },
+  },
+  optionDescription: {
+    fontSize: 12,
+    color: theme.palette.text.secondary,
+  },
+  footer: {
+    padding: theme.spacing(3),
+    backgroundColor: theme.palette.background.paper,
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
+  userIcon: {
+    width: theme.spacing(2.5), // Same as the checkbox
+    height: theme.spacing(2.5),
+    color: theme.palette.primary.main,
+  },
+}))
diff --git a/site/src/components/Icons/EditSquare.tsx b/site/src/components/Icons/EditSquare.tsx
@@ -0,0 +1,7 @@
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+
+export const EditSquare = (props: SvgIconProps): JSX.Element => (
+  <SvgIcon {...props} viewBox="0 0 48 48">
+    <path d="M9 47.4q-1.2 0-2.1-.9-.9-.9-.9-2.1v-30q0-1.2.9-2.1.9-.9 2.1-.9h20.25l-3 3H9v30h30V27l3-3v20.4q0 1.2-.9 2.1-.9.9-2.1.9Zm15-18Zm9.1-17.6 2.15 2.1L21 28.1v4.3h4.25l14.3-14.3 2.1 2.1L26.5 35.4H18v-8.5Zm8.55 8.4-8.55-8.4 5-5q.85-.85 2.125-.85t2.125.9l4.2 4.25q.85.9.85 2.125t-.9 2.075Z" />
+  </SvgIcon>
+)
diff --git a/site/src/components/RoleSelect/RoleSelect.stories.tsx b/site/src/components/RoleSelect/RoleSelect.stories.tsx
diff --git a/site/src/components/RoleSelect/RoleSelect.test.tsx b/site/src/components/RoleSelect/RoleSelect.test.tsx