clone env group

dashboard/src/components/form-components/InputRow.tsx

@@ -121,7 +121,7 @@ const Input = styled.input<{ disabled: boolean; width: string }>`
   font-size: 13px;
   background: #ffffff11;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "")};
-  width: ${(props) => (props.width ? props.width : "270px")};
+  width: ${(props) => (props.width ? props.width : "100%")};
   color: ${(props) => (props.disabled ? "#ffffff44" : "white")};
   padding: 5px 10px;
   height: 35px;

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

@@ -402,6 +402,7 @@ export const ExpandedEnvGroupFC = ({
       default:
         return (
           <EnvGroupSettings
+            namespace={namespace}
             envGroup={currentEnvGroup}
             handleDeleteEnvGroup={handleDeleteEnvGroup}
           />
@@ -515,12 +516,16 @@ const EnvGroupVariablesEditor = ({
 const EnvGroupSettings = ({
   envGroup,
   handleDeleteEnvGroup,
+  namespace,
 }: {
-  envGroup: EditableEnvGroup;
+  envGroup: EditableEnvGroup ;
   handleDeleteEnvGroup: () => void;
+  namespace?: string;
 }) => {
-  const { setCurrentOverlay } = useContext(Context);
+  const { setCurrentOverlay, currentProject, currentCluster } = useContext(Context);
   const [isAuthorized] = useAuth();
+  const [name, setName] = useState(null);
+  const [cloneNamespace, setCloneNamespace] = useState(null);
 
   const canDelete = useMemo(() => {
     // add a case for when applications is null - in this case this is a deprecated env group version
@@ -531,6 +536,29 @@ const EnvGroupSettings = ({
     return envGroup?.applications?.length === 0;
   }, [envGroup]);
 
+  const cloneEnvGroup = async () => {
+    try {
+      await api.cloneEnvGroup(
+        "<token>",
+        {
+          name: envGroup.name,
+          namespace: cloneNamespace,
+          clone_name: name,
+          version: envGroup.version,
+        },
+        {
+          id: currentProject.id,
+          cluster_id: currentCluster.id,
+          namespace: namespace,
+        }
+      )
+    } catch (error) {
+      console.log(error);
+    } finally {
+      alert("cloned!")
+    }
+  };
+
   return (
     <TabWrapper>
       {isAuthorized("env_group", "", ["get", "delete"]) && (
@@ -573,7 +601,6 @@ const EnvGroupSettings = ({
               applications to delete.
             </Helper>
           )}
-
           <Button
             color="#b91133"
             onClick={() => {
@@ -587,6 +614,30 @@ const EnvGroupSettings = ({
           >
             Delete {envGroup.name}
           </Button>
+
+          <Heading>Clone Environment Group</Heading>
+          <Helper>
+            Clone this set of environment variables into a new env group.
+          </Helper>
+          <InputRow
+            type="string"
+            value={name}
+            setValue={(x: string) => setName(x)}
+            label="Env group name"
+            placeholder="ex: my-cloned-env-group"
+          />
+          <InputRow
+            type="string"
+            value={cloneNamespace}
+            setValue={(x: string) => setCloneNamespace(x)}
+            label="Env group namespace"
+            placeholder="ex: default"
+          />
+          <Button
+            onClick={cloneEnvGroup}
+          >
+            Clone {envGroup.name}
+          </Button>
         </InnerWrapper>
       )}
     </TabWrapper>

dashboard/src/shared/api.tsx

@@ -1384,6 +1384,22 @@ const createEnvGroup = baseApi<
   return `/api/projects/${pathParams.id}/clusters/${pathParams.cluster_id}/namespaces/${pathParams.namespace}/envgroup/create`;
 });
 
+const cloneEnvGroup = baseApi<
+  {
+    name: string;
+    namespace: string;
+    clone_name: string;
+    version: number;
+  },
+  {
+    id: number;
+    namespace: string;
+    cluster_id: number;
+  }
+>("POST", (pathParams) => {
+  return `/api/projects/${pathParams.id}/clusters/${pathParams.cluster_id}/namespaces/${pathParams.namespace}/envgroup/clone`;
+});
+
 const updateEnvGroup = baseApi<
   {
     name: string;
@@ -2324,6 +2340,7 @@ export default {
   getLogBucketLogs,
   getCanCreateProject,
   createEnvGroup,
+  cloneEnvGroup,
   updateEnvGroup,
   listEnvGroups,
   getEnvGroup,