add a HoverTag component for deployments/deployment/alldeployments (#174

)
uselagoon · Oct 13, 2023 · cc270cc · cc270cc
1 parent 9cde809
commit cc270cc
Show file tree

Hide file tree

Showing 17 changed files with 131 additions and 52 deletions.
diff --git a/.storybook/mocks/api.ts b/.storybook/mocks/api.ts
@@ -125,6 +125,7 @@ export const MockBulkDeployments = (seed: number) => {
       name: faker.lorem.slug({ min: 1, max: 5 }),
       created: faker.date.past().toDateString(),
       started: faker.date.past().toDateString(),
+      buildStep:faker.word.words(),
       completed: faker.date.past().toDateString(),
       buildLog: faker.word.words(),
       bulkId: faker.string.uuid(),

diff --git a/.storybook/mocks/mocks.ts b/.storybook/mocks/mocks.ts
@@ -311,6 +311,7 @@ export const getDeployment = (seed: number) => {
     status: deployStatus(),
     created,
     started,
+    buildStep:faker.word.words(3),
     completed,
     environment: generateEnvironments({ seed }),
     remoteId: faker.number.int(),

diff --git a/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx b/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx
@@ -8,25 +8,29 @@ const BulkDeploymentsSkeleton = () => {
   const rowItem = (
     <div className="data-row">
       <div className="project">
-        <Skeleton />
+        <Skeleton width={'100%'} />
       </div>
       <div className="environment">
-        <Skeleton />
+        <Skeleton width={'100%'} />
       </div>
       <div className="name">
-        <Skeleton />
+        <Skeleton width={'100%'} />
       </div>
       <div className="priority">
-        <Skeleton />
+        <Skeleton width={'100%'} />
       </div>
-      <div className="started">
-        <Skeleton />
+      <div className="created">
+        <Skeleton width={'100%'} />
       </div>
-      <div className="status">
-        <Skeleton />
+      <div>
+        <Skeleton width={'100%'} />
+      </div>
+      <div className="duration">
+        <Skeleton width={'100%'} />
+      </div>
+      <div>
+        <Skeleton width={'100%'} />
       </div>
-      <div className="duration"></div>
-      <div></div>
     </div>
   );
 
@@ -35,11 +39,11 @@ const BulkDeploymentsSkeleton = () => {
       <BulkDeploymentsHeader>
         <label>Project</label>
         <label>Environment</label>
-        <label>Name</label>
+        <label className="name">Name</label>
         <label className="priority">Priority</label>
-        <label>Created</label>
-        <label>Status</label>
-        <label>Duration</label>
+        <label className="created">Created</label>
+        <label className="status">Status</label>
+        <label className="duration">Duration</label>
         <label></label>
       </BulkDeploymentsHeader>
       <BulkDeploymentsDataTable>{[...Array<undefined>(numberOfItems)].map(() => rowItem)}</BulkDeploymentsDataTable>

diff --git a/src/components/BulkDeployments/StyledBulkDeployments.tsx b/src/components/BulkDeployments/StyledBulkDeployments.tsx
@@ -2,12 +2,12 @@ import { bp, color } from 'lib/variables';
 import styled from 'styled-components';
 
 export const BulkDeploymentsHeader = styled.div`
+  padding-left: 20px;
   @media ${bp.tinyUp} {
     align-items: center;
     display: flex;
     justify-content: space-between;
     margin: 0 0 14px;
-    padding-right: 40px;
   }
   @media ${bp.smallOnly} {
     flex-wrap: wrap;
@@ -16,17 +16,17 @@ export const BulkDeploymentsHeader = styled.div`
     margin-top: 40px;
   }
 
-  label {
+  label:not(.priority) {
     display: none;
-    padding-left: 20px;
-    width: 25%;
+    width: 12.5%;
+    flex: 1;
+    gap: 0.25rem;
     @media ${bp.tinyUp} {
       display: block;
     }
   }
-
-  .priority {
-    width: 10%;
+  label.priority {
+    width: 8%;
   }
 `;
 
@@ -46,26 +46,19 @@ export const BulkDeploymentsDataTable = styled.div`
   }
 
   .data-row {
-    background-image: url('/static/images/right-arrow.svg');
-    background-position: right 20px center;
-    background-repeat: no-repeat;
-    background-size: 18px 11px;
-
     border: 1px solid ${props => props.theme.borders.tableRow};
     border-bottom: 1px solid ${props => props.theme.borders.tableRow};
     border-radius: 0;
     line-height: 1.5rem;
     padding: 8px 0 7px 0;
-    @media ${bp.tinyUp} {
-      display: flex;
-      justify-content: space-between;
-      padding-right: 40px;
-    }
-
-    & > div {
-      padding-left: 20px;
-      @media ${bp.tinyUp} {
-        width: 25%;
+    display: flex;
+    gap: 0.25rem;
+    padding-left: 20px;
+    & > div:not(.priority) {
+      width: 12.5%;
+      flex: 1;
+      &:last-child {
+        padding-left: 0;
       }
     }
 
@@ -92,7 +85,7 @@ export const BulkDeploymentsDataTable = styled.div`
     }
 
     .priority {
-      width: 10%;
+      width: 8%;
     }
 
     .status {
@@ -102,7 +95,17 @@ export const BulkDeploymentsDataTable = styled.div`
       background-position: left 7px;
       background-repeat: no-repeat;
       background-size: 10px 10px;
-
+      display: flex;
+      gap: 0.5rem;
+      align-items: start;
+      flex-wrap: wrap;
+      span:first-child {
+        @media screen and (min-width: 1500px) {
+          width: 40%;
+        }
+        display: inline-block;
+        margin-left: 20px;
+      }
       &.new {
         background-image: url('/static/images/pending.svg');
       }

diff --git a/src/components/BulkDeployments/index.tsx b/src/components/BulkDeployments/index.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import CancelDeployment from 'components/CancelDeployment';
 import { getDeploymentDuration } from 'components/Deployment';
+import HoverTag from 'components/HoverTag';
 import DeploymentLink from 'components/link/Deployment';
 import DeploymentsLink from 'components/link/Deployments';
 import ProjectLink from 'components/link/Project';
@@ -19,6 +20,7 @@ interface BulkDeploymentsProps {
     priority: string;
     status: string;
     created: string;
+    buildStep: string;
     environment: {
       openshiftProjectName: string;
       name: string;
@@ -34,11 +36,11 @@ const BulkDeployments: FC<BulkDeploymentsProps> = ({ deployments }) => (
     <BulkDeploymentsHeader>
       <label>Project</label>
       <label>Environment</label>
-      <label>Name</label>
+      <label className="name">Name</label>
       <label className="priority">Priority</label>
-      <label>Created</label>
-      <label>Status</label>
-      <label>Duration</label>
+      <label className="created">Created</label>
+      <label className="status">Status</label>
+      <label className="duration">Duration</label>
       <label></label>
     </BulkDeploymentsHeader>
     <BulkDeploymentsDataTable>
@@ -71,7 +73,10 @@ const BulkDeployments: FC<BulkDeploymentsProps> = ({ deployments }) => (
           <div className="priority">{deployment.priority}</div>
           <div className="started">{moment.utc(deployment.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}</div>
           <div className={`status ${deployment.status}`}>
-            {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}
+            <span>{deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)} </span>
+            {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && (
+              <HoverTag text={deployment.buildStep} maxWidth="160px" />
+            )}
           </div>
           <div className="duration">{getDeploymentDuration(deployment)}</div>
           <div>

diff --git a/src/components/Deployment/index.js b/src/components/Deployment/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 
 import Button from 'components/Button';
 import CancelDeployment from 'components/CancelDeployment';
+import HoverTag from 'components/HoverTag';
 import LogViewer from 'components/LogViewer';
 import BulkDeploymentLink from 'components/link/BulkDeployment';
 import moment from 'moment';
@@ -45,7 +46,10 @@ const Deployment = ({ deployment, checkedParseState, changeState }) => (
       <FieldWrapper className={`status ${deployment.status}`}>
         <div>
           <label>Status</label>
-          <div className="field">{deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}</div>
+          <div className="field">{deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}</div>{' '}
+          {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && (
+            <HoverTag text={deployment.buildStep} maxWidth="160px"/>
+          )}
         </div>
       </FieldWrapper>
       <FieldWrapper className="duration">

diff --git a/src/components/Deployments/DeploymentsSkeleton.tsx b/src/components/Deployments/DeploymentsSkeleton.tsx
@@ -15,7 +15,7 @@ const DeploymentsSkeleton = () => {
         <div className="started">
           <Skeleton />
         </div>
-        <div className="status">
+        <div>
           <Skeleton width={'80%'} />
         </div>
         <div className="duration">

diff --git a/src/components/Deployments/StyledDeployments.tsx b/src/components/Deployments/StyledDeployments.tsx
@@ -18,10 +18,10 @@ export const StyledDeployments = styled.div`
     }
 
     label {
-      width:25%;
+      width: 25%;
       display: none;
-      display:inline-block;
-      padding-left:20px;
+      display: inline-block;
+      padding-left: 20px;
       @media ${bp.tinyUp} {
         display: block;
       }
@@ -68,10 +68,10 @@ export const StyledDeployments = styled.div`
       .cancel-button {
         width: 10%;
         button {
-          width:90%;
-          padding:0 !important;
+          width: 90%;
+          padding: 0 !important;
           margin-right: unset !important;
-          height:30px;
+          height: 30px;
         }
         max-height: 100px;
       }
@@ -119,10 +119,16 @@ export const StyledDeployments = styled.div`
         @media ${bp.xs_smallOnly} {
           margin-left: 20px;
         }
+
         background-position: left 7px;
         background-repeat: no-repeat;
         background-size: 10px 10px;
-
+        display: flex;
+        gap: 0.5rem;
+        align-items: start;
+        @media screen and (max-width: 1300px) {
+          flex-wrap: wrap;
+        }
         &.new {
           background-image: url('/static/images/pending.svg');
         }

diff --git a/src/components/Deployments/index.tsx b/src/components/Deployments/index.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import CancelDeployment from 'components/CancelDeployment';
 import { getDeploymentDuration } from 'components/Deployment';
+import HoverTag from 'components/HoverTag';
 import BulkDeploymentLink from 'components/link/BulkDeployment';
 import DeploymentLink from 'components/link/Deployment';
 import moment from 'moment';
@@ -15,6 +16,7 @@ interface DeploymentsProps {
     bulkId: string;
     status: string;
     created: string;
+    buildStep?: string;
   }[];
   environmentSlug: string;
   projectSlug: string;
@@ -54,6 +56,10 @@ const Deployments: FC<DeploymentsProps> = ({ deployments, environmentSlug, proje
               </div>
               <div className={`status ${deployment.status}`}>
                 {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}
+
+                {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && (
+                  <HoverTag text={deployment.buildStep} maxWidth="160px" tooltipPosition="top" />
+                )}
               </div>
               <div className="duration">{getDeploymentDuration(deployment)} </div>
             </div>

diff --git a/src/components/DeploymentsByFilter/StyledDeploymentsByFilter.js b/src/components/DeploymentsByFilter/StyledDeploymentsByFilter.js
@@ -168,6 +168,11 @@ export const DeploymentsDataTable = styled.div`
       background-repeat: no-repeat;
       background-size: 10px 10px;
       text-indent: 20px;
+      .ant-tag {
+        display: block !important;
+        width: max-content;
+        text-indent: 0px;
+      }
 
       &.active {
         background-image: url('/static/images/in-progress.svg');

diff --git a/src/components/DeploymentsByFilter/index.js b/src/components/DeploymentsByFilter/index.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import CancelDeployment from 'components/CancelDeployment';
 import { getDeploymentDuration } from 'components/Deployment';
+import HoverTag from 'components/HoverTag';
 import DeploymentLink from 'components/link/Deployment';
 import DeploymentsLink from 'components/link/Deployments';
 import ProjectLink from 'components/link/Project';
@@ -199,6 +200,10 @@ const DeploymentsByFilter = ({ deployments }) => {
                 </div>
                 <div className={`status ${deployment.status}`}>
                   {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}
+
+                  {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && (
+                    <HoverTag text={deployment.buildStep} maxWidth="160px" tooltipPosition="bottom" />
+                  )}
                 </div>
                 <div className="duration">{getDeploymentDuration(deployment)}</div>
                 <div>

diff --git a/src/components/HoverTag/index.tsx b/src/components/HoverTag/index.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+import { Tag, Tooltip } from 'antd';
+import { TooltipPlacement } from 'antd/es/tooltip';
+
+import { TooltipText } from './styles';
+
+interface Props {
+  text: string;
+  tooltipPosition?: TooltipPlacement;
+  tagColor?: string;
+  maxWidth?: string;
+}
+const HoverTag: FC<Props> = ({ tooltipPosition, tagColor, maxWidth, text }) => {
+  return (
+    <Tag color={tagColor || '#108ee9'}>
+      {
+        <Tooltip placement={tooltipPosition || 'right'} title={text}>
+          <TooltipText maxWidth={maxWidth}>{text}</TooltipText>
+        </Tooltip>
+      }
+    </Tag>
+  );
+};
+
+export default HoverTag;
diff --git a/src/components/HoverTag/styles.tsx b/src/components/HoverTag/styles.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const TooltipText = styled.p<{ maxWidth?: string }>`
+  margin:unset;
+  max-width:${props => (props.maxWidth ? props.maxWidth : '150px')};
+  margin: unset;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
diff --git a/src/lib/query/BulkDeploymentById.js b/src/lib/query/BulkDeploymentById.js
@@ -7,6 +7,7 @@ export default gql`
       name
       status
       created
+      buildStep
       started
       completed
       buildLog
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ export default gql` @@
           name
           status
           created
+          buildStep
           started
           completed
           buildLog
@@ Expand Down @@