fix(css): Source Info card container

src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx

@@ -35,6 +35,10 @@
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as MenuDots } from '@Icons/ic-more-vertical.svg'
+import {
+    getManifestResource,
+    updateManifestResourceHelmApps,
+} from '@Components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.api'
 
 import { getShowResourceScanModal, importComponentFromFELibrary } from '../../common'
 import { NodeType } from '../../v2/appDetails/appDetails.type'
@@ -58,6 +62,8 @@
     'function',
 )
 
+const RBRestartWorkloadModal = importComponentFromFELibrary('RBRestartWorkloadModal', null, 'function')
+
 const ResourceBrowserActionMenu = forwardRef(
     (
         {
@@ -75,18 +81,20 @@
         const { installedModuleMap } = useMainContext()
 
         const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+        const [showRestartModal, setShowRestartModal] = useState(false)
         const [showVulnerabilityModal, setShowVulnerabilityModal] = useState(false)
 
+        const resource = {
+            name: String(resourceData.name),
+            namespace: String(resourceData.namespace),
+            group: selectedResource?.gvk?.Group,
+            kind: selectedResource?.gvk?.Kind,
+            version: selectedResource?.gvk?.Version,
+            clusterId: +clusterId,
+        }
+
         const [resourceScanLoading, resourceScanResponse, resourceScanError] = useAsync(
-            () =>
-                getResourceScanDetails({
-                    name: String(resourceData.name),
-                    namespace: String(resourceData.namespace),
-                    group: selectedResource?.gvk?.Group,
-                    kind: selectedResource?.gvk?.Kind,
-                    version: selectedResource?.gvk?.Version,
-                    clusterId: +clusterId,
-                }),
+            () => getResourceScanDetails(resource),
             [],
             showVulnerabilityModal && !!getResourceScanDetails,
         )
@@ -125,6 +133,9 @@
                         },
                     })
                     return
+                case ResourceBrowserActionMenuEnum.restart:
+                    setShowRestartModal(true)
+                    return
                 case ResourceBrowserActionMenuEnum.delete:
                     toggleDeleteDialog()
                     return
@@ -139,6 +150,10 @@
 
         const id = JSON.stringify(resourceData)
 
+        const onRestartWorkloadModalClose = () => {
+            setShowRestartModal(false)
+        }
+
         return (
             <>
                 <ActionMenu<ResourceBrowserActionMenuEnum>
@@ -158,6 +173,18 @@
                                     label: 'Events',
                                     startIcon: { name: 'ic-calendar' },
                                 },
+                                ...(RBRestartWorkloadModal &&
+                                window._env_.FEATURE_BULK_RESTART_WORKLOADS_FROM_RB.includes(
+                                    selectedResource?.gvk?.Kind.toLowerCase(),
+                                )
+                                    ? [
+                                          {
+                                              id: ResourceBrowserActionMenuEnum.restart,
+                                              label: 'Restart',
+                                              startIcon: { name: 'ic-arrow-clockwise' },
+                                          } as ActionMenuItemType<ResourceBrowserActionMenuEnum>,
+                                      ]
+                                    : []),
                                 ...(selectedResource?.gvk?.Kind === Nodes.Pod
                                     ? [
                                           {
@@ -227,6 +254,15 @@
                         hidePolicy
                     />
                 )}
+
+                {RBRestartWorkloadModal && showRestartModal && (
+                    <RBRestartWorkloadModal
+                        resource={resource}
+                        getManifestResource={getManifestResource}
+                        updateManifestResourceHelmApps={updateManifestResourceHelmApps}
+                        onClose={onRestartWorkloadModalClose}
+                    />
+                )}
             </>
         )
     },

src/components/app/details/appDetails/AppStatusCard.tsx

