hydrate perms on modal

dashboard/src/components/porter/Expandable.tsx

@@ -6,6 +6,7 @@ type Props = {
   children: React.ReactNode;
   style?: React.CSSProperties;
   preExpanded?: boolean;
+  alt?: boolean;
 };
 
 // TODO: support footer for consolidation w/ app services
@@ -13,26 +14,42 @@ const Expandable: React.FC<Props> = ({
   header,
   children,
   style,
-  preExpanded
+  preExpanded,
+  alt,
 }) => {
   const [isExpanded, setIsExpanded] = useState(preExpanded || false);
 
+  if (alt) {
+    return (
+      <StyledExpandable style={style}>
+        <AltHeader
+          isExpanded={isExpanded}
+          onClick={() => {
+            setIsExpanded(!isExpanded);
+          }}
+        >
+          <span className="material-icons dropdown">arrow_drop_down</span>
+          {header}
+        </AltHeader>
+        <AltExpandedContents isExpanded={isExpanded}>
+          {children}
+        </AltExpandedContents>
+      </StyledExpandable>
+    );
+  }
+
   return (
     <StyledExpandable style={style}>
       <Header
         isExpanded={isExpanded}
-        onClick={() => { setIsExpanded(!isExpanded) }}
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
       >
-        <span className="material-icons dropdown">
-          arrow_drop_down
-        </span>
-        <FullWidth>
-          {header}
-        </FullWidth>
+        <span className="material-icons dropdown">arrow_drop_down</span>
+        <FullWidth>{header}</FullWidth>
       </Header>
-      <ExpandedContents isExpanded={isExpanded}>
-        {children}
-      </ExpandedContents>
+      <ExpandedContents isExpanded={isExpanded}>{children}</ExpandedContents>
     </StyledExpandable>
   );
 };
@@ -42,8 +59,8 @@ export default Expandable;
 const ExpandedContents = styled.div<{ isExpanded: boolean }>`
   transition: all 0.5s;
   overflow: hidden;
-  max-height: ${({ isExpanded }) => isExpanded ? "500px" : "0"};
-  padding: ${({ isExpanded }) => isExpanded ? "20px" : "0"};
+  max-height: ${({ isExpanded }) => (isExpanded ? "500px" : "0")};
+  padding: ${({ isExpanded }) => (isExpanded ? "20px" : "0")};
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   background: ${(props) => props.theme.fg + "66"};
@@ -101,3 +118,45 @@ const Header = styled.div<{ isExpanded: boolean }>`
 const StyledExpandable = styled.div`
   transition: all 0.2s;
 `;
