show cidr in form for multi cluster (#4358)

dashboard/src/main/home/infrastructure-dashboard/ClusterFormContextProvider.tsx

@@ -29,6 +29,7 @@ export type UpdateClusterButtonProps = {
 
 type ClusterFormContextType = {
   isAdvancedSettingsEnabled: boolean;
+  isMultiClusterEnabled: boolean;
   showFailedPreflightChecksModal: boolean;
   updateClusterButtonProps: UpdateClusterButtonProps;
   setCurrentContract: (contract: Contract) => void;
@@ -49,6 +50,7 @@ export const useClusterFormContext = (): ClusterFormContextType => {
 type ClusterFormContextProviderProps = {
   projectId?: number;
   isAdvancedSettingsEnabled?: boolean;
+  isMultiClusterEnabled?: boolean;
   redirectOnSubmit?: boolean;
   children: JSX.Element;
 };
@@ -56,6 +58,7 @@ type ClusterFormContextProviderProps = {
 const ClusterFormContextProvider: React.FC<ClusterFormContextProviderProps> = ({
   projectId,
   isAdvancedSettingsEnabled = false,
+  isMultiClusterEnabled = false,
   redirectOnSubmit,
   children,
 }) => {
@@ -200,6 +203,7 @@ const ClusterFormContextProvider: React.FC<ClusterFormContextProviderProps> = ({
         showFailedPreflightChecksModal,
         updateClusterButtonProps,
         isAdvancedSettingsEnabled,
+        isMultiClusterEnabled,
       }}
     >
       <Wrapper ref={scrollToTopRef}>

dashboard/src/main/home/infrastructure-dashboard/forms/CreateClusterForm.tsx

@@ -53,6 +53,7 @@ const CreateClusterForm: React.FC = () => {
       projectId={currentProject?.id}
       redirectOnSubmit={true}
       isAdvancedSettingsEnabled={currentProject?.advanced_infra_enabled}
+      isMultiClusterEnabled={currentProject?.multi_cluster}
     >
       <CreateClusterFormContainer>
         {match(selectedCloudProvider)

dashboard/src/main/home/infrastructure-dashboard/forms/aws/ConfigureEKSCluster.tsx

@@ -31,7 +31,7 @@ const ConfigureEKSCluster: React.FC<Props> = ({ goBack }) => {
     formState: { errors },
   } = useFormContext<ClientClusterContract>();
 
-  const { isAdvancedSettingsEnabled } = useClusterFormContext();
+  const { isMultiClusterEnabled } = useClusterFormContext();
 
   return (
     <div>
@@ -88,7 +88,7 @@ const ConfigureEKSCluster: React.FC<Props> = ({ goBack }) => {
               )}
             />
           </>,
-          isAdvancedSettingsEnabled ? (
+          isMultiClusterEnabled ? (
             <>
               <Text size={16}>CIDR range</Text>
               <Spacer y={0.5} />

dashboard/src/main/home/infrastructure-dashboard/forms/azure/ConfigureAKSCluster.tsx

@@ -31,7 +31,7 @@ const ConfigureAKSCluster: React.FC<Props> = ({ goBack }) => {
     watch,
   } = useFormContext<ClientClusterContract>();
 
-  const { isAdvancedSettingsEnabled } = useClusterFormContext();
+  const { isMultiClusterEnabled } = useClusterFormContext();
 
   const region = watch("cluster.config.region");
 
@@ -127,7 +127,7 @@ const ConfigureAKSCluster: React.FC<Props> = ({ goBack }) => {
               />
             </Container>
           </>,
-          isAdvancedSettingsEnabled ? (
+          isMultiClusterEnabled ? (
             <>
               <Text size={16}>CIDR range</Text>
               <Spacer y={0.5} />

dashboard/src/main/home/infrastructure-dashboard/forms/gcp/ConfigureGKECluster.tsx

@@ -30,7 +30,7 @@ const ConfigureGKECluster: React.FC<Props> = ({ goBack }) => {
     formState: { errors },
   } = useFormContext<ClientClusterContract>();
 
-  const { isAdvancedSettingsEnabled } = useClusterFormContext();
+  const { isMultiClusterEnabled } = useClusterFormContext();
 
   return (
     <div>
@@ -93,7 +93,7 @@ const ConfigureGKECluster: React.FC<Props> = ({ goBack }) => {
               }}
             />
           </>,
-          isAdvancedSettingsEnabled ? (
+          isMultiClusterEnabled ? (
             <>
               <Text size={16}>CIDR range</Text>
               <Spacer y={0.5} />

dashboard/src/main/home/infrastructure-dashboard/shared/NodeGroups.tsx

@@ -52,7 +52,7 @@ const NodeGroups: React.FC<Props> = ({ availableMachineTypes }) => {
       {displayableNodeGroups.APPLICATION?.map((ng) => {
         return (
           <Expandable
-            preExpanded={true}
+            preExpanded={false}
             key={ng.nodeGroup.id}
             header={
               <Container row>
@@ -129,7 +129,7 @@ const NodeGroups: React.FC<Props> = ({ availableMachineTypes }) => {
       {displayableNodeGroups.CUSTOM?.map((ng) => {
         return (
           <Expandable
-            preExpanded={true}
+            preExpanded={false}
             key={ng.nodeGroup.id}
             header={
               <Container row spaced>

dashboard/src/main/home/infrastructure-dashboard/tabs/overview/AKSClusterOverview.tsx

@@ -60,8 +60,10 @@ const AKSClusterOverview: React.FC = () => {
         />
         <Spacer y={1} />
       </Container>
-      <Text size={16}>
-        Application node group{" "}
+      <Text size={16}>Node groups</Text>
+      <Spacer y={0.5} />
+      <Text color="helper">
+        Configure node groups to support custom workloads.{" "}
         <a
           href="https://docs.porter.run/other/kubernetes-101"
           target="_blank"
@@ -70,7 +72,7 @@ const AKSClusterOverview: React.FC = () => {
           &nbsp;(?)
         </a>
       </Text>
-      <Spacer y={0.5} />
+      <Spacer y={1} />
       <NodeGroups
         availableMachineTypes={CloudProviderAzure.machineTypes.filter((mt) =>
           mt.supportedRegions.includes(region)

dashboard/src/main/home/infrastructure-dashboard/tabs/overview/EKSClusterOverview.tsx

@@ -16,6 +16,7 @@ import NodeGroups from "../../shared/NodeGroups";
 const EKSClusterOverview: React.FC = () => {
   const { watch } = useFormContext<ClientClusterContract>();
   const region = watch("cluster.config.region");
+  const cidrRange = watch("cluster.config.cidrRange");
 
   const label = useMemo(() => {
     return SUPPORTED_AWS_REGIONS.find((x) => x.name === region)?.displayName;
@@ -37,6 +38,16 @@ const EKSClusterOverview: React.FC = () => {
         />
       </Container>
       <Spacer y={1} />
+      <Container style={{ width: "300px" }}>
+        <Text size={16}>Cluster CIDR range</Text>
+        <Spacer y={0.5} />
+        <Select
+          options={[{ value: cidrRange, label: cidrRange }]}
+          disabled={true}
+          value={cidrRange}
+        />
+        <Spacer y={1} />
+      </Container>
       <Text size={16}>Node groups</Text>
       <Spacer y={0.5} />
       <Text color="helper">

dashboard/src/main/home/infrastructure-dashboard/tabs/overview/GKEClusterOverview.tsx

@@ -38,8 +38,10 @@ const GKEClusterOverview: React.FC = () => {
         />
         <Spacer y={1} />
       </Container>
-      <Text size={16}>
-        Application node group{" "}
+      <Text size={16}>Node groups</Text>
+      <Spacer y={0.5} />
+      <Text color="helper">
+        Configure node groups to support custom workloads.{" "}
         <a
           href="https://docs.porter.run/other/kubernetes-101"
           target="_blank"
@@ -48,7 +50,7 @@ const GKEClusterOverview: React.FC = () => {
           &nbsp;(?)
         </a>
       </Text>
-      <Spacer y={0.5} />
+      <Spacer y={1} />
       <NodeGroups availableMachineTypes={CloudProviderGCP.machineTypes} />
     </>
   );