add status on create and overflow (#4265)

dashboard/src/components/porter/DashboardPlaceholder.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import placeholder from "assets/placeholder.svg";
@@ -10,8 +10,6 @@ type Props = {
 const DashboardPlaceholder: React.FC<Props> = ({
   children,
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
   return (
     <StyledDashboardPlaceholder>
       <Bg src={placeholder} />
@@ -35,8 +33,7 @@ const Bg = styled.img`
   z-index: 0;
 `;
 
-const StyledDashboardPlaceholder = styled.div<{
-}>`
+const StyledDashboardPlaceholder = styled.div`
   width: 100%;
   padding: 25px 30px;
   border-radius: 10px;

dashboard/src/components/porter/Expandable.tsx

@@ -50,6 +50,7 @@ const ExpandedContents = styled.div<{ isExpanded: boolean }>`
   color: ${(props) => props.theme.text.primary};
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+  overflow-y: auto;
 `;
 
 const FullWidth = styled.div`

dashboard/src/main/home/env-dashboard/CreateEnvGroup.tsx

@@ -143,7 +143,7 @@ const CreateEnvGroup: React.FC<RouteComponentProps> = ({ history }) => {
         }
       )
 
-      history.push(`/environment-groups/${data.name}/env-vars`);
+      history.push(`/environment-groups/${data.name}/env-vars?created=true`);
     } catch (err) {
       const errorMessage =
         axios.isAxiosError(err) && err.response?.data?.error

dashboard/src/main/home/env-dashboard/tabs/EnvVarsTab.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useMemo, useContext } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
+import styled from "styled-components";
 
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -26,6 +27,12 @@ type Props = {
 const EnvVarsTab: React.FC<Props> = ({ envGroup, fetchEnvGroup }) => {
   const { currentProject, currentCluster } = useContext(Context);
   const [buttonStatus, setButtonStatus] = useState<string | React.ReactNode>("");
+  const [wasCreated, setWasCreated] = useState(false);
+
+  useEffect(() => {
+    const created = new URLSearchParams(window.location.search).get("created")
+    setWasCreated(created === "true");
+  }, [])
 
   const envGroupFormMethods = useForm<EnvGroupFormData>({
     resolver: zodResolver(envGroupFormValidator),
@@ -191,6 +198,9 @@ const EnvVarsTab: React.FC<Props> = ({ envGroup, fetchEnvGroup }) => {
           <EnvGroupArray
             values={envVariables}
             setValues={(x) => {
+              if (wasCreated) {
+                setWasCreated(false);
+              }
               setValue("envVariables", x);
             }}
             fileUpload={true}
@@ -202,7 +212,14 @@ const EnvVarsTab: React.FC<Props> = ({ envGroup, fetchEnvGroup }) => {
               <Spacer y={1} />
               <Button
                 type="submit"
-                status={buttonStatus}
+                status={
+                  wasCreated ? (
+                    <StatusWrapper success={true}>
+                      <i className="material-icons">done</i>
+                      Successfully created
+                    </StatusWrapper>
+                  ) : buttonStatus
+                }
                 loadingText="Updating env group . . ."
                 disabled={!isValid}
               >
@@ -216,4 +233,23 @@ const EnvVarsTab: React.FC<Props> = ({ envGroup, fetchEnvGroup }) => {
   );
 };
 
-export default EnvVarsTab;
+export default EnvVarsTab;
+
+const StatusWrapper = styled.div<{
+  success?: boolean;
+}>`
+  display: flex;
+  line-height: 1.5;
+  align-items: center;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #ffffff55;
+  margin-left: 15px;
+  text-overflow: ellipsis;
+  > i {
+    font-size: 18px;
+    margin-right: 10px;
+    float: left;
+    color: ${(props) => (props.success ? "#4797ff" : "#fcba03")};
+  }
+`;