Merge branch 'master' of https://github.com/porter-dev/porter

dashboard/package-lock.json

@@ -2093,9 +2093,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "16.14.35",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.35.tgz",
-      "integrity": "sha512-NUEiwmSS1XXtmBcsm1NyRRPYjoZF2YTE89/5QiLt5mlGffYK9FQqOKuOLuXNrjPQV04oQgaZG+Yq02ZfHoFyyg==",
+      "version": "18.0.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
+      "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -2143,12 +2143,12 @@
       }
     },
     "@types/react-dom": {
-      "version": "16.9.18",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.18.tgz",
-      "integrity": "sha512-lmNARUX3+rNF/nmoAFqasG0jAA7q6MeGZK/fdeLwY3kAA4NPgHHrG5bNQe2B5xmD4B+x6Z6h0rEJQ7MEEgQxsw==",
+      "version": "18.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
+      "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
       "dev": true,
       "requires": {
-        "@types/react": "^16"
+        "@types/react": "*"
       }
     },
     "@types/react-modal": {
@@ -8271,13 +8271,11 @@
       }
     },
     "react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "loose-envify": "^1.1.0"
       }
     },
     "react-ace": {
@@ -8320,14 +8318,12 @@
       }
     },
     "react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.23.0"
       }
     },
     "react-error-boundary": {
@@ -8821,12 +8817,11 @@
       "dev": true
     },
     "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "schema-utils": {

dashboard/package.json

@@ -44,11 +44,11 @@
     "markdown-to-jsx": "^7.0.1",
     "qs": "^6.9.4",
     "random-word-slugs": "^0.1.6",
-    "react": "^16.14.0",
+    "react": "^18.0.0",
     "react-ace": "^8.0.0",
     "react-color": "^2.19.3",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.0.0",
     "react-error-boundary": "^3.1.3",
     "react-hot-toast": "^2.4.0",
     "react-infinite-scroll-component": "^6.1.0",
@@ -94,10 +94,10 @@
     "@types/material-ui": "^0.21.8",
     "@types/node": "^12.12.62",
     "@types/qs": "^6.9.5",
-    "@types/react": "^16.14.35",
+    "@types/react": "^18.0.0",
     "@types/react-color": "^3.0.6",
     "@types/react-datepicker": "^4.4.2",
-    "@types/react-dom": "^16.9.18",
+    "@types/react-dom": "^18.0.0",
     "@types/react-modal": "^3.10.6",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.5",

dashboard/src/components/ProvisionerSettings.tsx

@@ -45,6 +45,11 @@ const machineTypeOptions = [
   { value: "t3.2xlarge", label: "t3.2xlarge" },
 ];
 
