buildpack ci frontend

dashboard/src/components/RadioSelector.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 type PropsType = {
   selected: string;
   setSelected: (x: string) => void;
-  options: { value: string, label: string }[];
+  options: { value: string; label: string }[];
 };
 
 type StateType = {};
@@ -13,17 +13,19 @@ export default class RadioSelector extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledRadioSelector>
-        {this.props.options.map((option: { label: string, value: string }, i: number) => {
-          let selected = option.value === this.props.selected;
-          return (
-            <RadioRow onClick={() => this.props.setSelected(option.value)}>
-              <Indicator selected={selected}>
-                {selected && <Circle />}
-              </Indicator>
-              {option.label}
-            </RadioRow>
-          );
-        })}
+        {this.props.options.map(
+          (option: { label: string; value: string }, i: number) => {
+            let selected = option.value === this.props.selected;
+            return (
+              <RadioRow onClick={() => this.props.setSelected(option.value)}>
+                <Indicator selected={selected}>
+                  {selected && <Circle />}
+                </Indicator>
+                {option.label}
+              </RadioRow>
+            );
+          }
+        )}
       </StyledRadioSelector>
     );
   }
@@ -51,7 +53,7 @@ const Indicator = styled.div<{ selected: boolean }>`
   height: 16px;
   border: 1px solid #ffffff55;
   margin: 1px 10px 0px 1px;
-  background: ${props => props.selected ? "#ffffff22" : "#ffffff11"};
+  background: ${(props) => (props.selected ? "#ffffff22" : "#ffffff11")};
 `;
 
 const Circle = styled.div`
@@ -61,5 +63,4 @@ const Circle = styled.div`
   border-radius: 15px;
 `;
 
-const StyledRadioSelector = styled.div`
-`;
+const StyledRadioSelector = styled.div``;

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

@@ -40,12 +40,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
   };
 
   renderExpanded = () => {
-    let {
-      actionConfig,
-      branch,
-      setActionConfig,
-      setBranch,
-    } = this.props;
+    let { actionConfig, branch, setActionConfig, setBranch } = this.props;
 
     if (!actionConfig.git_repo) {
       return (
@@ -57,7 +52,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
           />
         </ExpandedWrapper>
       );
-    } 
+    } else if (!this.props.dockerfilePath && !this.props.folderPath) {
     /* else if (!branch) {
       return (
         <>
@@ -74,8 +69,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
           </BackButton>
         </>
       );
-    } */ 
-    else if (!this.props.dockerfilePath && !this.props.folderPath) {
+    } */
       return (
         <>
           <ExpandedWrapperAlt>
@@ -88,7 +82,10 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
             />
           </ExpandedWrapperAlt>
           <Br />
-          <BackButton width="135px" onClick={() => setActionConfig({ ...defaultActionConfig })}>
+          <BackButton
+            width="135px"
+            onClick={() => setActionConfig({ ...defaultActionConfig })}
+          >
             <i className="material-icons">keyboard_backspace</i>
             Select Repo
           </BackButton>
@@ -106,10 +103,13 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
           setSelectedRegistryId={this.props.setSelectedRegistryId}
         />
         <Flex>
-          <BackButton width="140px" onClick={() => {
-            this.props.setDockerfilePath(null);
-            this.props.setFolderPath(null);
-          }}>
+          <BackButton
+            width="140px"
+            onClick={() => {
+              this.props.setDockerfilePath(null);
+              this.props.setFolderPath(null);
+            }}
+          >
             <i className="material-icons">keyboard_backspace</i>
             Select Folder
           </BackButton>
@@ -166,7 +166,7 @@ const Br = styled.div`
 
 const Flex = styled.div`
   display: flex;
-  align-items: center;  
+  align-items: center;
 `;
 
 const HeaderButton = styled.div`

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

@@ -37,28 +37,24 @@ export default class ActionDetails extends Component<PropsType, StateType> {
           width="100%"
           value={this.props.actionConfig.git_repo}
         />
-        {
-          this.props.dockerfilePath ? (
-            <InputRow
-              disabled={true}
-              label="Dockerfile Path"
-              type="text"
-              width="100%"
-              value={this.props.dockerfilePath}
-            />
-          ) : (
-            <InputRow
-              disabled={true}
-              label="Folder Path"
-              type="text"
-              width="100%"
-              value={this.props.folderPath}
-            />
-          )
-        }
-        <AdvancedHeader>
-          Advanced Settings
-        </AdvancedHeader>
+        {this.props.dockerfilePath ? (
+          <InputRow
+            disabled={true}
+            label="Dockerfile Path"
+            type="text"
+            width="100%"
+            value={this.props.dockerfilePath}
+          />
+        ) : (
+          <InputRow
+            disabled={true}
+            label="Folder Path"
+            type="text"
+            width="100%"
+            value={this.props.folderPath}
+          />
+        )}
+        <AdvancedHeader>Advanced Settings</AdvancedHeader>
         <Br />
       </>
     );

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

@@ -82,9 +82,7 @@ export default class BranchList extends Component<PropsType, StateType> {
   render() {
     return (
       <>
-        <InfoRow
-          lastItem={false}
-        >
+        <InfoRow lastItem={false}>
           <img src={info} />
           Select Branch
         </InfoRow>

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

@@ -27,11 +27,7 @@ type StateType = {
   dockerfiles: string[];
 };
 
-const dummyDockerfiles = [
-  "dev.Dockerfile",
-  "prod.Dockerfile",
-  "Dockerfile",
-]
+const dummyDockerfiles = ["dev.Dockerfile", "prod.Dockerfile", "Dockerfile"];
 
 export default class ContentsList extends Component<PropsType, StateType> {
   state = {
@@ -48,13 +44,12 @@ export default class ContentsList extends Component<PropsType, StateType> {
 
   setSubdirectory = (x: string) => {
     this.setState({ currentDir: x }, () => this.updateContents());
-    
   };
 
   updateContents = () => {
     let { currentProject } = this.context;
     let { actionConfig, branch } = this.props;
-    console.log(this.state.currentDir)
+    console.log(this.state.currentDir);
     // Get branch contents
     api
       .getBranchContents(
@@ -145,14 +140,11 @@ export default class ContentsList extends Component<PropsType, StateType> {
   };
 
   renderJumpToParent = () => {
-    if (this.state.currentDir !== "") { 
+    if (this.state.currentDir !== "") {
       let splits = this.state.currentDir.split("/");
       let subdir = "";
       if (splits.length !== 1) {
-        subdir = this.state.currentDir.replace(
-          splits[splits.length - 1],
-          ""
-        );
+        subdir = this.state.currentDir.replace(splits[splits.length - 1], "");
         if (subdir.charAt(subdir.length - 1) === "/") {
           subdir = subdir.slice(0, subdir.length - 1);
         }
@@ -185,13 +177,13 @@ export default class ContentsList extends Component<PropsType, StateType> {
     if (dockerfiles.length > 0) {
       this.setState({ dockerfiles });
     } else {
-      if (this.state.currentDir !== "") { 
+      if (this.state.currentDir !== "") {
         this.props.setFolderPath(this.state.currentDir);
       } else {
         this.props.setFolderPath("./");
       }
     }
-  }
+  };
 
   renderOverlay = () => {
     if (this.state.dockerfiles.length > 0) {
@@ -202,39 +194,43 @@ export default class ContentsList extends Component<PropsType, StateType> {
             <CloseButtonImg src={close} />
           </CloseButton>
           <Label>
-            Porter has detected at least one Dockerfile in this folder. Would you like to use an existing Dockerfile?
+            Porter has detected at least one Dockerfile in this folder. Would
+            you like to use an existing Dockerfile?
           </Label>
           <DockerfileList>
             {this.state.dockerfiles.map((dockerfile: string, i: number) => {
               return (
                 <Row
                   key={i}
-                  onClick={() => this.props.setDockerfilePath(`${this.state.currentDir}/${dockerfile}`)} 
+                  onClick={() =>
+                    this.props.setDockerfilePath(
+                      `${this.state.currentDir}/${dockerfile}`
+                    )
+                  }
                   isLast={this.state.dockerfiles.length - 1 === i}
                 >
-                  <Indicator selected={false}>
-                  </Indicator>
+                  <Indicator selected={false}></Indicator>
                   {dockerfile}
                 </Row>
               );
             })}
           </DockerfileList>
-          <ConfirmButton onClick={() => this.props.setFolderPath(this.state.currentDir)}>
+          <ConfirmButton
+            onClick={() => this.props.setFolderPath(this.state.currentDir)}
+          >
             Skip
           </ConfirmButton>
         </Overlay>
       );
     }
-  }
+  };
 
   render() {
     return (
       <>
         {this.renderJumpToParent()}
         {this.renderContentList()}
-        <UseButton onClick={this.handleContinue}>
-          Continue
-        </UseButton>
+        <UseButton onClick={this.handleContinue}>Continue</UseButton>
         {this.renderOverlay()}
       </>
     );
@@ -285,7 +281,7 @@ const Indicator = styled.div<{ selected: boolean }>`
   border: 1px solid #ffffff55;
   margin: 1px 10px 0px 1px;
   margin-right: 13px;
