deploy event footer (#3122)

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

@@ -841,7 +841,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
           <Back to="/apps" />
           <Container row>
             {renderIcon(appData.app?.build_packs)}
-            <Spacer inline x={0.5} />
+            <Spacer inline x={1} />
             <Text size={21}>{appData.app.name}</Text>
             {appData.app.repo_name && (
               <>

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/AppEventCard.tsx

@@ -67,9 +67,9 @@ const AppEventCard: React.FC<Props> = ({ event, appData }) => {
     <StyledEventCard row>
       <Container row spaced>
         <Container row spaced>
-          <Icon height="18px" src={app_event} />
+          <Icon height="16px" src={app_event} />
           <Spacer inline width="10px" />
-          <Text size={14} additionalStyles={"overflow: auto;max-height: 70px;max-width: 600px;"}>{event.metadata.detail}</Text>
+          <Text additionalStyles={"overflow: auto;max-height: 70px;max-width: 600px;"}>{event.metadata.detail}</Text>
         </Container>
       </Container>
       <Container row spaced>

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/BuildEventCard.tsx

@@ -185,9 +185,9 @@ const BuildEventCard: React.FC<Props> = ({ event, appData }) => {
     <StyledEventCard>
       <Container row spaced>
         <Container row>
-          <Icon height="18px" src={build} />
+          <Icon height="16px" src={build} />
           <Spacer inline width="10px" />
-          <Text size={14}>Application build</Text>
+          <Text>Application build</Text>
         </Container>
         <Container row>
           <Icon height="14px" src={run_for} />
@@ -198,7 +198,7 @@ const BuildEventCard: React.FC<Props> = ({ event, appData }) => {
       <Spacer y={1} />
       <Container row spaced>
         <Container row>
-          <Icon height="18px" src={getStatusIcon(event.status)} />
+          <Icon height="16px" src={getStatusIcon(event.status)} />
           <Spacer inline width="10px" />
           {renderStatusText(event)}
           <Spacer inline x={1} />

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/DeployEventCard.tsx

@@ -15,6 +15,7 @@ import { StyledEventCard } from "./EventCard";
 import styled from "styled-components";
 import Button from "components/porter/Button";
 import api from "shared/api";
+import Link from "components/porter/Link";
 
 type Props = {
   event: PorterAppEvent;
@@ -28,7 +29,7 @@ const DeployEventCard: React.FC<Props> = ({ event, appData }) => {
   const renderStatusText = (event: PorterAppEvent) => {
     switch (event.status) {
       case "SUCCESS":
-        return event.metadata.image_tag ? <Text color="#68BF8B">Deployed <Code>{event.metadata.image_tag}</Code></Text> : <Text color="#68BF8B">Deployment successful</Text>;
+        return event?.metadata?.image_tag ? <Text color="#68BF8B">Deployed <Code>{event?.metadata?.image_tag}</Code></Text> : <Text color="#68BF8B">Deployment successful</Text>;
       case "FAILED":
         return <Text color="#FF6060">Deployment failed</Text>;
       default:
@@ -57,30 +58,27 @@ const DeployEventCard: React.FC<Props> = ({ event, appData }) => {
   }
 
   return (
-    <StyledEventCard row>
-      <Container column alignItems="flex-start">
-        <Container row spaced>
-          <Container row>
-            <Icon height="18px" src={deploy} />
-            <Spacer inline width="10px" />
-            <Text size={14}>Application version no. {event.metadata?.revision}</Text>
-          </Container>
-        </Container>
-        <Spacer y={0.5} />
-        <Container row spaced>
-          <Container row>
-            <Icon height="18px" src={getStatusIcon(event.status)} />
-            <Spacer inline width="10px" />
-            {renderStatusText(event)}
-          </Container>
+    <StyledEventCard>
+      <Container row spaced>
+        <Container row>
+          <Icon height="16px" src={deploy} />
+          <Spacer inline width="10px" />
+          <Text>Application version no. {event.metadata?.revision}</Text>
         </Container>
       </Container>
+      <Spacer y={1} />
       <Container row spaced>
-        <RevertButton onClick={() => revertToRevision(event.metadata.revision)}>
-          <Icon src={refresh} height={"13px"} />
-          <Spacer inline width="6px" />
-          <Text>Revert</Text>
-        </RevertButton>
+        <Container row>
+          <Icon height="16px" src={getStatusIcon(event.status)} />
+          <Spacer inline width="10px" />
+          {renderStatusText(event)}
+          <Spacer inline x={1} />
+          <TempWrapper>
+            <Link hasunderline onClick={() => revertToRevision(event.metadata.revision)}>
+              Revert to v{event?.metadata?.revision}
+            </Link>
+          </TempWrapper>
+        </Container>
       </Container>
     </StyledEventCard>
   );
@@ -88,6 +86,11 @@ const DeployEventCard: React.FC<Props> = ({ event, appData }) => {
 
 export default DeployEventCard;
 
+// TODO: remove after fixing v-align
+const TempWrapper = styled.div`
+  margin-top: -3px;
+`;
+
 const Code = styled.span`
   font-family: monospace;
 `;

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/PreDeployEventCard.tsx

@@ -76,9 +76,9 @@ const PreDeployEventCard: React.FC<Props> = ({ event, appData }) => {
     <StyledEventCard>
       <Container row spaced>
         <Container row>
-          <Icon height="18px" src={pre_deploy} />
+          <Icon height="16px" src={pre_deploy} />
           <Spacer inline width="10px" />
-          <Text size={14}>Application pre-deploy</Text>
+          <Text>Application pre-deploy</Text>
         </Container>
         <Container row>
           <Icon height="14px" src={run_for} />
@@ -89,7 +89,7 @@ const PreDeployEventCard: React.FC<Props> = ({ event, appData }) => {
       <Spacer y={1} />
       <Container row spaced>
         <Container row>
-          <Icon height="18px" src={getStatusIcon(event.status)} />
+          <Icon height="16px" src={getStatusIcon(event.status)} />
           <Spacer inline width="10px" />
           {renderStatusText(event)}
           <Spacer inline x={1} />

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

@@ -8,14 +8,16 @@ import styled from "styled-components";
 import { SourceType } from "./SourceSelector";
 import ActionConfEditorStack from "components/repo-selector/ActionConfEditorStack";
 import { ActionConfigType, BuildConfig } from "shared/types";
-import { RouteComponentProps } from "react-router";
+import { RouteComponentProps, withRouter } from "react-router";
 import { Context } from "shared/Context";
 import ActionConfBranchSelector from "components/repo-selector/ActionConfBranchSelector";
 import DetectContentsList from "components/repo-selector/DetectContentsList";
 import { pushFiltered } from "shared/routing";
 import ImageSelector from "components/image-selector/ImageSelector";
 import SharedBuildSettings from "../expanded-app/SharedBuildSettings";
-type Props = {
+import Link from "components/porter/Link";
+
+type Props = RouteComponentProps & {
   source: SourceType | undefined;
   imageUrl: string;
   setImageUrl: (x: string) => void;
@@ -103,14 +105,15 @@ const SourceSettings: React.FC<Props> = ({
           <Subtitle>
             Specify the container image you would like to connect to this
             template.
-            <Highlight
+            <Spacer inline width="5px" />
+            <Link
+              hasunderline
               onClick={() =>
                 pushFiltered(props, "/integrations/registry", ["project_id"])
               }
             >
               Manage Docker registries
-            </Highlight>
-            <Required>*</Required>
+            </Link>
           </Subtitle>
           <DarkMatter antiHeight="-4px" />
           <ImageSelector
@@ -160,7 +163,7 @@ const SourceSettings: React.FC<Props> = ({
   );
 };
 
-export default SourceSettings;
+export default withRouter(SourceSettings);
 
 const SourceSettingsContainer = styled.div``;
 
@@ -177,12 +180,6 @@ const Subtitle = styled.div`
   line-height: 1.6em;
 `;
 
-const Required = styled.div`
-  margin-left: 8px;
-  color: #fc4976;
-  display: inline-block;
-`;
-
 const CloseButton = styled.div`
   position: absolute;
   display: block;