prettier

dashboard/src/components/ResourceTab.tsx

@@ -259,6 +259,7 @@ const StatusColor = styled.div`
 
 const ResourceName = styled.div`
   color: #ffffff;
+  max-width: 40%;
   margin-left: ${(props: { showKindLabels: boolean }) =>
     props.showKindLabels ? "10px" : ""};
   text-transform: none;

dashboard/src/components/image-selector/ImageList.tsx

@@ -93,7 +93,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
                         }) == registries.length
                           ? true
                           : false;
-                      
+
                       this.setState({
                         images,
                         loading: false,
@@ -102,11 +102,9 @@ export default class ImageSelector extends Component<PropsType, StateType> {
                     } else {
                       this.setState({
                         images,
-                      })
+                      });
                     }
 
-                   
-                    
                     resolveToNextController();
                   });
               }

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -295,7 +295,7 @@ const ImageItem = styled.div`
   font-size: 13px;
   border-bottom: 1px solid
     ${(props: { lastItem: boolean; isSelected: boolean }) =>
-    props.lastItem ? "#00000000" : "#606166"};
+      props.lastItem ? "#00000000" : "#606166"};
   color: #ffffff;
   user-select: none;
   align-items: center;

dashboard/src/components/repo-selector/ActionDetails.tsx

@@ -64,14 +64,14 @@ export default class ActionDetails extends Component<PropsType, StateType> {
           setValue={(x: string) => console.log(x)}
         />
         <Label>Target Image URL</Label>
-          <ImageSelector
-            selectedTag="latest"
-            selectedImageUrl={this.props.actionConfig.image_repo_uri}
-            setSelectedImageUrl={this.setURL}
-            setSelectedTag={() => null}
-            forceExpanded={true}
-            noTagSelection={true}
-          />
+        <ImageSelector
+          selectedTag="latest"
+          selectedImageUrl={this.props.actionConfig.image_repo_uri}
+          setSelectedImageUrl={this.setURL}
+          setSelectedTag={() => null}
+          forceExpanded={true}
+          noTagSelection={true}
+        />
       </Holder>
     );
   };

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

@@ -15,7 +15,7 @@ type StateType = {
 export default class KeyValueArray extends Component<PropsType, StateType> {
   state = {
     values: [] as any[],
-  }
+  };
 
   componentDidMount() {
     let arr = [] as any[];
@@ -28,10 +28,10 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
   valuesToObject = () => {
     let obj = {} as any;
     this.state.values.forEach((entry: any, i: number) => {
-      obj[entry.key] = entry.value; 
+      obj[entry.key] = entry.value;
     });
     return obj;
-  }
+  };
 
   renderInputList = () => {
     return (
@@ -64,13 +64,15 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
                   this.props.setValues(obj);
                 }}
               />
-              <DeleteButton onClick={() => {
-                this.state.values.splice(i, 1);
-                this.setState({ values: this.state.values });
+              <DeleteButton
+                onClick={() => {
+                  this.state.values.splice(i, 1);
+                  this.setState({ values: this.state.values });
 
-                let obj = this.valuesToObject();
-                this.props.setValues(obj);
-              }}>
+                  let obj = this.valuesToObject();
+                  this.props.setValues(obj);
+                }}
+              >
                 <i className="material-icons">cancel</i>
               </DeleteButton>
             </InputWrapper>
@@ -78,21 +80,19 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
         })}
       </>
     );
-  }
+  };
 
   render() {
     return (
       <StyledInputArray>
         <Label>{this.props.label}</Label>
-        {
-          this.state.values.length === 0
-          ? <></>
-          : this.renderInputList()
-        }
-        <AddRowButton onClick={() => {
-          this.state.values.push({ key: '', value: '' });
-          this.setState({ values: this.state.values });
-        }}>
+        {this.state.values.length === 0 ? <></> : this.renderInputList()}
+        <AddRowButton
+          onClick={() => {
+            this.state.values.push({ key: "", value: "" });
+            this.setState({ values: this.state.values });
+          }}
+        >
           <i className="material-icons">add</i> Add Row
         </AddRowButton>
       </StyledInputArray>
@@ -139,7 +139,7 @@ const DeleteButton = styled.div`
   margin-left: 8px;
   margin-top: -3px;
   justify-content: center;
