Fe perm (#4412)

porter-dev · Mar 15, 2024 · d53022c · d53022c
1 parent 52e0860
commit d53022c
Show file tree

Hide file tree

Showing 12 changed files with 959 additions and 166 deletions.
diff --git a/api/types/project.go b/api/types/project.go
@@ -24,6 +24,7 @@ type ProjectList struct {
 	ValidateApplyV2        bool   `json:"validate_apply_v2"`
 	AdvancedInfraEnabled   bool   `json:"advanced_infra_enabled"`
 	SandboxEnabled         bool   `json:"sandbox_enabled"`
+	AdvancedRbacEnabled    bool   `json:"advanced_rbac_enabled"`
 }
 
 // Project type for entries in api responses for everything other than `GET /projects`
@@ -54,6 +55,7 @@ type Project struct {
 	ManagedDeploymentTargetsEnabled bool    `json:"managed_deployment_targets_enabled"`
 	AdvancedInfraEnabled            bool    `json:"advanced_infra_enabled"`
 	SandboxEnabled                  bool    `json:"sandbox_enabled"`
+	AdvancedRbacEnabled             bool    `json:"advanced_rbac_enabled"`
 }
 
 // FeatureFlags is a struct that contains old feature flag representations
@@ -74,6 +76,7 @@ type FeatureFlags struct {
 	StacksEnabled                   string `json:"stacks_enabled,omitempty"`
 	ValidateApplyV2                 bool   `json:"validate_apply_v2"`
 	ManagedDeploymentTargetsEnabled bool   `json:"managed_deployment_targets_enabled"`
+	AdvancedRbacEnabled             bool   `json:"advanced_rbac_enabled"`
 }
 
 // CreateProjectRequest is a struct that contains the information

diff --git a/dashboard/src/assets/role.svg b/dashboard/src/assets/role.svg
diff --git a/dashboard/src/components/porter/Back.tsx b/dashboard/src/components/porter/Back.tsx
@@ -1,20 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 
 import leftArrow from "assets/left-arrow.svg";
-import Text from "./Text";
+
 import Container from "./Container";
-import { Link } from "react-router-dom";
 
 type Props = {
   to?: string;
   onClick?: () => void;
 };
 
-const Back: React.FC<Props> = ({
-  to,
-  onClick,
-}) => {
+const Back: React.FC<Props> = ({ to, onClick }) => {
   return (
     <Container row>
       {to ? (
@@ -57,17 +54,17 @@ const BackLink = styled(Link)`
 `;
 
 const StyledBack = styled.div`
-color: #aaaabb88;
-font-size: 13px;
-margin-bottom: 15px;
-display: flex;
-margin-top: -10px;
-z-index: 999;
-padding: 5px;
-padding-right: 7px;
-border-radius: 5px;
-cursor: pointer;
-:hover {
-  background: #ffffff11;
-}
-`;
+  color: #aaaabb88;
+  font-size: 13px;
+  margin-bottom: 15px;
+  display: flex;
+  margin-top: -10px;
+  z-index: 999;
+  padding: 5px;
+  padding-right: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;
diff --git a/dashboard/src/components/porter/Expandable.tsx b/dashboard/src/components/porter/Expandable.tsx
@@ -6,33 +6,50 @@ type Props = {
   children: React.ReactNode;
   style?: React.CSSProperties;
   preExpanded?: boolean;
+  alt?: boolean;
 };
 
 // TODO: support footer for consolidation w/ app services
 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};
+`;
diff --git a/dashboard/src/components/porter/Modal.tsx b/dashboard/src/components/porter/Modal.tsx
@@ -1,36 +1,30 @@
 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;
   children: React.ReactNode;
   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);
     }
   }
-`;
+`;
diff --git a/dashboard/src/main/home/app-dashboard/expanded-app/status/LogsModal.tsx b/dashboard/src/main/home/app-dashboard/expanded-app/status/LogsModal.tsx
@@ -1,40 +1,50 @@
 import React, { useEffect, useRef } from "react";
+
 import Modal from "components/porter/Modal";
-import TitleSection from "components/TitleSection";
 import Text from "components/porter/Text";
+import TitleSection from "components/TitleSection";
+
 import danger from "assets/danger.svg";
 
+import { type PorterLog } from "../logs/types";
 import ExpandedIncidentLogs from "./ExpandedIncidentLogs";
-import { PorterLog } from "../logs/types";
 
-interface LogsModalProps {
-    logs: PorterLog[];
-    setModalVisible: (x: boolean) => void;
-    logsName: string;
-}
-const LogsModal: React.FC<LogsModalProps> = ({ logs, logsName, setModalVisible }) => {
-    const scrollToBottomRef = useRef<HTMLDivElement>(null);
-    const scrollToBottom = () => {
-        if (scrollToBottomRef.current) {
-            scrollToBottomRef.current.scrollIntoView({
-                behavior: "smooth",
-                block: "end",
-            });
-        }
+type LogsModalProps = {
+  logs: PorterLog[];
+  setModalVisible: (x: boolean) => void;
+  logsName: string;
+};
+const LogsModal: React.FC<LogsModalProps> = ({
+  logs,
+  logsName,
+  setModalVisible,
+}) => {
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const scrollToBottom = () => {
+    if (scrollToBottomRef.current) {
+      scrollToBottomRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end",
+      });
     }
-    useEffect(() => {
-        scrollToBottom();
-    }, [scrollToBottomRef]);
-
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [scrollToBottomRef]);
 
-    return (
-        <Modal closeModal={() => setModalVisible(false)} width={"800px"}>
-            <TitleSection icon={danger}>
-                <Text size={16}>Logs for {logsName}</Text>
-            </TitleSection>
-            <ExpandedIncidentLogs logs={logs} />
-        </Modal>
-    );
+  return (
+    <Modal
+      closeModal={() => {
+        setModalVisible(false);
+      }}
+      width={"800px"}
+    >
+      <TitleSection icon={danger}>
+        <Text size={16}>Logs for {logsName}</Text>
+      </TitleSection>
+      <ExpandedIncidentLogs logs={logs} />
+    </Modal>
+  );
 };
 
-export default LogsModal;
+export default LogsModal;