feat : Group chaos infra in infrastructure selection modal

chaoscenter/web/src/api/entities/environment.ts

@@ -23,3 +23,9 @@ export interface EnvironmentSortInput {
   field: SortType;
   ascending: boolean;
 }
+
+export interface EnvironmentDetail {
+  envName: string;
+  envID: string;
+  totalInfra?: number | null;
+}

chaoscenter/web/src/controllers/KubernetesChaosInfrastructureReferenceField/KubernetesChaosInfrastructureReferenceField.tsx

@@ -1,9 +1,9 @@
 import { Pagination, useToaster } from '@harnessio/uicore';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { listChaosInfra } from '@api/core';
 import { getScope } from '@utils';
 import ChaosInfrastructureReferenceFieldView from '@views/ChaosInfrastructureReferenceField';
-import type { ChaosInfrastructureReferenceFieldProps } from '@models';
+import { AllEnv, type ChaosInfrastructureReferenceFieldProps } from '@models';
 import type { InfrastructureDetails } from '@views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField';
 import { listEnvironment } from '@api/core/environments';
 
@@ -16,14 +16,13 @@ function KubernetesChaosInfrastructureReferenceFieldController({
   const { showError } = useToaster();
   const [searchInfrastructure, setSearchInfrastructure] = React.useState<string>('');
   const [page, setPage] = React.useState<number>(0);
-  const limit = 5;
-  const [envID, setEnvID] = React.useState<string>('all');
+  const [limit, setLimit] = React.useState<number>(5);
+  const [envID, setEnvID] = React.useState<string>(AllEnv.AllEnv);
   const [initialAllInfrastructureLength, setInitialAllInfrastructureLength] = React.useState<number>(0);
-  const [activeEnv, setActiveEnv] = React.useState<string>('all');
 
   const { data: listChaosInfraData, loading: listChaosInfraLoading } = listChaosInfra({
     ...scope,
-    environmentIDs: envID === 'all' ? undefined : [envID],
+    environmentIDs: envID === AllEnv.AllEnv ? undefined : [envID],
     filter: { name: searchInfrastructure },
     pagination: { page, limit },
     options: { onError: error => showError(error.message) }
@@ -39,8 +38,8 @@ function KubernetesChaosInfrastructureReferenceFieldController({
   const environmentList = listEnvironmentData?.listEnvironments?.environments;
 
   React.useEffect(() => {
-    if (envID === 'all' && listChaosInfraData?.listInfras?.totalNoOfInfras && searchInfrastructure === '') {
-      setInitialAllInfrastructureLength(listChaosInfraData.listInfras.totalNoOfInfras);
+    if (envID === AllEnv.AllEnv) {
+      setInitialAllInfrastructureLength(listChaosInfraData?.listInfras.totalNoOfInfras || 0);
     }
   }, [listChaosInfraData]);
 
@@ -67,9 +66,9 @@ function KubernetesChaosInfrastructureReferenceFieldController({
     setPage(0);
   }, [envID]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (preSelectedEnvironment) {
-      setEnvID(preSelectedEnvironment?.environmentID), setActiveEnv(preSelectedEnvironment?.environmentID);
+      setEnvID(preSelectedEnvironment?.environmentID);
     }
   }, [preSelectedEnvironment, setFieldValue]);
 
@@ -82,7 +81,7 @@ function KubernetesChaosInfrastructureReferenceFieldController({
     }
   }, [preSelectedInfrastructure, setFieldValue]);
 
-  const infrastructureList = listChaosInfraData?.listInfras?.infras.map(infra => {
+  const infrastructureList = listChaosInfraData?.listInfras.infras.map(infra => {
     const infraDetails: InfrastructureDetails = {
       id: infra.infraID,
       name: infra.name,
@@ -104,7 +103,10 @@ function KubernetesChaosInfrastructureReferenceFieldController({
         pageSize={limit}
         pageCount={Math.ceil(totalNoOfInfras / limit)}
         pageIndex={page}
-        gotoPage={pageNumber => setPage(pageNumber)}
+        gotoPage={setPage}
+        showPagination={true}
+        pageSizeOptions={[5, 10, 15]}
+        onPageSizeChange={event => setLimit(parseInt(event.toString()))}
       />
     );
   };
@@ -120,12 +122,11 @@ function KubernetesChaosInfrastructureReferenceFieldController({
           setFieldValue('chaosInfrastructure.environmentID', infrastructure.environmentID, false);
         }
       }}
-      activeEnv={activeEnv}
-      setActiveEnv={setActiveEnv}
       searchInfrastructure={searchInfrastructure}
       setSearchInfrastructure={setSearchInfrastructure}
       allInfrastructureLength={initialAllInfrastructureLength}
       environmentList={environmentList}
+      envID={envID}
       setEnvID={setEnvID}
       loading={{
         listChaosInfra: listChaosInfraLoading

chaoscenter/web/src/models/chaosInfrastructure.ts

@@ -65,6 +65,10 @@ export interface InitialValueProps {
   tolerationValues?: Array<Toleration>;
 }
 
+export enum AllEnv {
+  AllEnv = 'all'
+}
+
 export interface DeploymentScopeItem extends CollapsableSelectOptions {
   type: DeploymentScopeOptions;
   name: string;

chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss

@@ -60,28 +60,25 @@
   background: #effbff;
   border: 1.5px solid #0278d5;
   box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
-  border-radius: 8px !important;
+  border-radius: 8px;
 }
 
 .notSelected {
   background: #fafbfc;
-  // border: 1px solid rgba(40, 41, 61, 0.3);
   box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
-  border-radius: 8px !important;
+  border-radius: 8px;
   cursor: pointer;
 }
 
 .agentList {
   flex-grow: 1;
   gap: 1rem;
-  overflow: auto;
 }
 
 .agentListInnerContainer {
   flex-grow: 1;
-  // overflow: auto;
   gap: 1rem;
-  max-height: calc(100% - 48px);
+  overflow: auto;
 }
 
 .item {
@@ -178,11 +175,6 @@
   position: fixed;
 }
 
-.gap-4 {
-  gap: 1rem;
-  overflow: hidden;
-}
-
 .paginationContainer {
   padding-top: 8px;
   overflow: hidden;
@@ -200,16 +192,16 @@
 }
 
 .listEnvContainer {
-  background: #effbff;
+  background: var(--primary-1);
   box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
-  border-radius: 8px !important;
+  border-radius: 8px;
   cursor: pointer;
 }
 
 .itemEnv {
   width: 100%;
   display: grid;
-  grid-template-columns: 3fr 25px;
+  grid-template-columns: 1fr 25px;
   align-items: center;
   gap: 0.5rem;
 }

chaoscenter/web/src/views/ChaosInfrastructureReferenceField/ChaosInfrastructureReferenceField.module.scss.d.ts

@@ -8,7 +8,6 @@ declare namespace ChaosInfrastructureReferenceFieldModuleScssNamespace {
     dialog: string;
     editBtn: string;
     fixed: string;
-    gap4: string;
     gitBranchIcon: string;
     gitInfo: string;
     greenStatus: string;