Merge pull request #674 from devtron-labs/fix/release-css

fix: add css from base in artifact and open deployment detail live status url in new tab

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.10.9",
+    "version": "1.10.10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -297,7 +297,7 @@ export const ImageTagsContainer = ({
 
     if (newDescription === '' && displayedTags.length === 0 && !isEditing) {
         return tagsEditable ? (
-            <div className="bg__primary mt-8 add-image-button">
+            <div className="bg__primary mt-8 flexbox">
                 <AddImageButton handleEditClick={handleEditClick} />
             </div>
         ) : (
@@ -568,11 +568,13 @@ const AddImageButton = ({ handleEditClick }) => {
     }
 
     return (
-        <div className="add-tag-button flex pt-12 pr-12" data-testid="add-tags-button" onClick={handleClick}>
-            <div className="lh-16 flex">
-                <Add className="icon-dim-16 cn-6" />
-                <span className="cn-7">Add labels/comment</span>
-            </div>
-        </div>
+        <button
+            className="dc__transparent px-8 py-4 flexbox dc__align-items-center dc__gap-4 dc__border-dashed--n3 br-4"
+            data-testid="add-tags-button"
+            onClick={handleClick}
+        >
+            <Add className="icon-dim-16 cn-6 dc__no-shrink" />
+            <span className="cn-7 lh-16">Add labels/comment</span>
+        </button>
     )
 }

src/Common/ImageTags.tsx

@@ -98,7 +98,7 @@ export const CIListItem = ({
                 }`}
                 data-testid="hover-on-report-artifact"
             >
-                <div className="ci-artifacts-grid flex left">
+                <div className="flex left dc__gap-12">
                     <div className="bcn-1 flex br-4 icon-dim-40">
                         <img src={type === 'report' ? folder : docker} className="icon-dim-20" alt="type" />
                     </div>

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -29,7 +29,7 @@ import { ReactComponent as Arrow } from '../../../Assets/Icon/ic-arrow-forward.s
 import mechanicalOperation from '../../../Assets/Icon/ic-mechanical-operation.svg'
 import CDEmptyState from './CDEmptyState'
 import DeploymentStatusDetailBreakdown from './DeploymentStatusBreakdown'
-import { getIsApprovalPolicyConfigured, processDeploymentStatusDetailsData } from '../../Helpers'
+import { getHandleOpenURL, getIsApprovalPolicyConfigured, processDeploymentStatusDetailsData } from '../../Helpers'
 
 let deploymentStatusTimer = null
 const DeploymentDetailSteps = ({
@@ -119,16 +119,15 @@ const DeploymentDetailSteps = ({
 
     const redirectToDeploymentStatus = () => {
         if (isHelmApps) {
-            history.push({
-                pathname: `${URLS.APP}/${URLS.DEVTRON_CHARTS}/${URLS.APP_DEPLOYMNENT_HISTORY}/${appId}/env/${envId}/${URLS.DETAILS}/${URLS.APP_DETAILS_K8}`,
-                search: DEPLOYMENT_STATUS_QUERY_PARAM,
-            })
+            getHandleOpenURL(
+                `${window.__BASE_URL__}${URLS.APP}/${URLS.DEVTRON_CHARTS}/${URLS.APP_DEPLOYMNENT_HISTORY}/${appId}/env/${envId}/${URLS.DETAILS}/${URLS.APP_DETAILS_K8}?${DEPLOYMENT_STATUS_QUERY_PARAM}`,
+            )()
             return
         }
-        history.push({
-            pathname: `${URLS.APP}/${appId}/${URLS.APP_DETAILS}/${envId}/${URLS.APP_DETAILS_K8}`,
-            search: DEPLOYMENT_STATUS_QUERY_PARAM,
-        })
+
+        getHandleOpenURL(
+            `${window.__BASE_URL__}${URLS.APP}/${appId}/${URLS.APP_DETAILS}/${envId}/${URLS.APP_DETAILS_K8}?${DEPLOYMENT_STATUS_QUERY_PARAM}`,
+        )()
     }
 
     const getDeploymentStatusDetails = () =>

src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx

@@ -92,7 +92,7 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
     const CDBuildReportUrl = `app/cd-pipeline/workflow/download/${appId}/${envId}/${pipelineId}/${triggerId}`
 
     return (
-        <div className="trigger-outputs-container flexbox-col flex-grow-1 h-100">
+        <div className="trigger-outputs-container bg__tertiary flexbox-col flex-grow-1 h-100">
             {loading ? (
                 <Progressing pageLoader />
             ) : (