+
+const AltHeader = styled.div<{ isExpanded: boolean }>`
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: #aaaabbaa;
+  position: relative;
+  :hover {
+    color: ${(props) => props.theme.text.primary};
+  }
+
+  .dropdown {
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 20px;
+    margin-left: -5px;
+    margin-right: 8px;
+    transform: ${({ isExpanded }) => !isExpanded && "rotate(-90deg)"};
+  }
+
+  animation: fadeIn 0.3s 0s;
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const AltExpandedContents = styled.div<{ isExpanded: boolean }>`
+  transition: all 0.5s;
+  margin-left: 4px;
+  overflow: hidden;
+  max-height: ${({ isExpanded }) => (isExpanded ? "500px" : "0")};
+  padding-top: 10px;
+  padding-left: ${({ isExpanded }) => (isExpanded ? "18px" : "0")};
+  border-left: ${({ isExpanded }) => isExpanded && "1px solid #494b4f"};
+  color: ${(props) => props.theme.text.primary};
+`;

dashboard/src/components/porter/Modal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
 import { createPortal } from "react-dom";
+import styled from "styled-components";
 
 type Props = {
   closeModal?: () => void;
@@ -8,29 +8,23 @@ type Props = {
   width?: string;
 };
 
-const Modal: React.FC<Props> = ({
-  closeModal,
-  children,
-  width,
-}) => {
+const Modal: React.FC<Props> = ({ closeModal, children, width }) => {
   return (
     <>
-      {
-        createPortal(
-          <ModalWrapper>
-            <ModalBg onClick={closeModal} />
-            <StyledModal width={width}> 
-              {closeModal && (
-                <CloseButton onClick={closeModal}>
-                  <i className="material-icons">close</i>
-                </CloseButton>
-              )}
-              {children}
-            </StyledModal>
-          </ModalWrapper>,
-          document.body
-        )
-      }
+      {createPortal(
+        <ModalWrapper>
+          <ModalBg onClick={closeModal} />
+          <StyledModal width={width}>
+            {closeModal && (
+              <CloseButton onClick={closeModal}>
+                <i className="material-icons">close</i>
+              </CloseButton>
+            )}
+            {children}
+          </StyledModal>
+        </ModalWrapper>,
+        document.body
+      )}
     </>
   );
 };
@@ -103,7 +97,7 @@ const StyledModal = styled.div<{
   border-radius: 10px;
   border: 1px solid #494b4f;
   font-size: 13px;
-  width: ${props => props.width || "600px"};
+  width: ${(props) => props.width || "600px"};
   background: #42444933;
   backdrop-filter: saturate(150%) blur(8px);
 
@@ -118,4 +112,4 @@ const StyledModal = styled.div<{
       transform: translateY(0px);
     }
   }
-`;
+`;

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -46,6 +46,7 @@ const InvitePage: React.FunctionComponent<Props> = ({}) => {
   const [roleList, setRoleList] = useState([]);
   const [isInvalidEmail, setIsInvalidEmail] = useState(false);
   const [isHTTPS] = useState(() => window.location.protocol === "https:");
+  const [showNewGroupModal, setShowNewGroupModal] = useState(false);
 
   useEffect(() => {
     api
@@ -428,15 +429,192 @@ const InvitePage: React.FunctionComponent<Props> = ({}) => {
           <>
             <Heading isAtTop={true}>Permission groups</Heading>
             <Helper>Manage permission groups for your organization.</Helper>
-            <PermissionGroup name="Admin" />
-            <PermissionGroup name="Developer" />
-            <PermissionGroup name="Viewer" />
+            <PermissionGroup
+              name="Admin"
+              permissions={{
+                applications: {
+                  read: true,
+                  write: true,
+                  create: true,
+                  delete: true,
+                  tabs: {
+                    notifications: true,
+                    activity: true,
+                    overview: true,
+                    logs: true,
+                    metrics: true,
+                    environment: true,
+                    build_settings: true,
+                    settings: true,
+                  },
+                  actions: {
+                    app_rollbacks: true,
+                  },
+                },
+                datastores: {
+                  read: true,
+                  write: true,
+                  create: true,
+                  delete: true,
+                  tabs: {
+                    connection_info: true,
+                    connected_apps: true,
+                    configuration: true,
+                    settings: true,
+                  },
+                },
+                addOns: {
+                  read: true,
+                  write: true,
+                  create: true,
+                  delete: true,
+                },
+                envGroups: {
+                  read: true,
+                  write: true,
+                  create: true,
+                  delete: true,
+                  tabs: {
+                    environment_variables: true,
+                    synced_applications: true,
+                    settings: true,
+                  },
+                },
+                previewEnvironments: {
+                  read: true,
+                  manage: true,
+                  tabs: {
+                    app_services: true,
+                    environment_variables: true,
+                    required_apps: true,
+                    add_ons: true,
+                  },
+                },
+                integrations: {
+                  read: true,
+                  manage: true,
+                },
+              }}
+            />
+            <PermissionGroup
+              name="Developer"
+              permissions={{
+                applications: {
+                  read: true,
+                  write: true,
+                  tabs: {
+                    notifications: true,
+                    activity: true,
+                    overview: true,
+                    logs: true,
+                    metrics: true,
+                    environment: true,
+                  },
+                  actions: {
+                    app_rollbacks: true,
+                  },
+                },
+                datastores: {
+                  read: true,
+                  write: true,
+                  tabs: {
+                    connection_info: true,
+                    connected_apps: true,
+                    configuration: true,
+                  },
+                },
+                addOns: {
+                  read: true,
+                  write: true,
+                },
+                envGroups: {
+                  read: true,
+                  write: true,
+                  tabs: {
+                    environment_variables: true,
+                    synced_applications: true,
+                  },
+                },
+                previewEnvironments: {
+                  read: true,
+                  tabs: {
+                    app_services: true,
+                    environment_variables: true,
+                    required_apps: true,
+                    add_ons: true,
+                  },
+                },
+                integrations: {
+                  read: true,
+                },
+              }}
+            />
+            <PermissionGroup
+              name="Viewer"
+              permissions={{
+                applications: {
+                  read: true,
+                  tabs: {
+                    notifications: true,
+                    activity: true,
+                    overview: true,
+                    logs: true,
+                    metrics: true,
+                    environment: true,
+                  },
+                },
+                datastores: {
+                  read: true,
+                  tabs: {
+                    connection_info: true,
+                    connected_apps: true,
+                    configuration: true,
+                  },
+                },
+                addOns: {
+                  read: true,
+                },
+                envGroups: {
+                  read: true,
+                  tabs: {
+                    environment_variables: true,
+                    synced_applications: true,
+                  },
+                },
+                previewEnvironments: {
+                  read: true,
+                  tabs: {
+                    app_services: true,
+                    environment_variables: true,
+                    required_apps: true,
+                    add_ons: true,
+                  },
+                },
+                integrations: {
+                  read: true,
+                },
+              }}
+            />
             <Spacer y={0.4} />
-            <Button alt>
+            <Button
+              alt
+              onClick={() => {
+                setShowNewGroupModal(true);
+              }}
+            >
               <I className="material-icons">add</I>
               New group
             </Button>
             <Spacer y={1.7} />
+            {showNewGroupModal && (
+              <RoleModal
+                name=""
+                readOnly={false}
+                closeModal={() => {
+                  setShowNewGroupModal(false);
+                }}
+              />
+            )}
           </>
         )}
         <Heading isAtTop={true}>Share project</Heading>

dashboard/src/main/home/project-settings/PermissionGroup.tsx

@@ -7,9 +7,13 @@ import RoleModal from "./RoleModal";
 
 type PermissionGroupProps = {
   name: string;
+  permissions?: any;
 };
 
-const PermissionGroup: React.FC<PermissionGroupProps> = ({ name }) => {
+const PermissionGroup: React.FC<PermissionGroupProps> = ({
+  name,
+  permissions,
+}) => {
   const [showModal, setShowModal] = useState(false);
 
   return (
@@ -24,6 +28,8 @@ const PermissionGroup: React.FC<PermissionGroupProps> = ({ name }) => {
       {showModal && (
         <RoleModal
           name={name}
+          permissions={permissions}
+          readOnly={true}
           closeModal={() => {
             setShowModal(false);
           }}

dashboard/src/main/home/project-settings/RoleModal.tsx

@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
+import styled from "styled-components";
 
+import Button from "components/porter/Button";
+import Checkbox from "components/porter/Checkbox";
 import Container from "components/porter/Container";
+import Expandable from "components/porter/Expandable";
 import Image from "components/porter/Image";
 import Input from "components/porter/Input";
 import Modal from "components/porter/Modal";
@@ -10,28 +14,414 @@ import Text from "components/porter/Text";
 import role from "assets/role.svg";
 
 type RoleModalProps = {
+  readOnly?: boolean;
   name: string;
   closeModal: () => void;
+  permissions?: any;
 };
 
-const RoleModal: React.FC<RoleModalProps> = ({ name, closeModal }) => {
+const RoleModal: React.FC<RoleModalProps> = ({
+  name,
+  closeModal,
+  readOnly,
+  permissions,
+}) => {
+  const [inputName, setInputName] = useState(name);
+  const [perms, setPerms] = useState(permissions);
   return (
     <Modal closeModal={closeModal} width={"800px"}>
       <Container row>
-        <Image src={role} />
+        <Image size={18} src={role} />
         <Spacer inline x={1} />
         <Text size={16}>Configure role</Text>
       </Container>
       <Spacer y={1} />
+      <Text color="helper">Role name</Text>
+      <Spacer y={0.5} />
       <Input
-        placeholder="ex: admin"
+        disabled={readOnly}
+        placeholder="ex: Porter Developer"
         width="300px"
-        value={name}
-        setValue={() => {}}
+        value={inputName}
+        setValue={setInputName}
       />
       <Spacer y={1} />
+      <Text color="helper">Manage permissions for this role:</Text>
+      <Spacer y={1} />
+      <ScrollWrapper>
+        <Expandable alt preExpanded header={<>Applications</>}>
+          <Expandable alt preExpanded header={<>All applications</>}>
+            <Checkbox
+              checked={perms?.applications.read}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Read
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.applications.write}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Write
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.applications.create}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Create
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.applications.delete}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Delete
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Expandable alt preExpanded header={<>Tabs</>}>
+              <Checkbox
+                checked={perms?.applications.tabs.notifications}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Notifications
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.applications.tabs.activity}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Activity
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.applications.tabs.overview}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Overview
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.applications.tabs.logs}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Logs
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.applications.tabs.metrics}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Metrics
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.applications.tabs.environment}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Environment
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.applications.tabs.build_settings}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Build settings
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.applications.tabs.settings}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Settings
+              </Checkbox>
+              <Spacer y={0.5} />
+            </Expandable>
+            <Expandable alt preExpanded header={<>Actions</>}>
+              <Checkbox
+                checked={perms?.applications.actions?.app_rollbacks}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                App rollbacks
+              </Checkbox>
+              <Spacer y={0.5} />
+            </Expandable>
+          </Expandable>
+        </Expandable>
+
+        <Expandable alt preExpanded header={<>Datastores</>}>
+          <Expandable alt preExpanded header={<>All datastores</>}>
+            <Checkbox
+              checked={perms?.datastores.read}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Read
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.datastores.write}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Write
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.datastores.create}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Create
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.datastores.delete}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Delete
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Expandable alt preExpanded header={<>Tabs</>}>
+              <Checkbox
+                checked={perms?.datastores.tabs.connection_info}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Connection info
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.datastores.tabs.connected_apps}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Connected apps
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.datastores.tabs.configuration}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Configuration
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.datastores.tabs.settings}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Settings
+              </Checkbox>
+              <Spacer y={0.5} />
+            </Expandable>
+          </Expandable>
+        </Expandable>
+
+        <Expandable alt preExpanded header={<>Add-ons</>}>
+          <Expandable alt preExpanded header={<>All add-ons</>}>
+            <Checkbox
+              checked={perms?.addOns.read}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Read
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.addOns.write}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Write
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.addOns.create}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Create
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.addOns.delete}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Delete
+            </Checkbox>
+            <Spacer y={0.5} />
+          </Expandable>
+        </Expandable>
+
+        <Expandable alt preExpanded header={<>Env groups</>}>
+          <Expandable alt preExpanded header={<>All env groups</>}>
+            <Checkbox
+              checked={perms?.envGroups.read}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Read
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.envGroups.write}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Write
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.envGroups.create}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Create
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.envGroups.delete}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Delete
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Expandable alt preExpanded header={<>Tabs</>}>
+              <Checkbox
+                checked={perms?.envGroups.tabs.environment_variables}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Environment variables
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.envGroups.tabs.synced_applications}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Synced applications
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.envGroups.tabs.settings}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Settings
+              </Checkbox>
+              <Spacer y={0.5} />
+            </Expandable>
+          </Expandable>
+        </Expandable>
+
+        <Expandable alt preExpanded header={<>Preview environments</>}>
+          <Expandable alt preExpanded header={<>All preview environments</>}>
+            <Checkbox
+              checked={perms?.previewEnvironments.read}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Read
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.previewEnvironments.manage}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Manage
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Expandable alt preExpanded header={<>Tabs</>}>
+              <Checkbox
+                checked={perms?.previewEnvironments.tabs.app_services}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                App services
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.previewEnvironments.tabs.environment_variables}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Environment variables
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.previewEnvironments.tabs.required_apps}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Required apps
+              </Checkbox>
+              <Spacer y={0.5} />
+              <Checkbox
+                checked={perms?.previewEnvironments.tabs.add_ons}
+                toggleChecked={() => {}}
+                disabled={readOnly}
+              >
+                Add-ons
+              </Checkbox>
+              <Spacer y={0.5} />
+            </Expandable>
+          </Expandable>
+        </Expandable>
+
+        <Expandable alt preExpanded header={<>Integrations</>}>
+          <Expandable alt preExpanded header={<>All integrations</>}>
+            <Checkbox
+              checked={perms?.integrations.read}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Read
+            </Checkbox>
+            <Spacer y={0.5} />
+            <Checkbox
+              checked={perms?.integrations.manage}
+              toggleChecked={() => {}}
+              disabled={readOnly}
+            >
+              Manage
+            </Checkbox>
+            <Spacer y={0.5} />
+          </Expandable>
+        </Expandable>
+      </ScrollWrapper>
+      {!readOnly && (
+        <>
+          <Spacer y={1} />
+          <Button>Create role</Button>
+        </>
+      )}
     </Modal>
   );
 };
 
 export default RoleModal;
+
+const ScrollWrapper = styled.div`
+  overflow-y: auto;
+  max-height: calc(100vh - 360px);
+`;