+const clusterVersionOptions = [
+  { value: "v1.24.0", label: "1.24.0" },
+  { value: "v1.25.0", label: "1.25.0" },
+];
+
 type Props = RouteComponentProps & {
   selectedClusterVersion?: Contract;
   credentialId: string;
@@ -53,6 +58,7 @@ type Props = RouteComponentProps & {
 
 const ProvisionerSettings: React.FC<Props> = props => {
   const {
+    user,
     currentProject,
     currentCluster,
     setCurrentCluster,
@@ -67,6 +73,7 @@ const ProvisionerSettings: React.FC<Props> = props => {
   const [minInstances, setMinInstances] = useState(1);
   const [maxInstances, setMaxInstances] = useState(10);
   const [cidrRange, setCidrRange] = useState("172.0.0.0/16");
+  const [clusterVersion, setClusterVersion] = useState("v1.24.0");
   const [isReadOnly, setIsReadOnly] = useState(false);
 
   const createCluster = async () => {
@@ -80,7 +87,7 @@ const ProvisionerSettings: React.FC<Props> = props => {
           case: "eksKind",
           value: new EKS({
             clusterName,
-            clusterVersion: "v1.24.0",
+            clusterVersion: clusterVersion || "v1.24.0",
             cidrRange: cidrRange || "172.0.0.0/16",
             region: awsRegion,
             nodeGroups: [
@@ -173,6 +180,7 @@ const ProvisionerSettings: React.FC<Props> = props => {
       setCreateStatus("");
       setClusterName(contract.cluster.eksKind.clusterName);
       setAwsRegion(contract.cluster.eksKind.region);
+      setClusterVersion(contract.cluster.eksKind.clusterVersion);
       setCidrRange(contract.cluster.eksKind.cidrRange);
     }
   }, [props.selectedClusterVersion]);
@@ -218,7 +226,7 @@ const ProvisionerSettings: React.FC<Props> = props => {
         <InputRow
           width="350px"
           isRequired
-          disabled={isReadOnly}
+          disabled={isReadOnly || true}
           type="string"
           value={clusterName}
           setValue={(x: string) => setClusterName(x)}
@@ -228,44 +236,48 @@ const ProvisionerSettings: React.FC<Props> = props => {
         <SelectRow
           options={regionOptions}
           width="350px"
-          disabled={isReadOnly}
+          disabled={isReadOnly || true}
           value={awsRegion}
           scrollBuffer={true}
           dropdownMaxHeight="240px"
           setActiveValue={setAwsRegion}
           label="📍 AWS region"
         />
-        <SelectRow
-          options={machineTypeOptions}
-          width="350px"
-          disabled={isReadOnly}
-          value={machineType}
-          scrollBuffer={true}
-          dropdownMaxHeight="240px"
-          setActiveValue={setMachineType}
-          label="⚙️ Machine type"
-        />
-
-        <Heading>
-          <ExpandHeader
-            onClick={() => setIsExpanded(!isExpanded)}
-            isExpanded={isExpanded}
-          >
-            <i className="material-icons">arrow_drop_down</i>
-            Advanced settings
-          </ExpandHeader>
-        </Heading>
+        {
+          user?.isPorterUser && (
+            <Heading>
+              <ExpandHeader
+                onClick={() => setIsExpanded(!isExpanded)}
+                isExpanded={isExpanded}
+              >
+                <i className="material-icons">arrow_drop_down</i>
+                Advanced settings
+              </ExpandHeader>
+            </Heading>
+          )
+        }
         {
           isExpanded && (
             <>
-              <InputRow
+              <SelectRow
+                options={clusterVersionOptions}
                 width="350px"
-                type="number"
                 disabled={isReadOnly}
-                value={minInstances}
-                setValue={(x: number) => setMinInstances(x)}
-                label="Minimum number of application EC2 instances"
-                placeholder="ex: 1"
+                value={clusterVersion}
+                scrollBuffer={true}
+                dropdownMaxHeight="240px"
+                setActiveValue={setClusterVersion}
+                label="Cluster version"
+              />
+              <SelectRow
+                options={machineTypeOptions}
+                width="350px"
+                disabled={isReadOnly}
+                value={machineType}
+                scrollBuffer={true}
+                dropdownMaxHeight="240px"
+                setActiveValue={setMachineType}
+                label="Machine type"
               />
               <InputRow
                 width="350px"
@@ -273,7 +285,7 @@ const ProvisionerSettings: React.FC<Props> = props => {
                 disabled={isReadOnly}
                 value={maxInstances}
                 setValue={(x: number) => setMaxInstances(x)}
-                label="Minimum number of application EC2 instances"
+                label="Maximum number of application EC2 instances"
                 placeholder="ex: 1"
               />
               <InputRow

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

@@ -31,6 +31,7 @@ import useAuth from "shared/auth/useAuth";
 import { fillWithDeletedVariables } from "components/porter-form/utils";
 import DynamicLink from "components/DynamicLink";
 import DocsHelper from "components/DocsHelper";
+import Spacer from "components/porter/Spacer";
 
 type PropsType = WithAuthProps & {
   namespace: string;
@@ -435,6 +436,8 @@ export const ExpandedEnvGroupFC = ({
         </TitleSection>
       </HeaderWrapper>
 
+      <Spacer y={1} />
+
       {isDeleting ? (
         <>
           <LineBreak />

dashboard/src/main/home/dashboard/ClusterSection.tsx

@@ -8,6 +8,7 @@ import Banner from "components/Banner";
 import ProvisionerFlow from "components/ProvisionerFlow";
 import ClusterList from "./ClusterList";
 import TitleSection from "components/TitleSection";
+import Spacer from "components/porter/Spacer";
 
 type Props = {
 };
@@ -81,7 +82,7 @@ const ClusterSection = (props: Props) => {
             Provision a new cluster
           </Title>
         </TitleSection>
-        <Br height="7px" />
+        <Spacer y={1} />
         <Banner>
           You have currently provisioned {usage?.current.cluster || "0"} out of {usage?.limit.clusters || "0"} clusters for this project.
         </Banner>