handle clone env status

dashboard/src/components/porter-form/FormDebugger.tsx

@@ -410,7 +410,7 @@ tabs:
   - name: env_vars
     contents:
     - type: heading
-      label: Environment Variables
+      label: Environment variables
     - type: subtitle
       label: Set environment variables for your secrets and environment-specific configuration.
     - type: env-key-value-array

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

@@ -193,7 +193,7 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
             />
           </DestinationSection>
 
-          <Heading>Environment Variables</Heading>
+          <Heading>Environment variables</Heading>
           <Helper>
             Set environment variables for your secrets and environment-specific
             configuration.

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -91,7 +91,7 @@ export const ExpandedEnvGroupFC = ({
 
   const tabOptions = useMemo(() => {
     if (!isAuthorized("env_group", "", ["get", "delete"])) {
-      return [{ value: "variables-editor", label: "Environment Variables" }];
+      return [{ value: "variables-editor", label: "Environment variables" }];
     }
 
     if (
@@ -99,21 +99,21 @@ export const ExpandedEnvGroupFC = ({
       currentEnvGroup?.applications?.length
     ) {
       return [
-        { value: "variables-editor", label: "Environment Variables" },
-        { value: "applications", label: "Linked Applications" },
+        { value: "variables-editor", label: "Environment variables" },
+        { value: "applications", label: "Linked applications" },
       ];
     }
 
     if (currentEnvGroup?.applications?.length) {
       return [
-        { value: "variables-editor", label: "Environment Variables" },
-        { value: "applications", label: "Linked Applications" },
+        { value: "variables-editor", label: "Environment variables" },
+        { value: "applications", label: "Linked applications" },
         { value: "settings", label: "Settings" },
       ];
     }
 
     return [
-      { value: "variables-editor", label: "Environment Variables" },
+      { value: "variables-editor", label: "Environment variables" },
       { value: "settings", label: "Settings" },
     ];
   }, [currentEnvGroup]);
@@ -479,7 +479,7 @@ const EnvGroupVariablesEditor = ({
   return (
     <TabWrapper>
       <InnerWrapper>
-        <Heading>Environment Variables</Heading>
+        <Heading>Environment variables</Heading>
         <Helper>
           Set environment variables for your secrets and environment-specific
           configuration.
@@ -522,12 +522,13 @@ const EnvGroupSettings = ({
   handleDeleteEnvGroup: () => void;
   namespace?: string;
 }) => {
-  const { setCurrentOverlay, currentProject, currentCluster } = useContext(
+  const { setCurrentOverlay, currentProject, currentCluster, setCurrentError } = useContext(
     Context
   );
   const [isAuthorized] = useAuth();
   const [name, setName] = useState(null);
   const [cloneNamespace, setCloneNamespace] = useState(null);
+  const [cloneSuccess, setCloneSuccess] = useState(false);
 
   const canDelete = useMemo(() => {
     // add a case for when applications is null - in this case this is a deprecated env group version
@@ -539,6 +540,7 @@ const EnvGroupSettings = ({
   }, [envGroup]);
 
   const cloneEnvGroup = async () => {
+    setCloneSuccess(false);
     try {
       await api.cloneEnvGroup(
         "<token>",
@@ -554,10 +556,10 @@ const EnvGroupSettings = ({
           namespace: namespace,
         }
       );
+      setCloneSuccess(true);
     } catch (error) {
       console.log(error);
-    } finally {
-      alert("cloned!");
+      setCurrentError(error);
     }
   };
 
@@ -591,7 +593,7 @@ const EnvGroupSettings = ({
 
                 <DarkMatter /> */}
 
-          <Heading>Manage Environment Group</Heading>
+          <Heading>Manage environment group</Heading>
           <Helper>
             Permanently delete this set of environment variables. This action
             cannot be undone.
@@ -616,8 +618,8 @@ const EnvGroupSettings = ({
           >
             Delete {envGroup.name}
           </Button>
-
-          <Heading>Clone Environment Group</Heading>
+          <DarkMatter />
+          <Heading>Clone environment group</Heading>
           <Helper>
             Clone this set of environment variables into a new env group.
           </Helper>
@@ -625,17 +627,29 @@ const EnvGroupSettings = ({
             type="string"
             value={name}
             setValue={(x: string) => setName(x)}
-            label="Env group name"
+            label="New env group name"
             placeholder="ex: my-cloned-env-group"
           />
           <InputRow
             type="string"
             value={cloneNamespace}
             setValue={(x: string) => setCloneNamespace(x)}
-            label="Env group namespace"
+            label="New env group namespace"
             placeholder="ex: default"
           />
-          <Button onClick={cloneEnvGroup}>Clone {envGroup.name}</Button>
+          <FlexAlt>
+            <Button onClick={cloneEnvGroup}>Clone {envGroup.name}</Button>
+            {
+              cloneSuccess && (
+                <StatusWrapper position="right" successful={true}>
+                  <i className="material-icons">done</i>
+                  <StatusTextWrapper>
+                  Successfully cloned 
+                  </StatusTextWrapper>
+                </StatusWrapper>
+              )
+            }
+          </FlexAlt>
         </InnerWrapper>
       )}
     </TabWrapper>
@@ -681,6 +695,65 @@ const ApplicationsList = ({ envGroup }: { envGroup: EditableEnvGroup }) => {
   );
 };
 
+const FlexAlt = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+`;
+
+const StatusTextWrapper = styled.p`
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 19px;
+  margin: 0;
+`;
+
+const StatusWrapper = styled.div<{
+  successful: boolean;
+  position: "right" | "left";
+}>`
+  display: flex;
+  align-items: center;
+  max-width: 170px;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #ffffff55;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 5px;
+  margin-bottom: 30px;
+  height: 35px;
+  margin-left: 15px;
+
+  > i {
+    font-size: 18px;
+    margin-right: 10px;
+    float: left;
+    color: ${(props) => (props.successful ? "#4797ff" : "#fcba03")};
+  }
+
+  animation-fill-mode: forwards;
+
+  @keyframes statusFloatIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+`;
+
+const DarkMatter = styled.div`
+  width: 100%;
+  height: 1px;
+  margin-top: -20px;
+`;
+
 const ArrowIcon = styled.img`
   width: 15px;
   margin-right: 8px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/build-settings/BuildSettingsTab.tsx

@@ -329,7 +329,7 @@ const BuildSettingsTab: React.FC<Props> = ({
           </AlertCardAction>
         </AlertCard>
       ) : null} */}
-        <Heading isAtTop>Build Environment Variables</Heading>
+        <Heading isAtTop>Build environment variables</Heading>
         <KeyValueArray
           values={envVariables}
           envLoader
@@ -342,7 +342,7 @@ const BuildSettingsTab: React.FC<Props> = ({
           }}
         ></KeyValueArray>
 
-        <Heading>Select Default Branch</Heading>
+        <Heading>Select default branch</Heading>
         <Helper>
           Change the default branch the deployments will be made from.
         </Helper>

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/ExpandedJobRun.tsx

@@ -181,7 +181,7 @@ const ExpandedJobRun = ({
             <KeyValueArray
               envLoader={true}
               values={envObject}
-              label="Environment Variables:"
+              label="Environment variables:"
               disabled={true}
             />
             <DarkMatter />

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobResource.tsx

@@ -201,7 +201,7 @@ export default class JobResource extends Component<PropsType, StateType> {
                 <KeyValueArray
                   envLoader={true}
                   values={envObject}
-                  label="Environment Variables:"
+                  label="Environment variables:"
                   disabled={true}
                 />
                 <DarkMatter />

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentDetail.tsx

@@ -128,7 +128,6 @@ const DeploymentDetail = () => {
         </Flex>
         <LinkToActionsWrapper></LinkToActionsWrapper>
       </HeaderWrapper>
-      <LineBreak />
       <ChartListWrapper>
         <ChartList
           currentCluster={context.currentCluster}

dashboard/src/main/home/cluster-dashboard/preview-environments/environments/EnvironmentsList.tsx

@@ -139,7 +139,6 @@ const Placeholder = styled.div`
 
 const FloatingPlaceholder = styled(Placeholder)`
   position: absolute;
-  background: #3d3f42;
   width: 100%;
   height: 100%;
   margin-top: 0px;

dashboard/src/main/home/cluster-dashboard/stacks/components/NewEnvGroupForm.tsx

@@ -103,7 +103,7 @@ const NewEnvGroupForm = (props: {
         width="100%"
       />
 
-      <Heading>Environment Variables</Heading>
+      <Heading>Environment variables</Heading>
       <Helper>
         Set environment variables for your secrets and environment-specific
         configuration.

docs/deploy/addons/strapi.md

@@ -12,7 +12,7 @@ This is a quick guide on how to deploy Strapi to a Kubernetes cluster in AWS/GCP
 
 ## Deploying PostgresDB
 1. Strapi instance deployed through Porter connects to PostgresDB. You can connect Strapi instance deployed on Porter to any external database, but it is also possible to use a database that is also deployed on Porter. Follow [this guide to deploy a PostgresDB instance to your cluster in one click](https://docs.getporter.dev/docs/postgresdb).
-2. After the database has been deployed, navigate to the **Environment Variables** tab of your deployed Strapi instance. Configure the following environment variables:
+2. After the database has been deployed, navigate to the **Environment variables** tab of your deployed Strapi instance. Configure the following environment variables:
 ```
 NODE_ENV=production
 DATABASE_HOST=