disable checkbox and tooltips

dashboard/src/components/porter/Checkbox.tsx

@@ -1,30 +1,47 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
+import Tooltip from "./Tooltip";
 
 type Props = {
   checked: boolean;
   toggleChecked: () => void;
   children: React.ReactNode;
   disabled?: boolean;
+  disabledTooltip?: string;
 };
 
 const Checkbox: React.FC<Props> = ({
   checked,
   toggleChecked,
   children,
-  disabled,
+  disabled = false,
+  disabledTooltip,
 }) => {
   return (
-    <StyledCheckbox>
-      <Box 
-        checked={checked}
-        onClick={!disabled && toggleChecked}
-        disabled={disabled}
-      >
-        <i className="material-icons">done</i>
-      </Box>
-      {children}
-    </StyledCheckbox>
+    disabled && disabledTooltip ?
+      <Tooltip content={disabledTooltip} position="right">
+        <StyledCheckbox>
+          <Box
+            checked={checked}
+            onClick={disabled ? () => { } : toggleChecked}
+            disabled={disabled}
+          >
+            <i className="material-icons">done</i>
+          </Box>
+          {children}
+        </StyledCheckbox>
+      </Tooltip>
+      :
+      <StyledCheckbox>
+        <Box
+          checked={checked}
+          onClick={disabled ? () => { } : toggleChecked}
+          disabled={disabled}
+        >
+          <i className="material-icons">done</i>
+        </Box>
+        {children}
+      </StyledCheckbox>
   );
 };
 
@@ -37,7 +54,7 @@ const StyledCheckbox = styled.div`
 
 const Box = styled.div<{
   checked: boolean;
-  disabled: boolean;
+  disabled?: boolean;
 }>`
   width: 12px;
   height: 12px;

dashboard/src/components/porter/Input.tsx

