Stacks qa improvements (#3091)

dashboard/src/components/ProvisionerFlow.tsx

@@ -131,9 +131,9 @@ const ProvisionerFlow: React.FC<Props> = ({
               Separate from the AWS cost, Porter charges based on the amount of resources that are being used.
             </Text>
             <Spacer inline width="5px" />
-            <Link hasunderline to="https://porter.run/pricing">
+            <Link hasunderline to="https://porter.run/pricing" target="_blank">
               Learn more about our pricing
-            </Link>.
+            </Link>
             <Spacer y={1} />
             <Text color="helper">
               All AWS resources will be automatically deleted when you delete your Porter project. Please enter the AWS base cost ("315.94") below to proceed:

dashboard/src/components/porter/Checkbox.tsx

@@ -20,24 +20,22 @@ const Checkbox: React.FC<Props> = ({
   return (
     disabled && disabledTooltip ?
       <Tooltip content={disabledTooltip} position="right">
-        <StyledCheckbox>
-          <Box
-            checked={checked}
-            onClick={disabled ? () => { } : toggleChecked}
-            disabled={disabled}
-          >
+        <StyledCheckbox 
+          onClick={disabled ? () => { } : toggleChecked}
+          disabled={disabled}
+        >
+          <Box checked={checked}>
             <i className="material-icons">done</i>
           </Box>
           {children}
         </StyledCheckbox>
       </Tooltip>
       :
-      <StyledCheckbox>
-        <Box
-          checked={checked}
-          onClick={disabled ? () => { } : toggleChecked}
-          disabled={disabled}
-        >
+      <StyledCheckbox 
+        onClick={disabled ? () => { } : toggleChecked}
+        disabled={disabled}
+      >
+        <Box checked={checked}>
           <i className="material-icons">done</i>
         </Box>
         {children}
@@ -47,14 +45,16 @@ const Checkbox: React.FC<Props> = ({
 
 export default Checkbox;
 
-const StyledCheckbox = styled.div`
+const StyledCheckbox = styled.div<{
+  disabled?: boolean;
+}>`
   display: flex;
   align-items: center;
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
 `;
 
 const Box = styled.div<{
   checked: boolean;
-  disabled?: boolean;
 }>`
   width: 12px;
   height: 12px;
@@ -65,7 +65,6 @@ const Box = styled.div<{
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
 
   > i {
     font-size: 12px;

dashboard/src/components/porter/Link.tsx

@@ -2,6 +2,8 @@ import DynamicLink from "components/DynamicLink";
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
+import Icon from "components/porter/Icon";
+
 type Props = {
   to?: string;
   onClick?: () => void;
@@ -18,35 +20,54 @@ const Link: React.FC<Props> = ({
   hasunderline,
 }) => {
   return (
-    <>
+    <LinkWrapper>
       {to ? (
-        <StyledLink 
-          to={to} 
-          target={target}
-          hasunderline={hasunderline}
-        >
+        <StyledLink to={to} target={target}>
           {children}
+          {target === "_blank" && (
+            <div>
+            <Svg data-testid="geist-icon" fill="none" height="1em" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" data-darkreader-inline-stroke="" data-darkreader-inline-color=""><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></Svg>
+            </div>
+          )}
         </StyledLink>
       ) : (
-        <Div 
-          onClick={onClick}
-          hasunderline={hasunderline}
-        >
+        <Div onClick={onClick}>
           {children}
         </Div>
       )}
-    </>
+      {hasunderline && <Underline />}
+    </LinkWrapper>
   );
 };
 
 export default Link;
 
-const Div = styled.span<{ hasunderline?: boolean }>`
+const Svg = styled.svg`
+  margin-bottom: -1px;
+  margin-left: 5px;
+  color: #ffffff;
+  stroke: #ffffff;
+  stroke-width: 2;
+`;
+
+const Underline = styled.div`
+  position: absolute;
+  bottom: -2px;
+  left: 0px;
+  height: 1px;
+  width: 100%;
+  background: #ffffff;
+`;
+
+const LinkWrapper = styled.span`
+  position: relative;
+`;
+
+const Div = styled.span`
   color: #ffffff;
   cursor: pointer;
   font-size: 13px;
   display: inline-flex;
-  border-bottom: ${props => props.hasunderline ? "1px solid #fff" : ""};
 `;
 
 const StyledLink = styled(DynamicLink)<{ hasunderline?: boolean }>`
@@ -54,6 +75,4 @@ const StyledLink = styled(DynamicLink)<{ hasunderline?: boolean }>`
   display: inline-flex;
   font-size: 13px;
   cursor: pointer;
-  text-decoration: ;
-  border-bottom: ${props => props.hasunderline ? "1px solid #fff" : ""};
 `;

dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx

@@ -46,6 +46,7 @@ const namespaceBlacklist = [
   "kube-public",
   "kube-system",
   "monitoring",
+  "porter-agent-system",
 ];
 
 const templateBlacklist = [
@@ -197,15 +198,15 @@ const AppDashboard: React.FC<Props> = ({
                           app.chart.metadata.icon
                         }
                       />
-                      <Text size={14}>
-                        {app.name}
-                      </Text>
+                      <Text size={14}>{app.name}</Text>
                     </Container>
                     <StatusIcon src={healthy} />
-                    <Text size={13} color="#ffffff44">
+                    <Container row>
                       <SmallIcon opacity="0.4" src={time} />
-                      {readableDate(app.info.last_deployed)}
-                    </Text>
+                      <Text size={13} color="#ffffff44">
+                        {readableDate(app.info.last_deployed)}
+                      </Text>
+                    </Container>
                   </Block>
                 );
               })}
@@ -222,17 +223,17 @@ const AppDashboard: React.FC<Props> = ({
                           app.chart.metadata.icon
                         }
                       />
-                      <Text size={14}>
-                        {app.name}
-                      </Text>
+                      <Text size={14}>{app.name}</Text>
                       <Spacer inline x={1} />
                       <MidIcon src={healthy} height="16px" />
                     </Container>
                     <Spacer height="15px" />
-                    <Text size={13} color="#ffffff44">
+                    <Container row>
                       <SmallIcon opacity="0.4" src={time} />
-                      {readableDate(app.info.last_deployed)}
-                    </Text>
+                      <Text size={13} color="#ffffff44">
+                        {readableDate(app.info.last_deployed)}
+                      </Text>
+                    </Container>
                   </Row>
                 );
               })}

dashboard/src/main/home/add-on-dashboard/ConfigureTemplate.tsx

@@ -182,7 +182,7 @@ const ConfigureTemplate: React.FC<Props> = ({
                 src={hardcodedIcons[currentTemplate.name] || currentTemplate.icon}
               />
             }
-            title={`Configure new ${hardcodedNames[currentTemplate.name] || currentTemplate.name} instance`}
+            title={`Configure new "${hardcodedNames[currentTemplate.name] || currentTemplate.name}" instance`}
             capitalize={false}
             disableLineBreak
           />
@@ -194,7 +194,7 @@ const ConfigureTemplate: React.FC<Props> = ({
                 <Text size={16}>Add-on name</Text>
                 <Spacer y={0.5} />
                 <Text color="helper">
-                  Randomly generated if left blank (lowercase letters, numbers, and "-" only).
+                  Lowercase letters, numbers, and "-" only.
                 </Text>
                 <Spacer height="20px" />
                 <Input

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -818,15 +818,13 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
               <>
                 <Spacer inline x={1} />
                 <Container row>
-                  <Link
+                  <A
                     target="_blank"
-                    to={`https://github.com/${appData.app.repo_name}`}
+                    href={`https://github.com/${appData.app.repo_name}`}
                   >
                     <SmallIcon src={github} />
-                    <Text size={13}>
-                      {appData.app.repo_name}
-                    </Text>
-                  </Link>
+                    <Text size={13}>{appData.app.repo_name}</Text>
+                  </A>
                 </Container>
               </>
             )}
@@ -913,25 +911,17 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                               onClick={() => window.location.reload()}
                             >
                               <img src={refresh} />
-                              <Underline>Refresh</Underline>
+                              Refresh
                             </RefreshButton>
                           </>
                         </>
                       }
                     >
-                      <div
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          marginBottom: "-20px",
-                        }}
-                      >
                         Your build was not successful.
-                        <Spacer inline width="15px" />
+                        <Spacer inline width="5px" />
                         <>
                           <Link
                             hasunderline
-                            target="_blank"
                             onClick={() => setModalVisible(true)}
                           >
                             View logs
@@ -945,7 +935,6 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                             />
                           )}
                         </>
-                      </div>
 
                       <Spacer inline width="5px" />
                     </Banner>
@@ -961,7 +950,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                             onClick={() => window.location.reload()}
                           >
                             <img src={refresh} />
-                            <Underline>Refresh</Underline>
+                            Refresh
                           </RefreshButton>
                         </>
                       }
@@ -1079,6 +1068,11 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
 
 export default withRouter(ExpandedApp);
 
+const A = styled.a`
+  display: flex;
+  align-items: center;
+`;
+
 const Underline = styled.div`
   border-bottom: 1px solid #ffffff;
 `;

dashboard/src/main/home/app-dashboard/expanded-app/GHABanner.tsx

@@ -44,17 +44,15 @@ const GHABanner: React.FC<Props> = ({
                 </RefreshButton>
               }
             >
-              Your application will not be available until you merge
+              Your application will not be available until you merge the Porter PR.
               <Spacer inline width="5px" />
               <Link
                 to={pullRequestUrl}
                 target="_blank"
                 hasunderline
               >
-                this PR
+                Merge PR
               </Link>
-              <Spacer inline width="5px" />
-              into your branch.
             </Banner>
           ) : (
             <Banner
@@ -101,12 +99,11 @@ const StyledGHABanner = styled.div`
 `;
 
 const RefreshButton = styled.div`
-  color: #ffffff44;
+  color: #ffffff;
   display: flex;
   align-items: center;
   cursor: pointer;
   :hover {
-    color: #ffffff;
     > img {
       opacity: 1;
     }
@@ -118,6 +115,5 @@ const RefreshButton = styled.div`
     justify-content: center;
     height: 11px;
     margin-right: 10px;
-    opacity: 0.3;
   }
 `;

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

@@ -35,6 +35,7 @@ import { string, z } from "zod";
 import { PorterJson, PorterYamlSchema, createFinalPorterYaml } from "./schema";
 import { ReleaseService, Service } from "./serviceTypes";
 import GithubConnectModal from "./GithubConnectModal";
+import Link from "components/porter/Link";
 
 type Props = RouteComponentProps & {};
 
@@ -464,12 +465,14 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                 <Spacer y={0.5} />
                 <Text color="helper">
                   Deploy from a Git repository or a Docker registry.
-                  <a
-                    href="https://docs.porter.run/deploying-applications/overview"
+                  <Spacer inline width="5px" />
+                  <Link
+                    hasunderline
+                    to="https://docs.porter.run/standard/deploying-applications/overview"
                     target="_blank"
                   >
-                    &nbsp;Learn more.
-                  </a>
+                    Learn more
+                  </Link>
                 </Text>
                 <Spacer y={0.5} />
                 <SourceSelector

dashboard/src/main/home/modals/AccountSettingsModal.tsx

@@ -10,6 +10,7 @@ import Heading from "components/form-components/Heading";
 import Helper from "components/form-components/Helper";
 
 import TabSelector from "components/TabSelector";
+import Link from "components/porter/Link";
 
 interface GithubAppAccessData {
   username?: string;
@@ -102,9 +103,9 @@ const AccountSettingsModal = () => {
                   </List>
                   <br />
                   Don't see the right repos?{" "}
-                  <A href={"/api/integrations/github-app/install"}>
+                  <Link target="_blank" to={"/api/integrations/github-app/install"} hasunderline>
                     Install Porter in more repositories
-                  </A>
+                  </Link>
                 </>
               )}
             </Placeholder>

dashboard/src/main/home/navbar/Navbar.tsx

@@ -26,15 +26,16 @@ class Navbar extends Component<PropsType, StateType> {
   renderSettingsDropdown = () => {
     if (this.state.showDropdown) {
       let version = this.context?.capabilities?.version;
+      let userEmail = this.context.user && this.context.user.email;
+      let isLongEmail = userEmail && userEmail.length > 25;
+      userEmail = "sarntdenadtendearnetdne@gmail.com"
       return (
         <>
           <CloseOverlay
             onClick={() => this.setState({ showDropdown: false })}
           />
           <Dropdown dropdownWidth="250px" dropdownMaxHeight="200px">
-            <DropdownLabel>
-              {this.context.user && this.context.user.email}
-            </DropdownLabel>
+            <DropdownLabel>{userEmail}</DropdownLabel>
             <UserDropdownButton
               onClick={() =>
                 this.context.setCurrentModal("AccountSettingsModal", {})
@@ -87,7 +88,6 @@ const VersionTag = styled.div`
   right: 10px;
   top: 15px;
   color: #ffffff22;
-  font-weight: 400;
 `;
 
 const SettingsIcon = styled.div`
@@ -125,7 +125,6 @@ const UserDropdownButton = styled.button`
   position: relative;
   height: 40px;
   font-size: 13px;
-  font-weight: 500;
   font-family: "Work Sans", sans-serif;
   color: white;
   width: 100%;
@@ -162,13 +161,9 @@ const DropdownLabel = styled.div`
   font-size: 13px;
   height: 40px;
   color: #ffffff44;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
   padding: 13px;
-  max-width: 180px;
-  white-space: nowrap;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
 `;
 
@@ -243,4 +238,4 @@ const NavButton = styled.a`
       props.selected ? "#ffffff" : "#ffffff88"};
     font-size: 20px;
   }
