env loader form yaml object

dashboard/src/components/values-form/KeyValueArray.tsx

@@ -13,6 +13,7 @@ type PropsType = {
   disabled?: boolean;
   namespace?: string;
   clusterId?: number;
+  envLoader?: boolean;
 };
 
 type StateType = {
@@ -118,7 +119,7 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
         <Modal
           onRequestClose={() => this.setState({ showEnvModal: false })}
           width="665px"
-          height="332px"
+          height="342px"
         >
           <LoadEnvGroupModal
             namespace={this.props.namespace}
@@ -153,7 +154,7 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
                 <i className="material-icons">add</i> Add Row
               </AddRowButton>
               <Spacer />
-              {this.props.namespace && (
+              {this.props.namespace && this.props.envLoader && (
                 <LoadButton
                   onClick={() =>
                     this.setState({ showEnvModal: !this.state.showEnvModal })
@@ -236,7 +237,7 @@ const LoadButton = styled(AddRowButton)`
   }
   > img {
     width: 14px;
-    margin-left: 8px;
+    margin-left: 10px;
     margin-right: 12px;
   }
 `;

dashboard/src/components/values-form/ValuesForm.tsx

@@ -76,6 +76,29 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               label={item.label}
             />
           );
+        case "env-key-value-array":
+          return (
+            <KeyValueArray
+              key={i}
+              envLoader={true}
+              namespace={this.props.namespace}
+              clusterId={this.props.clusterId}
+              values={this.props.metaState[key]}
+              setValues={(x: any) => {
+                this.props.setMetaState({ [key]: x });
+
+                // Need to pull env vars out of form.yaml for createGHA build env vars
+                if (
+                  this.props.handleEnvChange &&
+                  key === "container.env.normal"
+                ) {
+                  this.props.handleEnvChange(x);
+                }
+              }}
+              label={item.label}
+              disabled={this.props.disabled}
+            />
+          );
         case "key-value-array":
           return (
             <KeyValueArray

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

@@ -47,11 +47,31 @@ export default class EnvGroupList extends Component<PropsType, StateType> {
         }
       )
       .then((res) => {
-        this.setState({
-          envGroups: res?.data?.items as any,
-          loading: false,
-        });
-        console.log(res.data.items);
+        let sortedGroups = res?.data?.items;
+        switch (this.props.sortType) {
+          case "Oldest":
+            sortedGroups.sort((a: any, b: any) =>
+              Date.parse(a.metadata.creationTimestamp) >
+              Date.parse(b.metadata.creationTimestamp)
+                ? 1
+                : -1
+            );
+            break;
+          case "Alphabetical":
+            sortedGroups.sort((a: any, b: any) =>
+              a.metadata.name > b.metadata.name ? 1 : -1
+            );
+            console.log(sortedGroups);
+            break;
+          default:
+            sortedGroups.sort((a: any, b: any) =>
+              Date.parse(a.metadata.creationTimestamp) >
+              Date.parse(b.metadata.creationTimestamp)
+                ? -1
+                : 1
+            );
+        }
+        this.setState({ envGroups: sortedGroups, loading: false });
       })
       .catch((err) => {
         this.setState({ loading: false, error: true });

dashboard/src/main/home/modals/LoadEnvGroupModal.tsx

@@ -76,7 +76,8 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
     } else if (this.state.envGroups.length === 0) {
       return (
         <Placeholder>
-          No environment groups found in this namespace ({this.props.namespace}).
+          No environment groups found in this namespace ({this.props.namespace}
+          ).
         </Placeholder>
       );
     } else {
@@ -114,7 +115,11 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
         <SaveButton
           disabled={!this.state.selectedEnvGroup}
           text="Load Selected Env Group"
-          status={!this.state.selectedEnvGroup ? "No env group selected" : ""}
+          status={
+            !this.state.selectedEnvGroup
+              ? "No env group selected"
+              : "Existing env variables will be overidden"
+          }
           onClick={this.onSubmit}
         />
       </StyledLoadEnvGroupModal>
@@ -170,7 +175,7 @@ const EnvGroupList = styled.div`
   border-radius: 3px;
   background: #ffffff11;
   border: 1px solid #ffffff44;
-  max-height: 150px;
+  max-height: 160px;
   overflow-y: auto;
 `;
 

dashboard/src/main/home/provisioner/DOFormSection.tsx

@@ -35,7 +35,6 @@ const provisionOptions = [
 
 const tierOptions = [
   { value: "basic", label: "Basic" },
-  { value: "starter", label: "Starter" },
   { value: "professional", label: "Professional" },
 ];
 
@@ -56,7 +55,7 @@ const regionOptions = [
 export default class DOFormSection extends Component<PropsType, StateType> {
   state = {
     selectedInfras: [...provisionOptions],
-    subscriptionTier: "starter",
+    subscriptionTier: "basic",
     doRegion: "nyc1",
     provisionConfirmed: false,
   };