feat: add resource conflict management components and enhance related functionality

Author: AbhishekA1509

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

@@ -1,13 +1,14 @@
 import { useMemo } from 'react'
 
-import { noop } from '@Common/Helper'
-
 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>{children}</div>
+const filter = () => true
 
 const ConflictedResourcesTable = ({ resourceConflictDetails }: ConflictedResourcesTableProps) => {
     const rows: RowsType<ResourceConflictItemType> = useMemo(
@@ -39,7 +40,7 @@ const ConflictedResourcesTable = ({ resourceConflictDetails }: ConflictedResourc
             }}
             filtersVariant={FiltersTypeEnum.STATE}
             ViewWrapper={Wrapper}
-            filter={noop}
+            filter={filter}
         />
     )
 }

src/Shared/Components/CICDHistory/ResourceConflictDeployDialog.tsx

@@ -30,7 +30,7 @@ const ResourceConflictDeployDialog = ({ appName, environmentName, handleClose }:
                 description: `Redeployment for application '${appName}' in environment '${environmentName}' has been initiated successfully.`,
             })
             handleClose()
-            history.push(`${URLS.APPLICATION_MANAGEMENT_APP}/${appId}/details/${envId}`)
+            history.push(`${URLS.APP}/${appId}/details/${envId}`)
         } catch (error) {
             showError(error)
         } finally {

src/Shared/Components/CICDHistory/ResourceConflictDetailsModal.tsx

@@ -13,7 +13,11 @@ import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
 import ConflictedResourcesTable from './ConflictedResourcesTable'
 import { getResourceConflictDetails, resourceConflictRedeploy } from './service'
-import { ResourceConflictDeployDialogURLParamsType, ResourceConflictDetailsModalProps } from './types'
+import {
+    ResourceConflictDeployDialogURLParamsType,
+    ResourceConflictDetailsModalProps,
+    ResourceConflictItemType,
+} from './types'
 
 const ResourceConflictDetailsModal = ({ appName, environmentName, handleClose }: ResourceConflictDetailsModalProps) => {
     const { appId, envId, pipelineId, triggerId } = useParams<ResourceConflictDeployDialogURLParamsType>()
@@ -24,11 +28,9 @@ const ResourceConflictDetailsModal = ({ appName, environmentName, handleClose }:
         data: resourceConflictDetails,
         refetch: refetchResourceConflictDetails,
         error: resourceConflictDetailsError,
-    } = useQuery({
-        queryKey: ['getResourceConflictDetails'],
-        // TODO: Signal
-        queryFn: () => getResourceConflictDetails(),
-        select: (data) => data.result,
+    } = 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)
@@ -47,7 +49,7 @@ const ResourceConflictDetailsModal = ({ appName, environmentName, handleClose }:
                 description: `Redeployment for application '${appName}' in environment '${environmentName}' has been initiated successfully.`,
             })
             handleClose()
-            history.push(`${URLS.APPLICATION_MANAGEMENT_APP}/${appId}/details/${envId}`)
+            history.push(`${URLS.APP}/${appId}/details/${envId}`)
         } catch (error) {
             showError(error)
         } finally {
@@ -77,7 +79,7 @@ const ResourceConflictDetailsModal = ({ appName, environmentName, handleClose }:
                         />
                     </div>
 
-                    <div className="flexbox flex-grow-1 dc__overflow-auto w-100">
+                    <div className="flexbox-col flex-grow-1 dc__overflow-auto w-100">
                         <APIResponseHandler
                             isLoading={isLoadingResourceData}
                             progressingProps={{
@@ -95,24 +97,32 @@ const ResourceConflictDetailsModal = ({ appName, environmentName, handleClose }:
                     </div>
                 </div>
 
-                <div className="flexbox dc__content-end dc__gap-12 py-16 px-20 border__primary--top dc__no-shrink">
-                    <Button
-                        dataTestId="footer-cancel-button"
-                        variant={ButtonVariantType.secondary}
-                        text="Cancel"
-                        style={ButtonStyleType.neutral}
-                        size={ComponentSizeType.large}
-                        onClick={handleClose}
-                    />
-
-                    <Button
-                        dataTestId="footer-redeploy-button"
-                        variant={ButtonVariantType.primary}
-                        size={ComponentSizeType.large}
-                        text="Re-deploy"
-                        isLoading={isDeploying}
-                        onClick={handleDeploy}
-                    />
+                <div className="flexbox 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={!!resourceConflictDetailsError || isLoadingResourceData}
+                            onClick={handleDeploy}
+                        />
+                    </div>
                 </div>
             </div>
         </Drawer>

src/Shared/Components/CICDHistory/TriggerDetails.tsx

@@ -491,7 +491,7 @@ const TriggerDetails = memo(
                 />
                  
                 <span className="cn-9 fw-4 fs-13 lh-20 dc__word-break">
-                    have ownership conflict. Take resource ownership and re-deploy
+                    have ownership conflicts. Resolve by taking ownership and redeploying.
                 </span>
             </div>
         )
@@ -635,8 +635,9 @@ const TriggerDetails = memo(
                                 namespace={namespace}
                             >
                                 {showResourceConflictInfoBlock && (
-                                    <div className="py-12 pr-12">
+                                    <div className="pt-12 pr-12">
                                         <InfoBlock
+                                            variant="warning"
                                             description={renderInfoBlockDescription()}
                                             buttonProps={{
                                                 dataTestId: 'resource-conflict-re-deploy',

src/Shared/Components/CICDHistory/constants.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { stringComparatorBySortOrder } from '@Shared/Helpers'
 import { WorkflowStatusEnum } from '@Shared/types'
 
 import { multiSelectStyles } from '../../../Common/MultiSelectCustomization'
@@ -186,6 +187,7 @@ export const CONFLICTED_RESOURCES_COLUMNS: TableProps<ResourceConflictItemType,
             },
         },
         isSortable: true,
+        comparator: stringComparatorBySortOrder,
         horizontallySticky: true,
     },
     {
@@ -198,6 +200,7 @@ export const CONFLICTED_RESOURCES_COLUMNS: TableProps<ResourceConflictItemType,
                 minWidth: 100,
             },
         },
+        comparator: stringComparatorBySortOrder,
         isSortable: true,
     },
     {
@@ -211,5 +214,6 @@ export const CONFLICTED_RESOURCES_COLUMNS: TableProps<ResourceConflictItemType,
             },
         },
         isSortable: true,
+        comparator: stringComparatorBySortOrder,
     },
 ]

src/Shared/Components/CICDHistory/service.tsx

@@ -17,6 +17,8 @@
 /* eslint-disable dot-notation */
 import moment from 'moment'
 
+import { GVKType, K8S_EMPTY_GROUP } from '@Pages/ResourceBrowser'
+
 import {
     get,
     getUrlWithSearchParams,
@@ -27,16 +29,20 @@ import {
     trash,
 } from '../../../Common'
 import { DATE_TIME_FORMAT_STRING, DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP, EXTERNAL_TYPES } from '../../constants'
-import { decode, getUniqueId, isNullOrUndefined } from '../../Helpers'
+import { decode, getGVKTitle, getUniqueId, isNullOrUndefined } from '../../Helpers'
 import { ResourceKindType, ResourceVersionType } from '../../types'
 import {
     DeploymentHistoryDetail,
     DeploymentHistoryResult,
     DeploymentHistorySingleValue,
     DeploymentStatusDetailsResponse,
     FetchIdDataStatus,
+    GetResourceConflictDetailsParamsType,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    GetResourceListItemPayloadType,
     ModuleConfigResponse,
     ResourceConflictItemType,
+    ResourceConflictListItemDTO,
     ResourceConflictRedeployParamsType,
     ResourceConflictRedeployPayloadType,
     TriggerDetailsResponseType,
@@ -312,57 +318,78 @@ export const resourceConflictRedeploy = async ({ pipelineId, triggerId, appId }:
         redeployHelmReleaseWithTakeOwnership: true,
     })
 
-export const getResourceConflictDetails = async (): Promise<ResponseType<ResourceConflictItemType[]>> => ({
-    code: 200,
-    result: [
-        {
-            name: 'resource-1',
-            namespace: 'default',
-            gvk: {
-                Group: 'apps',
-                Version: 'v1',
-                Kind: 'Deployment',
+export const getResourceConflictDetails = async ({
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    appId,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    pipelineId,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    triggerId,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    signal,
+}: GetResourceConflictDetailsParamsType): Promise<ResourceConflictItemType[]> => {
+    // const { result } = await post<ResourceConflictListItemDTO, GetResourceListItemPayloadType>(
+    //     ROUTES.RESOURCE_CONFLICTS_LIST,
+    //     {
+    //         appId: +appId,
+    //         pipelineId: +pipelineId,
+    //         wfrId: +triggerId,
+    //     },
+    //     { signal },
+    // )
+
+    const MOCK_RESULT: ResourceConflictListItemDTO = {
+        clusterId: 1,
+        conflictingResources: [
+            {
+                name: 'resource-1',
+                namespace: 'default',
+                groupVersionKind: {
+                    Group: 'apps',
+                    Version: 'v1',
+                    Kind: 'Deployment',
+                },
             },
-            gvkTitle: 'Deployment',
-            clusterId: 1,
-            id: getUniqueId(),
-        },
-        {
-            name: 'resource-2',
-            namespace: 'default',
-            gvk: {
-                Group: '',
-                Version: 'v1',
-                Kind: 'Service',
+            {
+                name: 'resource-2',
+                namespace: 'default',
+                groupVersionKind: {
+                    Group: '',
+                    Version: 'v1',
+                    Kind: 'Service',
+                },
             },
-            gvkTitle: 'Service',
-            clusterId: 1,
-            id: getUniqueId(),
-        },
-        {
-            name: 'resource-3',
-            namespace: 'default',
-            gvk: {
-                Group: 'apps',
-                Version: 'v1',
-                Kind: 'StatefulSet',
+            {
+                name: 'resource-3',
+                namespace: 'default',
+                groupVersionKind: {
+                    Group: 'apps',
+                    Version: 'v1',
+                    Kind: 'StatefulSet',
+                },
             },
-            gvkTitle: 'StatefulSet',
-            clusterId: 1,
-            id: getUniqueId(),
-        },
-        {
-            name: 'resource-4',
-            namespace: 'default',
-            gvk: {
-                Group: 'batch',
-                Version: 'v1',
-                Kind: 'Job',
+            {
+                name: 'resource-4',
+                namespace: 'default',
+                groupVersionKind: {
+                    Group: 'batch',
+                    Version: 'v1',
+                    Kind: 'Job',
+                },
             },
-            gvkTitle: 'Job',
-            clusterId: 1,
-            id: getUniqueId(),
+        ],
+    }
+
+    return (MOCK_RESULT?.conflictingResources || []).map<ResourceConflictItemType>((resource) => ({
+        name: resource.name || '',
+        namespace: resource.namespace || '',
+        gvk: {
+            Group: resource.groupVersionKind.Group || K8S_EMPTY_GROUP,
+            Version: resource.groupVersionKind.Version || '',
+            Kind: resource.groupVersionKind.Kind || ('' as GVKType['Kind']),
         },
-    ],
-    status: 'OK',
-})
+        gvkTitle: getGVKTitle(resource.groupVersionKind),
+        clusterId: MOCK_RESULT.clusterId,
+        id: getUniqueId(),
+    }))
+}