@@ -128,7 +128,7 @@ const StyledInput = styled.input<{
   height: ${props => props.height || "35px"};
   padding: 5px 10px;
   width: ${props => props.width || "200px"};
-  color: #ffffff;
+  color: ${props => props.disabled ? "#aaaabb" : "#ffffff"};
   font-size: 13px;
   outline: none;
   border-radius: 5px;

dashboard/src/main/home/app-dashboard/new-app-flow/JobTabs.tsx

@@ -81,6 +81,8 @@ const JobTabs: React.FC<Props> = ({
         <Checkbox
           checked={service.jobsExecuteConcurrently.value}
           toggleChecked={() => { editService({ ...service, jobsExecuteConcurrently: { readOnly: false, value: !service.jobsExecuteConcurrently.value } }) }}
+          disabled={service.jobsExecuteConcurrently.readOnly}
+          disabledTooltip={"You may only edit this field in your porter.yaml."}
         >
           <Text color="helper">Allow jobs to execute concurrently</Text>
         </Checkbox>

dashboard/src/main/home/app-dashboard/new-app-flow/WebTabs.tsx

@@ -47,8 +47,9 @@ const WebTabs: React.FC<Props> = ({
         <Spacer y={1} />
         <Checkbox
           checked={service.generateUrlForExternalTraffic.value}
-          // disabled={service.generateUrlForExternalTraffic.readOnly}
+          disabled={service.generateUrlForExternalTraffic.readOnly}
           toggleChecked={() => { editService({ ...service, generateUrlForExternalTraffic: { readOnly: false, value: !service.generateUrlForExternalTraffic.value } }) }}
+          disabledTooltip={"You may only edit this field in your porter.yaml."}
         >
           <Text color="helper">Generate a Porter URL for external traffic</Text>
         </Checkbox>
@@ -84,15 +85,17 @@ const WebTabs: React.FC<Props> = ({
           label="Replicas"
           placeholder="ex: 1"
           value={service.replicas.value}
-          disabled={service.replicas.readOnly}
+          disabled={service.replicas.readOnly || service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, replicas: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.replicas.readOnly ? "You may only edit this field in your porter.yaml." : "Disable autoscaling to specify replicas."}
         />
         <Spacer y={1} />
         <Checkbox
           checked={service.autoscalingOn.value}
           toggleChecked={() => { editService({ ...service, autoscalingOn: { readOnly: false, value: !service.autoscalingOn.value } }) }}
+          disabled={service.autoscalingOn.readOnly}
+          disabledTooltip={"You may only edit this field in your porter.yaml."}
         >
           <Text color="helper">Enable autoscaling (overrides replicas)</Text>
         </Checkbox>
@@ -101,40 +104,40 @@ const WebTabs: React.FC<Props> = ({
           label="Min replicas"
           placeholder="ex: 1"
           value={service.minReplicas.value}
-          disabled={service.minReplicas.readOnly}
+          disabled={service.minReplicas.readOnly || !service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, minReplicas: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.minReplicas.readOnly ? "You may only edit this field in your porter.yaml." : "Enable autoscaling to specify min replicas."}
         />
         <Spacer y={1} />
         <Input
           label="Max replicas"
           placeholder="ex: 10"
           value={service.maxReplicas.value}
-          disabled={service.maxReplicas.readOnly}
+          disabled={service.maxReplicas.readOnly || !service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, maxReplicas: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.maxReplicas.readOnly ? "You may only edit this field in your porter.yaml." : "Enable autoscaling to specify max replicas."}
         />
         <Spacer y={1} />
         <Input
           label="Target CPU utilization (%)"
           placeholder="ex: 50"
           value={service.targetCPUUtilizationPercentage.value}
-          disabled={service.targetCPUUtilizationPercentage.readOnly}
+          disabled={service.targetCPUUtilizationPercentage.readOnly || !service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, targetCPUUtilizationPercentage: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.targetCPUUtilizationPercentage.readOnly ? "You may only edit this field in your porter.yaml." : "Enable autoscaling to specify target CPU utilization."}
         />
         <Spacer y={1} />
         <Input
           label="Target RAM utilization (%)"
           placeholder="ex: 50"
           value={service.targetRAMUtilizationPercentage.value}
-          disabled={service.targetRAMUtilizationPercentage.readOnly}
+          disabled={service.targetRAMUtilizationPercentage.readOnly || !service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, targetRAMUtilizationPercentage: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.targetRAMUtilizationPercentage.readOnly ? "You may only edit this field in your porter.yaml." : "Enable autoscaling to specify target RAM utilization."}
         />
       </>
     )

dashboard/src/main/home/app-dashboard/new-app-flow/WorkerTabs.tsx

@@ -65,15 +65,17 @@ const WorkerTabs: React.FC<Props> = ({
           label="Replicas"
           placeholder="ex: 1"
           value={service.replicas.value}
-          disabled={service.replicas.readOnly}
+          disabled={service.replicas.readOnly || service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, replicas: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.replicas.readOnly ? "You may only edit this field in your porter.yaml." : "Disable autoscaling to specify replicas."}
         />
         <Spacer y={1} />
         <Checkbox
           checked={service.autoscalingOn.value}
           toggleChecked={() => { editService({ ...service, autoscalingOn: { readOnly: false, value: !service.autoscalingOn.value } }) }}
+          disabled={service.autoscalingOn.readOnly}
+          disabledTooltip={"You may only edit this field in your porter.yaml."}
         >
           <Text color="helper">Enable autoscaling (overrides replicas)</Text>
         </Checkbox>
@@ -82,40 +84,40 @@ const WorkerTabs: React.FC<Props> = ({
           label="Min replicas"
           placeholder="ex: 1"
           value={service.minReplicas.value}
-          disabled={service.minReplicas.readOnly}
+          disabled={service.minReplicas.readOnly || !service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, minReplicas: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.minReplicas.readOnly ? "You may only edit this field in your porter.yaml." : "Enable autoscaling to specify min replicas."}
         />
         <Spacer y={1} />
         <Input
           label="Max replicas"
           placeholder="ex: 10"
           value={service.maxReplicas.value}
-          disabled={service.maxReplicas.readOnly}
+          disabled={service.maxReplicas.readOnly || !service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, maxReplicas: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.maxReplicas.readOnly ? "You may only edit this field in your porter.yaml." : "Enable autoscaling to specify max replicas."}
         />
         <Spacer y={1} />
         <Input
           label="Target CPU utilization (%)"
           placeholder="ex: 50"
           value={service.targetCPUUtilizationPercentage.value}
-          disabled={service.targetCPUUtilizationPercentage.readOnly}
+          disabled={service.targetCPUUtilizationPercentage.readOnly || !service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, targetCPUUtilizationPercentage: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.targetCPUUtilizationPercentage.readOnly ? "You may only edit this field in your porter.yaml." : "Enable autoscaling to specify target CPU utilization."}
         />
         <Spacer y={1} />
         <Input
           label="Target RAM utilization (%)"
           placeholder="ex: 50"
           value={service.targetRAMUtilizationPercentage.value}
-          disabled={service.targetRAMUtilizationPercentage.readOnly}
+          disabled={service.targetRAMUtilizationPercentage.readOnly || !service.autoscalingOn.value}
           width="300px"
           setValue={(e) => { editService({ ...service, targetRAMUtilizationPercentage: { readOnly: false, value: e } }) }}
-          disabledTooltip={"You may only edit this field in your porter.yaml."}
+          disabledTooltip={service.targetRAMUtilizationPercentage.readOnly ? "You may only edit this field in your porter.yaml." : "Enable autoscaling to specify target RAM utilization."}
         />
       </>
     )