-`;
+`;

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -14,6 +14,8 @@ import { RouteComponentProps, withRouter, WithRouterProps } from "react-router";
 import { getQueryParam } from "shared/routing";
 import APITokensSection from "./APITokensSection";
 import _ from "lodash";
+import Link from "components/porter/Link";
+import Spacer from "components/porter/Spacer";
 
 type PropsType = RouteComponentProps & WithAuthProps & {};
 
@@ -153,16 +155,15 @@ class ProjectSettings extends Component<PropsType, StateType> {
           <Helper>
             Destruction of resources sometimes results in dangling resources. To
             ensure that everything has been properly destroyed, please visit
-            your cloud provider's console. Instructions to properly delete all
-            resources can be found
-            <a
-              target="none"
-              href="https://docs.getporter.dev/docs/deleting-dangling-resources"
+            your cloud provider's console.
+            <Spacer inline width="5px" />
+            <Link
+              target="_blank"
+              hasunderline
+              to="https://docs.porter.run/other/deleting-dangling-resources"
             >
-              {" "}
-              here
-            </a>
-            .
+              Deletion instructions
+            </Link>
           </Helper>
 
           <Warning highlight={true}>This action cannot be undone.</Warning>

dashboard/src/shared/common.tsx

@@ -102,12 +102,12 @@ export const integrationList: any = {
   gcp: {
     icon: gcp,
     label: "GCP",
-    tagline: "Coming soon"
+    tagline: "Contact support@porter.run"
   },
   azure: {
     icon: azure,
     label: "Azure",
-    tagline: "Coming soon"
+    tagline: "Contact support@porter.run"
   },
   do: {
     icon: digitalOcean,

dashboard/src/shared/hardcodedNameDict.tsx

@@ -1,3 +1,5 @@
+import lightning from "../assets/lightning.png";
+
 const hardcodedNames: { [key: string]: string } = {
   agones: "Agones System",
   docker: "Docker",
@@ -64,6 +66,7 @@ const hardcodedIcons: { [key: string]: string } = {
   "tailscale-relay": "https://play-lh.googleusercontent.com/wczDL05-AOb39FcL58L32h6j_TrzzGTXDLlOrOmJ-aNsnoGsT1Gkk2vU4qyTb7tGxRw=w240-h480-rw",
   "postgres-toolbox": "https://cdn-icons-png.flaticon.com/512/5133/5133626.png",
   "ecr-secrets-updater": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg",
+  "porter-agent": lightning,
 };
 
 export { hardcodedNames, hardcodedIcons };