@@ -80,7 +80,7 @@ const AppStatusCard = ({ appDetails, status, cardLoading, setDetailed, message }
         <div
             data-testid="app-status-card"
             onClick={showApplicationDetailedModal}
-            className="app-details-info-card pointer flex left bg__primary br-8 mr-12 lh-20 w-200"
+            className="app-details-info-card pointer flex left bg__primary br-8 lh-20 w-200"
         >
             <div className="app-details-info-card__top-container flex">
                 <div className="app-details-info-card__top-container__content">

src/components/app/details/appDetails/DeployedCommitCard.tsx

@@ -54,7 +54,7 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
                     <div
                         data-testid="deployed-commit-card"
                         onClick={showCommitInfoDrawer}
-                        className="app-details-info-card pointer flex left bg__primary br-8 mr-12 lh-20 w-200"
+                        className="app-details-info-card pointer flex left bg__primary br-8 lh-20 w-200"
                     >
                         <div className="app-details-info-card__top-container flex">
                             <div className="app-details-info-card__top-container__content">

src/components/app/details/appDetails/DeploymentStatusCard.tsx

@@ -119,7 +119,7 @@ const DeploymentStatusCard = ({
         <div
             data-testid="deployment-status-card"
             onClick={onClickLastDeploymentStatus}
-            className={`app-details-info-card flex left bg__primary br-8 mr-12 lh-20 w-250 ${hideDetails ? '' : 'cursor'}`}
+            className={`app-details-info-card flex left bg__primary br-8 lh-20 w-250 ${hideDetails ? '' : 'cursor'}`}
         >
             {renderDeploymentStatus()}
         </div>

src/components/app/details/appDetails/IssuesCard.tsx

@@ -208,7 +208,7 @@ const IssuesCard = ({ cardLoading, setErrorsList, toggleIssuesModal, setDetailed
         <div
             data-testid="issues-card"
             onClick={cardLoading ? noop : showIssuesListingModal}
-            className="app-details-info-card pointer flex left bg__primary br-8 mr-12 lh-20 w-200"
+            className="app-details-info-card pointer flex left bg__primary br-8 lh-20 w-200"
         >
             <div className="app-details-info-card__top-container flex">
                 <div className="app-details-info-card__top-container__content">

src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx

@@ -158,7 +158,7 @@ export const SecurityVulnerabilityCard = ({
         <button type="button" className="dc__unset-button-styles" onClick={handleOnCardClick}>
             <div
                 data-testid="security-vulnerability-card"
-                className={`app-details-info-card flex left bg__primary br-8 mr-12 lh-20 w-200 ${cardLoading || scanResultError ? '' : 'pointer'}`}
+                className={`app-details-info-card flex left bg__primary br-8 lh-20 w-200 ${cardLoading || scanResultError ? '' : 'pointer'}`}
             >
                 <div className="app-details-info-card__top-container flex">
                     <div className="app-details-info-card__top-container__content">

src/components/app/details/appDetails/SourceInfo.tsx

@@ -415,7 +415,7 @@ export const SourceInfo = ({
                 ? shimmerLoaderBlocks()
                 : !isdeploymentAppDeleting &&
                   environment && (
-                      <div className="app-details-info-card-container flex left w-100 dc__row-gap-12 pb-16 dc__overflow-auto">
+                      <div className="app-details-info-card-container flex left w-100 dc__gap-12 pb-16 dc__overflow-auto">
                           {status && (
                               <AppStatusCard
                                   // TODO: Fix and remove

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component.tsx

@@ -18,6 +18,8 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { Redirect, Route, Switch, useLocation, useParams, useRouteMatch } from 'react-router-dom'
 
 import {
+    Button,
+    ButtonVariantType,
     capitalizeFirstLetter,
     Checkbox,
     CHECKBOX_VALUE,
@@ -26,6 +28,7 @@ import {
     DeploymentAppTypes,
     FormProps,
     getAIAnalyticsEvents,
+    Icon,
     noop,
     OptionsBase,
     OptionType,
@@ -67,7 +70,7 @@ import LogsComponent from './NodeDetailTabs/Logs.component'
 import ManifestComponent from './NodeDetailTabs/Manifest.component'
 import TerminalComponent from './NodeDetailTabs/Terminal.component'
 import EphemeralContainerDrawer from './EphemeralContainerDrawer'
-import { getManifestResource } from './nodeDetail.api'
+import { getManifestResource, updateManifestResourceHelmApps } from './nodeDetail.api'
 import { NodeDetailTab, ParamsType } from './nodeDetail.type'
 import { getContainersData, getNodeDetailTabs } from './nodeDetail.util'
 
@@ -79,6 +82,7 @@ const ToggleManifestConfigurationMode = importComponentFromFELibrary(
     null,
     'function',
 )
+const RBRestartWorkloadModal = importComponentFromFELibrary('RBRestartWorkloadModal', null, 'function')
 
 const NodeDetailComponent = ({
     loadingResources,
@@ -106,6 +110,7 @@ const NodeDetailComponent = ({
     const [fetchingResource, setFetchingResource] = useState(
         isResourceBrowserView && nodeType === Nodes.Pod.toLowerCase(),
     )
+    const [showRestartModal, setShowRestartModal] = useState(false)
     const [selectedContainer, setSelectedContainer] = useState<Map<string, string>>(new Map())
     const [showEphemeralContainerDrawer, setShowEphemeralContainerDrawer] = useState<boolean>(false)
     const [ephemeralContainerType, setEphemeralContainerType] = useState<string>(EDITOR_VIEW.BASIC)
@@ -375,6 +380,10 @@ const NodeDetailComponent = ({
         setManifestCodeEditorMode(ManifestCodeEditorMode.REVIEW)
     }
 
+    const onRestartWorkloadModalClose = () => {
+        setShowRestartModal(false)
+    }
+
     const handleManifestCompareWithDesired = () => setShowManifestCompareView(true)
 
     const renderPodTerminal = (): JSX.Element => {
@@ -518,6 +527,10 @@ const NodeDetailComponent = ({
         },
     }))
 
+    const onRestartWorkloadButtonClick = () => {
+        setShowRestartModal(true)
+    }
+
     return (
         <>
             <div className="w-100 pr-20 pl-20 bg__primary flex border__secondary--bottom dc__content-space h-32">
@@ -550,6 +563,20 @@ const NodeDetailComponent = ({
                         </>
                     )}
                     {selectedTabName === NodeDetailTab.MANIFEST && renderManifestTabHeader()}
+                    {RBRestartWorkloadModal &&
+                        window._env_.FEATURE_BULK_RESTART_WORKLOADS_FROM_RB.includes(nodeType.toLowerCase()) && (
+                            <>
+                                <div className="ml-12 mr-12 tab-cell-border" />
+                                <Button
+                                    dataTestId="restart-workload-button"
+                                    variant={ButtonVariantType.text}
+                                    size={ComponentSizeType.small}
+                                    startIcon={<Icon name="ic-arrow-clockwise" color={null} />}
+                                    onClick={onRestartWorkloadButtonClick}
+                                    text="Restart"
+                                />
+                            </>
+                        )}
                 </div>
                 {isResourceBrowserView &&
                     !hideDeleteButton && ( // hide delete button if resource is deleted or user is not authorized
@@ -670,6 +697,14 @@ const NodeDetailComponent = ({
                     handleClearBulkSelection={noop}
                 />
             )}
+            {RBRestartWorkloadModal && showRestartModal && (
+                <RBRestartWorkloadModal
+                    resource={selectedResource}
+                    getManifestResource={getManifestResource}
+                    updateManifestResourceHelmApps={updateManifestResourceHelmApps}
+                    onClose={onRestartWorkloadModalClose}
+                />
+            )}
         </>
     )
 }

src/components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard.tsx

@@ -30,7 +30,7 @@ const HelmAppConfigApplyStatusCard = ({ releaseStatus, cardLoading }: HelmAppCon
     return releaseStatus ? (
         <div
             data-testid="helm-config-apply-status-card"
-            className="app-details-info-card flex left bg__primary br-8 mr-12 w-200"
+            className="app-details-info-card flex left bg__primary br-8 w-200"
         >
             <div className="app-details-info-card__top-container flexbox dc__gap-12">
                 <div className="app-details-info-card__top-container__content">