-  background: ${props => props.selected ? "#ffffff22" : "#ffffff11"};
+  background: ${(props) => (props.selected ? "#ffffff22" : "#ffffff11")};
 `;
 
 const Label = styled.div`
@@ -311,7 +307,7 @@ const Row = styled.div<{ isLast: boolean }>`
   padding-left: 10px;
   display: flex;
   align-items: center;
-  border-bottom: ${props => !props.isLast && "1px solid #aaaabb"};
+  border-bottom: ${(props) => !props.isLast && "1px solid #aaaabb"};
   cursor: pointer;
   :hover {
     background: #ffffff22;
@@ -371,7 +367,7 @@ const UseButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #616FEEcc;
+  background: #616feecc;
   font-weight: 500;
   padding: 10px 15px;
   border-radius: 3px;

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

@@ -150,7 +150,9 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
 
   renderExpanded = () => {
     if (this.props.readOnly) {
-      return <ExpandedWrapperAlt>asdffdas{this.renderRepoList()}</ExpandedWrapperAlt>;
+      return (
+        <ExpandedWrapperAlt>asdffdas{this.renderRepoList()}</ExpandedWrapperAlt>
+      );
     } else {
       return (
         <ExpandedWrapper>

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

@@ -234,7 +234,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         }
       )
       .then((_) => {
-        console.log("Deployed template.")
+        console.log("Deployed template.");
         if (this.state.sourceType === "repo") {
           console.log("Creating GHA");
           this.createGHAction(name, this.state.selectedNamespace);
@@ -273,12 +273,18 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
   };
 
   submitIsDisabled = () => {
-    let { templateName, sourceType, selectedImageUrl, dockerfilePath, folderPath } = this.state;
-    
+    let {
+      templateName,
+      sourceType,
+      selectedImageUrl,
+      dockerfilePath,
+      folderPath,
+    } = this.state;
+
     // Allow if name is invalid
     if (templateName.length > 0 && !isAlphanumeric(templateName)) {
       return true;
-    } 
+    }
 
     if (this.props.form?.hasSource) {
       // Allow if source type is registry and image URL is specified
@@ -295,7 +301,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     } else {
       return false;
     }
-  }
+  };
 
   getStatus = () => {
     if (this.submitIsDisabled()) {
@@ -307,7 +313,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     } else {
       return this.state.saveValuesStatus;
     }
-  }
+  };
 
   renderTabContents = () => {
     return (
@@ -470,7 +476,9 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
           >
             <BlockIcon src="https://3.bp.blogspot.com/-xhNpNJJyQhk/XIe4GY78RQI/AAAAAAAAItc/ouueFUj2Hqo5dntmnKqEaBJR4KQ4Q2K3ACK4BGAYYCw/s1600/logo%2Bgit%2Bicon.png" />
             <BlockTitle>Git Repository</BlockTitle>
-            <BlockDescription>Deploy using source from a Git repo.</BlockDescription>
+            <BlockDescription>
+              Deploy using source from a Git repo.
+            </BlockDescription>
           </Block>
           <Block
             onClick={() => {
@@ -479,7 +487,9 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
           >
             <BlockIcon src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png" />
             <BlockTitle>Docker Registry</BlockTitle>
-            <BlockDescription>Deploy a container from an image registry.</BlockDescription>
+            <BlockDescription>
+              Deploy a container from an image registry.
+            </BlockDescription>
           </Block>
         </BlockList>
       );
@@ -490,7 +500,8 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
             <CloseButtonImg src={close} />
           </CloseButton>
           <Subtitle>
-            Specify the container image you would like to connect to this template.
+            Specify the container image you would like to connect to this
+            template.
             <Required>*</Required>
           </Subtitle>
           <DarkMatter antiHeight="-4px" />
@@ -516,8 +527,14 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
           </Subtitle>
           <RadioSelector
             options={[
-              { value: "dockerfile", label: "Yes, I am using an existing Dockerfile" },
-              { value: "buildpack", label: "No, I am not using an existing Dockerfile" }
+              {
+                value: "dockerfile",
+                label: "Yes, I am using an existing Dockerfile",
+              },
+              {
+                value: "buildpack",
+                label: "No, I am not using an existing Dockerfile",
+              },
             ]}
             selected={this.state.repoType}
             setSelected={(x: string) => this.setState({ repoType: x })}
@@ -546,7 +563,9 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
               })
             }
             setBranch={(branch: string) => this.setState({ branch })}
-            setDockerfilePath={(x: string) => this.setState({ dockerfilePath: x })}
+            setDockerfilePath={(x: string) =>
+              this.setState({ dockerfilePath: x })
+            }
             dockerfilePath={this.state.dockerfilePath}
             folderPath={this.state.folderPath}
             setFolderPath={(x: string) => this.setState({ folderPath: x })}
@@ -559,7 +578,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
               });
             }}
             setSelectedRegistryId={(x: number) => {
-              this.setState({ selectedRegistryId: x })
+              this.setState({ selectedRegistryId: x });
             }}
           />
           <br />
@@ -573,12 +592,13 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
       <>
         <Heading>Deployment Method</Heading>
         <Subtitle>
-          Choose the deployment method you would like to use for this application.
+          Choose the deployment method you would like to use for this
+          application.
           <Required>*</Required>
         </Subtitle>
         {this.renderSourceSelectorContent()}
       </>
-    )
+    );
   };
 
   render() {