feat: resource conflict

src/Common/API/reactQueryHooks.ts

@@ -28,8 +28,18 @@ import {
 import { ServerErrors } from '@Common/ServerError'
 import { ResponseType } from '@Common/Types'
 
-export const useQuery = <TQueryFnData = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
-    options: UseQueryOptions<ResponseType<TQueryFnData>, ServerErrors, TData, TQueryKey>,
+export const useQuery = <
+    TQueryFnData = unknown,
+    TData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    WrapWithResponseType extends boolean = true,
+>(
+    options: UseQueryOptions<
+        WrapWithResponseType extends true ? ResponseType<TQueryFnData> : TQueryFnData,
+        ServerErrors,
+        TData,
+        TQueryKey
+    >,
 ): UseQueryResult<TData, ServerErrors> => rqUseQuery(options)
 
 export const useMutation = <TData = unknown, TVariables = void, TContext = unknown>(

src/Common/Constants.ts

@@ -162,6 +162,7 @@ export const ROUTES = {
     LICENSE_DATA: 'license/data',
     ENV: 'env',
     APP_METADATA: 'app-metadata',
+    RESOURCE_CONFLICTS_LIST: 'app/template/helm-ownership-conflicts',
 } as const
 
 export enum KEY_VALUE {

src/Shared/Components/CICDHistory/ConflictedResourcesTable.scss

@@ -0,0 +1,9 @@
+[id*="table__resource-conflict-details"] {
+    .generic-table__row {
+        .generic-table__cell {
+            display: flex;
+            align-items: center;
+            padding: 10px 0;
+        }
+    }
+}

src/Shared/Components/CICDHistory/ConflictedResourcesTable.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+
+import { FiltersTypeEnum, PaginationEnum, Table, TableViewWrapperProps } from '../Table'
+import { RowsType } from '../Table/types'
+import { CONFLICTED_RESOURCES_COLUMNS } from './constants'
+import { ConflictedResourcesTableProps, ResourceConflictItemType } from './types'
+
+import './ConflictedResourcesTable.scss'
+
+const Wrapper = ({ children }: TableViewWrapperProps<unknown, FiltersTypeEnum.STATE>) => (
+    <div className="dc__overflow-hidden flexbox-col flex-grow-1">{children}</div>
+)
+const filter = () => true
+
+const ConflictedResourcesTable = ({ resourceConflictDetails }: ConflictedResourcesTableProps) => {
+    const rows: RowsType<ResourceConflictItemType> = useMemo(
+        () =>
+            (resourceConflictDetails || []).map<RowsType<ResourceConflictItemType>[number]>((resource) => ({
+                data: resource,
+                id: resource.id,
+            })),
+        [resourceConflictDetails],
+    )
+
+    return (
+        <Table<ResourceConflictItemType, FiltersTypeEnum.STATE>
+            id="table__resource-conflict-details"
+            columns={CONFLICTED_RESOURCES_COLUMNS}
+            rows={rows}
+            emptyStateConfig={{
+                noRowsConfig: {
+                    title: 'No resource found',
+                },
+                noRowsForFilterConfig: {
+                    title: 'No results',
+                    subTitle: "We couldn't find any matching results",
+                },
+            }}
+            paginationVariant={PaginationEnum.NOT_PAGINATED}
+            additionalFilterProps={{
+                initialSortKey: 'name' satisfies keyof ResourceConflictItemType,
+            }}
+            filtersVariant={FiltersTypeEnum.STATE}
+            ViewWrapper={Wrapper}
+            filter={filter}
+        />
+    )
+}
+
+export default ConflictedResourcesTable

src/Shared/Components/CICDHistory/ResourceConflictDeployDialog.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
+
+import { URLS } from '@Common/Constants'
+import { showError } from '@Common/Helper'
+
+import { ButtonStyleType } from '../Button'
+import { ConfirmationModal, ConfirmationModalVariantType } from '../ConfirmationModal'
+import { Icon } from '../Icon'
+import { resourceConflictRedeploy } from './service'
+import { ResourceConflictDeployDialogProps, ResourceConflictDeployDialogURLParamsType } from './types'
+
+const ResourceConflictDeployDialog = ({ appName, environmentName, handleClose }: ResourceConflictDeployDialogProps) => {
+    const history = useHistory()
+    const { appId, envId, pipelineId, triggerId } = useParams<ResourceConflictDeployDialogURLParamsType>()
+    const [isLoading, setIsLoading] = useState(false)
+
+    const handleDeploy = async () => {
+        setIsLoading(true)
+        try {
+            await resourceConflictRedeploy({
+                pipelineId,
+                triggerId,
+                appId,
+            })
+            history.push(`${URLS.APP}/${appId}/details/${envId}`)
+        } catch (error) {
+            showError(error)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <ConfirmationModal
+            variant={ConfirmationModalVariantType.custom}
+            Icon={<Icon name="ic-warning" color={null} size={48} />}
+            title="Take resource ownership and redeploy"
+            subtitle={`Ensure the resources belong to the '${appName}' application and the '${environmentName}' environment to avoid destructive changes.`}
+            handleClose={handleClose}
+            buttonConfig={{
+                secondaryButtonConfig: {
+                    text: 'Cancel',
+                    onClick: handleClose,
+                },
+                primaryButtonConfig: {
+                    isLoading,
+                    text: 'Re-deploy',
+                    onClick: handleDeploy,
+                    style: ButtonStyleType.warning,
+                },
+            }}
+        />
+    )
+}
+
+export default ResourceConflictDeployDialog

src/Shared/Components/CICDHistory/ResourceConflictDetailsModal.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
+
+import { useQuery } from '@Common/API'
+import { URLS } from '@Common/Constants'
+import { Drawer } from '@Common/Drawer'
+import { showError, stopPropagation } from '@Common/Helper'
+import { ComponentSizeType } from '@Shared/constants'
+
+import { APIResponseHandler } from '../APIResponseHandler'
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
+import { Icon } from '../Icon'
+import ConflictedResourcesTable from './ConflictedResourcesTable'
+import { getResourceConflictDetails, resourceConflictRedeploy } from './service'
+import {
+    ResourceConflictDeployDialogURLParamsType,
+    ResourceConflictDetailsModalProps,
+    ResourceConflictItemType,
+} from './types'
+
+const ResourceConflictDetailsModal = ({ appName, environmentName, handleClose }: ResourceConflictDetailsModalProps) => {
+    const { appId, envId, pipelineId, triggerId } = useParams<ResourceConflictDeployDialogURLParamsType>()
+    const history = useHistory()
+
+    const {
+        isFetching: isLoadingResourceData,
+        data: resourceConflictDetails,
+        refetch: refetchResourceConflictDetails,
+        error: resourceConflictDetailsError,
+    } = useQuery<ResourceConflictItemType[], ResourceConflictItemType[], [string, string, string, string], false>({
+        queryKey: ['getResourceConflictDetails', pipelineId, triggerId, appId],
+        queryFn: ({ signal }) => getResourceConflictDetails({ pipelineId, triggerId, appId, signal }),
+    })
+
+    const [isDeploying, setIsDeploying] = useState(false)
+
+    const handleDeploy = async () => {
+        setIsDeploying(true)
+        try {
+            await resourceConflictRedeploy({
+                pipelineId,
+                triggerId,
+                appId,
+            })
+            history.push(`${URLS.APP}/${appId}/details/${envId}`)
+        } catch (error) {
+            showError(error)
+        } finally {
+            setIsDeploying(false)
+        }
+    }
+
+    return (
+        <Drawer width="800px" onClose={handleClose} onEscape={handleClose} position="right">
+            <div
+                className="flexbox-col dc__content-space h-100 bg__modal--primary shadow__modal dc__overflow-auto"
+                onClick={stopPropagation}
+            >
+                <div className="flexbox-col dc__overflow-auto flex-grow-1">
+                    <div className="px-20 py-12 flexbox dc__content-space dc__align-items-center border__primary--bottom">
+                        <h2 className="m-0 fs-16 fw-6 lh-24 cn-9">Resources with conflict</h2>
+
+                        <Button
+                            dataTestId="header-close-button"
+                            ariaLabel="Close"
+                            showAriaLabelInTippy={false}
+                            onClick={handleClose}
+                            variant={ButtonVariantType.borderLess}
+                            style={ButtonStyleType.negativeGrey}
+                            icon={<Icon name="ic-close-large" color={null} />}
+                            size={ComponentSizeType.xs}
+                        />
+                    </div>
+
+                    <div className="flexbox-col flex-grow-1 dc__overflow-auto w-100">
+                        <APIResponseHandler
+                            isLoading={isLoadingResourceData}
+                            progressingProps={{
+                                pageLoader: true,
+                            }}
+                            error={resourceConflictDetailsError}
+                            errorScreenManagerProps={{
+                                code: resourceConflictDetailsError?.code,
+                                reload: refetchResourceConflictDetails,
+                                on404Redirect: handleClose,
+                            }}
+                        >
+                            <ConflictedResourcesTable resourceConflictDetails={resourceConflictDetails} />
+                        </APIResponseHandler>
+                    </div>
+                </div>
+
+                <div className="flexbox dc__align-items-center dc__content-space dc__gap-20 py-16 px-20 border__primary--top dc__no-shrink">
+                    <div className="flexbox dc__gap-8">
+                        <Icon name="ic-warning" size={20} color={null} />
+                        <div className="flexbox-col">
+                            <span className="cn-9 fs-13 fw-6 lh-1-5">Take resource ownership and redeploy</span>
+                            <span>
+                                Ensure all resources strictly belong to the {appName} application and the&nbsp;
+                                {environmentName}
+                                environment. Any resource outside this Helm release may cause incorrect associations and
+                                potentially destructive changes.
+                            </span>
+                        </div>
+                    </div>
+                    <div className="dc__no-shrink">
+                        <Button
+                            dataTestId="footer-redeploy-button"
+                            variant={ButtonVariantType.primary}
+                            style={ButtonStyleType.warning}
+                            size={ComponentSizeType.large}
+                            text="Re-deploy"
+                            startIcon={<Icon name="ic-rocket-launch" color={null} />}
+                            isLoading={isDeploying}
+                            disabled={!resourceConflictDetails?.length}
+                            onClick={handleDeploy}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Drawer>
+    )
+}
+
+export default ResourceConflictDetailsModal

src/Shared/Components/CICDHistory/Sidebar.tsx

@@ -41,7 +41,12 @@ import {
     HistorySummaryCardType,
     SidebarType,
 } from './types'
-import { getHistoryItemStatusIconFromWorkflowStages, getTriggerStatusIcon, getWorkflowNodeStatusTitle } from './utils'
+import {
+    getHistoryItemStatusIconFromWorkflowStages,
+    getSortedTriggerHistory,
+    getTriggerStatusIcon,
+    getWorkflowNodeStatusTitle,
+} from './utils'
 
 /**
  * @description To be shown on deployment history or when we don't have workflowExecutionStages
@@ -378,30 +383,28 @@ const Sidebar = React.memo(
                     {fetchIdData === FetchIdDataStatus.SUCCESS && (
                         <ViewAllCardsTile handleViewAllHistory={handleViewAllHistory} />
                     )}
-                    {Array.from(triggerHistory)
-                        .sort(([a], [b]) => b - a)
-                        .map(([triggerId, triggerDetails], index) => (
-                            <HistorySummaryCard
-                                dataTestId={`deployment-history-${index}`}
-                                key={triggerId}
-                                id={triggerId}
-                                status={triggerDetails.status}
-                                startedOn={triggerDetails.startedOn}
-                                triggeredBy={triggerDetails.triggeredBy}
-                                triggeredByEmail={triggerDetails.triggeredByEmail}
-                                ciMaterials={triggerDetails.ciMaterials}
-                                gitTriggers={triggerDetails.gitTriggers}
-                                artifact={triggerDetails.artifact}
-                                stage={triggerDetails.stage}
-                                type={type}
-                                runSource={triggerDetails.runSource}
-                                renderRunSource={renderRunSource}
-                                resourceId={resourceId}
-                                workflowExecutionStages={triggerDetails.workflowExecutionStages}
-                                podName={triggerDetails.podName}
-                                namespace={triggerDetails.namespace}
-                            />
-                        ))}
+                    {getSortedTriggerHistory(triggerHistory).map(([triggerId, triggerDetails], index) => (
+                        <HistorySummaryCard
+                            dataTestId={`deployment-history-${index}`}
+                            key={triggerId}
+                            id={triggerId}
+                            status={triggerDetails.status}
+                            startedOn={triggerDetails.startedOn}
+                            triggeredBy={triggerDetails.triggeredBy}
+                            triggeredByEmail={triggerDetails.triggeredByEmail}
+                            ciMaterials={triggerDetails.ciMaterials}
+                            gitTriggers={triggerDetails.gitTriggers}
+                            artifact={triggerDetails.artifact}
+                            stage={triggerDetails.stage}
+                            type={type}
+                            runSource={triggerDetails.runSource}
+                            renderRunSource={renderRunSource}
+                            resourceId={resourceId}
+                            workflowExecutionStages={triggerDetails.workflowExecutionStages}
+                            podName={triggerDetails.podName}
+                            namespace={triggerDetails.namespace}
+                        />
+                    ))}
                     {hasMore && (fetchIdData === FetchIdDataStatus.SUSPEND || !fetchIdData) && (
                         <DetectBottom callback={reloadNextAfterBottom} />
                     )}