-  
+
   > i {
     font-size: 17px;
     color: #ffffff44;
@@ -182,4 +182,4 @@ const Label = styled.div`
 const StyledInputArray = styled.div`
   margin-bottom: 15px;
   margin-top: 22px;
-`;
+`;

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

@@ -12,8 +12,8 @@ import Helper from "./Helper";
 import Heading from "./Heading";
 import ExpandableResource from "../ExpandableResource";
 import VeleroForm from "../forms/VeleroForm";
-import InputArray from './InputArray';
-import KeyValueArray from './KeyValueArray';
+import InputArray from "./InputArray";
+import KeyValueArray from "./KeyValueArray";
 
 type PropsType = {
   sections?: Section[];
@@ -118,7 +118,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               type="password"
               value={this.getInputValue(item)}
               setValue={(x: string) => {
-                console.log("string input", x)
+                console.log("string input", x);
                 if (item.settings && item.settings.unit && x !== "") {
                   x = x + item.settings.unit;
                 }

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -146,7 +146,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
   */
   renderSourceSection = () => {
     if (!this.props.currentChart.form.hasSource) {
-      return 
+      return;
     }
 
     if (this.state.action.git_repo.length > 0) {
@@ -236,7 +236,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
 
   renderWebhookSection = () => {
     if (!this.props.currentChart.form.hasSource) {
-      return 
+      return;
     }
 
     if (true || this.state.webhookToken) {

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

@@ -103,7 +103,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
   };
 
   onSubmitAddon = (wildcard?: any) => {
-    let { currentCluster, currentProject } = this.context;
+    let { currentCluster, currentProject, setCurrentError } = this.context;
     let name =
       this.state.templateName || randomWords({ exactly: 3, join: "-" });
     this.setState({ saveValuesStatus: "loading" });
@@ -146,6 +146,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
       })
       .catch((err) => {
         this.setState({ saveValuesStatus: "error" });
+        setCurrentError(err.response.data.errors[0]);
         posthog.capture("Failed to deploy template", {
           name: this.props.currentTemplate.name,
           namespace: this.state.selectedNamespace,
@@ -315,7 +316,10 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
       }
     });
 
-    this.setState({ tabOptions, currentTab: tabOptions[0] && tabOptions[0]["value"] });
+    this.setState({
+      tabOptions,
+      currentTab: tabOptions[0] && tabOptions[0]["value"],
+    });
 
     // TODO: query with selected filter once implemented
     let { currentProject, currentCluster } = this.context;
@@ -509,13 +513,9 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
     return (
       <StyledLaunchTemplate>
-        {
-          name !== 'docker' && 
-            <HeaderSection>
-            <i
-              className="material-icons"
-              onClick={this.props.hideLaunch}
-            >
+        {name !== "docker" && (
+          <HeaderSection>
+            <i className="material-icons" onClick={this.props.hideLaunch}>
               keyboard_backspace
             </i>
             {icon
@@ -523,11 +523,11 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
               : this.renderIcon(currentTemplate.icon)}
             <Title>{name}</Title>
           </HeaderSection>
-        }
+        )}
         <DarkMatter antiHeight="-13px" />
-        <Heading isAtTop={true}>Name</Heading>
+        <Heading isAtTop={name !== "docker"}>Name</Heading>
         <Subtitle>
-          Randomly generated if left blank. 
+          Randomly generated if left blank.
           <Warning
             highlight={
               !isAlphanumeric(this.state.templateName) &&
@@ -546,7 +546,10 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
           width="100%"
         />
         <Heading>Destination</Heading>
-        <Subtitle>Specify the cluster and namespace you would like to deploy your application to.</Subtitle>
+        <Subtitle>
+          Specify the cluster and namespace you would like to deploy your
+          application to.
+        </Subtitle>
         <ClusterSection>
           <ClusterLabel>
             <i className="material-icons">device_hub</i>Cluster
@@ -618,7 +621,7 @@ const Heading = styled.div<{ isAtTop?: boolean }>`
   font-weight: 500;
   font-size: 16px;
   margin-bottom: 5px;
-  margin-top: ${(props) => (props.isAtTop ? "10px" : "30px")};
+  margin-top: ${(props) => (props.isAtTop ? "30px" : "10px")};
   display: flex;
   align-items: center;
 `;