Merge pull request #401 from porter-dev/beta.3.buildpack-ci

metrics frontend

dashboard/src/components/TabSelector.tsx

@@ -46,7 +46,7 @@ export default class TabSelector extends Component<PropsType, StateType> {
         <TabWrapper>
           {this.renderTabList()}
           <Tab lastItem={true} highlight={null}>
-            { this.props.noBuffer ? null : <Buffer /> }
+            {this.props.noBuffer ? null : <Buffer />}
           </Tab>
         </TabWrapper>
         {this.props.addendum}

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

@@ -147,7 +147,7 @@ export default class ActionDetails extends Component<PropsType, StateType> {
             href="https://docs.getporter.dev/docs/auto-deploy-requirements#cicd-with-github-actions"
             target="_blank"
           >
-            Learn More
+            Learn more
           </Highlight>
         </SubtitleAlt>
         <Br />

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

@@ -123,11 +123,10 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
         <LoadingWrapper>
           No connected Github repos found. You can
           <A
-            padRight={true}
             href={`/api/oauth/projects/${this.context.currentProject.id}/github?redirected=true`}
           >
             log in with GitHub
-          </A>{" "}
+          </A>
           .
         </LoadingWrapper>
       );
@@ -254,6 +253,4 @@ const A = styled.a`
   text-decoration: underline;
   margin-left: 5px;
   cursor: pointer;
-  padding-right: ${(props: { padRight?: boolean }) =>
-    props.padRight ? "5px" : ""};
 `;

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/MetricsSection.tsx

@@ -109,7 +109,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
         res.data.map((controller: any) => {
           let name = controller?.metadata?.name;
           controllerOptions.push({ value: controller, label: name });
-        })
+        });
 
         // iterate through the controllers to get the list of pods
         this.setState({
@@ -170,8 +170,6 @@ export default class MetricsSection extends Component<PropsType, StateType> {
       pods = [this.state.selectedPod];
     }
 
-
-
     api
       .getMetrics(
         "<token>",
@@ -291,7 +289,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
         let pods = [{ value: "All", label: "All (Summed)" }] as any[];
         res?.data?.forEach((pod: any) => {
           let name = pod?.metadata?.name;
-          pods.push({ value: name, label: name});
+          pods.push({ value: name, label: name });
         });
 
         this.setState({ pods, selectedPod: "All" });
@@ -358,15 +356,14 @@ export default class MetricsSection extends Component<PropsType, StateType> {
           <DropdownOverlay
             onClick={() => this.setState({ showMetricsSettings: false })}
           />
-          <DropdownAlt
-            dropdownWidth="330px"
-            dropdownMaxHeight="300px"
-          >
+          <DropdownAlt dropdownWidth="330px" dropdownMaxHeight="300px">
             <Label>Additional Settings</Label>
             <SelectRow
               label="Target Controller"
               value={this.state.selectedController}
-              setActiveValue={(x: any) => this.setState({ selectedController: x })}
+              setActiveValue={(x: any) =>
+                this.setState({ selectedController: x })
+              }
               options={this.state.controllerOptions}
               width="100%"
             />
@@ -381,7 +378,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
         </>
       );
     }
-  }
+  };
 
   render() {
     return (
@@ -390,7 +387,9 @@ export default class MetricsSection extends Component<PropsType, StateType> {
           <Flex>
             <MetricSelector
               onClick={() =>
-                this.setState({ dropdownExpanded: !this.state.dropdownExpanded })
+                this.setState({
+                  dropdownExpanded: !this.state.dropdownExpanded,
+                })
               }
             >
               <MetricsLabel>{this.state.selectedMetricLabel}</MetricsLabel>
@@ -398,7 +397,7 @@ export default class MetricsSection extends Component<PropsType, StateType> {
               {this.renderDropdown()}
             </MetricSelector>
             <Relative>
-              <IconWrapper 
+              <IconWrapper
                 onClick={() => this.setState({ showMetricsSettings: true })}
               >
                 <SettingsIcon src={settings} />

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

@@ -534,6 +534,11 @@ class LaunchTemplate extends Component<PropsType, StateType> {
           <Subtitle>
             Specify the container image you would like to connect to this
             template.
+            <Highlight
+              onClick={() => this.props.history.push("integrations/registry")}
+            >
+              Manage Docker registries
+            </Highlight>
             <Required>*</Required>
           </Subtitle>
           <DarkMatter antiHeight="-4px" />
@@ -581,6 +586,11 @@ class LaunchTemplate extends Component<PropsType, StateType> {
           </CloseButton>
           <Subtitle>
             Provide a repo folder to use as source.
+            <Highlight
+              onClick={() => this.props.history.push("integrations/repo")}
+            >
+              Manage Git repos
+            </Highlight>
             <Required>*</Required>
           </Subtitle>
           <DarkMatter antiHeight="-4px" />
@@ -990,11 +1000,9 @@ const StyledLaunchTemplate = styled.div`
 
 const Highlight = styled.div`
   color: #8590ff;
-  text-decoration: underline;
+  text-decoration: none;
   margin-left: 5px;
   cursor: pointer;
-  padding-right: ${(props: { padRight?: boolean }) =>
-    props.padRight ? "5px" : ""};
 `;
 
 const StyledSourceBox = styled.div`