Merge pull request #643 from porter-dev/0.3.0-job-fe-upgrades

jobs fe upgrades

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

@@ -72,16 +72,18 @@ const InputWrapper = styled.div`
   align-items: center;
 `;
 
-const Input = styled.input`
+const Input = styled.input<{ disabled: boolean, width: string }>`
   outline: none;
   border: none;
   font-size: 13px;
   background: #ffffff11;
   border: 1px solid #ffffff55;
+  cursor: ${props =>
+    props.disabled ? "not-allowed" : ""};
   border-radius: 3px;
-  width: ${(props: { disabled: boolean; width: string }) =>
+  width: ${props =>
     props.width ? props.width : "270px"};
-  color: ${(props: { disabled: boolean; width: string }) =>
+  color: ${props =>
     props.disabled ? "#ffffff44" : "white"};
   padding: 5px 10px;
   height: 35px;

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

@@ -54,6 +54,8 @@ export default class ValuesForm extends Component<PropsType, StateType> {
 
       // If no name is assigned use values.yaml variable as identifier
       let key = item.name || item.variable;
+      let isDisabled = item.settings?.disableAfterLaunch && !this.props.externalValues?.isLaunch;
+      isDisabled = isDisabled || this.props.disabled;
 
       switch (item.type) {
         case "heading":
@@ -81,7 +83,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <CheckboxRow
               key={key}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
               isRequired={item.required}
               checked={this.props.metaState[key]?.value}
               toggle={() =>
@@ -109,7 +111,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
                 }
               }}
               label={item.label}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
               secretOption={true}
             />
           );
@@ -121,7 +123,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               values={this.props.metaState[key]?.value}
               setValues={(x: any) => this.props.setMetaState(key, x)}
               label={item.label}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
             />
           );
         case "array-input":
@@ -133,7 +135,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
                 this.props.setMetaState(key, x);
               }}
               label={item.label}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
             />
           );
         case "string-input":
@@ -157,7 +159,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               }}
               label={item.label}
               unit={item.settings ? item.settings.unit : null}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
             />
           );
         case "string-input-password":
@@ -180,7 +182,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               }}
               label={item.label}
               unit={item.settings ? item.settings.unit : null}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
             />
           );
         case "number-input":
@@ -211,7 +213,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               }}
               label={item.label}
               unit={item.settings ? item.settings.unit : null}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
             />
           );
         case "select":
@@ -262,7 +264,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               }}
               label={item.label}
               unit={item.settings ? item.settings.unit : null}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
             />
           );
         case "base-64-password":
@@ -285,7 +287,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               }}
               label={item.label}
               unit={item.settings ? item.settings.unit : null}
-              disabled={this.props.disabled}
+              disabled={isDisabled}
             />
           );
         default:

dashboard/src/main/home/Home.tsx

@@ -221,8 +221,8 @@ class Home extends Component<PropsType, StateType> {
 
     // Initialize Highlight
     if (
-      window.location.href.includes("dashboard.getporter.dev") &&
-      !user.email.includes("@getporter.dev")
+      window.location.href.includes("dashboard.getporter.dev")
+      && !user.email.includes("@getporter.dev")
     ) {
       H.init("y2d13lgr");
       H.identify(user.email, { id: user.id });

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobResource.tsx

@@ -130,7 +130,7 @@ export default class JobResource extends Component<PropsType, StateType> {
       envArray.forEach((env: any, i: number) => {
         envObject[env.name] = env.value;
       });
-
+    
     // Handle no config to show
     if (!commandString && _.isEmpty(envObject)) {
       return;
@@ -155,13 +155,13 @@ export default class JobResource extends Component<PropsType, StateType> {
             Hide Job Config
           </ExpandConfigBar>
           <ConfigSection>
-            {commandString ? (
-              <>
-                Command: <Command>{commandString}</Command>
-              </>
-            ) : (
-              <DarkMatter size="-18px" />
-            )}
+            {
+              commandString ? (
+                <>Command: <Command>{commandString}</Command></>
+              ) : (
+                <DarkMatter size="-18px" />
+              )
+            }
             {!_.isEmpty(envObject) && (
               <>
                 <KeyValueArray
@@ -273,7 +273,7 @@ JobResource.contextType = Context;
 
 const DarkMatter = styled.div<{ size?: string }>`
   width: 100%;
-  margin-bottom: ${(props) => props.size || "-13px"};
+  margin-bottom: ${props => props.size || "-13px"};
 `;
 
 const Command = styled.span`

dashboard/src/main/home/launch/expanded-template/LaunchTemplate.tsx

@@ -499,6 +499,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
             externalValues={{
               namespace: this.state.selectedNamespace,
               clusterId: this.context.currentCluster.id,
+              isLaunch: true,
             }}
             onSubmit={
               this.props.currentTab === "docker"

dashboard/src/shared/types.tsx

@@ -110,6 +110,7 @@ export interface FormElement {
     default?: number | string | boolean;
     options?: any[];
     omitUnitFromValue?: boolean;
+    disableAfterLaunch?: boolean;
     unit?: string;
   };
 }

internal/models/templates.go

@@ -51,11 +51,12 @@ type FormContent struct {
 	Placeholder string       `yaml:"placeholder,omitempty" json:"placeholder,omitempty"`
 	Value       interface{}  `yaml:"value,omitempty" json:"value,omitempty"`
 	Settings    struct {
-		Default           interface{} `yaml:"default,omitempty" json:"default,omitempty"`
-		Unit              interface{} `yaml:"unit,omitempty" json:"unit,omitempty"`
-		OmitUnitFromValue bool        `yaml:"omitUnitFromValue,omitempty" json:"omitUnitFromValue,omitempty"`
-		Options           interface{} `yaml:"options,omitempty" json:"options,omitempty"`
-		Placeholder       string      `yaml:"placeholder,omitempty" json:"placeholder,omitempty"`
+		Default            interface{} `yaml:"default,omitempty" json:"default,omitempty"`
+		Unit               interface{} `yaml:"unit,omitempty" json:"unit,omitempty"`
+		OmitUnitFromValue  bool        `yaml:"omitUnitFromValue,omitempty" json:"omitUnitFromValue,omitempty"`
+		DisableAfterLaunch bool        `yaml:"disableAfterLaunch,omitempty" json:"disableAfterLaunch,omitempty"`
+		Options            interface{} `yaml:"options,omitempty" json:"options,omitempty"`
+		Placeholder        string      `yaml:"placeholder,omitempty" json:"placeholder,omitempty"`
 	} `yaml:"settings,omitempty" json:"settings,omitempty"`
 }