feat: 🔥 finished rules select section

finished rules select section

apps/frontend/package.json

@@ -25,6 +25,7 @@
 		"react": "18.1.0",
 		"react-dom": "18.1.0",
 		"react-i18next": "11.16.9",
+		"react-lineto": "3.3.0",
 		"react-redux": "8.0.2",
 		"react-router-dom": "5",
 		"react-scripts": "5.0.1",

apps/frontend/src/components/containers/GroupCenter/GroupCenter.module.scss

@@ -5,7 +5,8 @@
 .groupCenterContainer {
 	display: flex;
 	height: 100%;
-	overflow: hidden;
+
+	// overflow: hidden;
 
 	.innerGroupDetalis {
 		display: flex;

apps/frontend/src/components/containers/GroupCenter/GroupCenter.tsx

@@ -13,6 +13,8 @@ const GroupCenter: React.FC<IProps> = () => {
 
 	const [policyLabelInputState, setPolicyLabelInputState] = useState<string | null>(null);
 
+	const [groupsList, setGroupsList] = useState<IGroup[]>([]);
+
 	const onPolicyLabelInputChanged = (input: string) => setPolicyLabelInputState(() => input);
 
 	const onSelectedLibrary = (library: ILibrary) => {
@@ -28,15 +30,21 @@ const GroupCenter: React.FC<IProps> = () => {
 		setSelectLibraryState(() => null);
 	};
 
+	const onCreateNewGroup = () => {
+		setGroupsList([...groupsList, { title: 'Group Label', id: Math.random(), policies: [1, 2, 3, 4] }]);
+	};
+
 	return (
 		<GroupCenterView
 			selectedGroup={selectedGroupState}
 			selectedLibrary={selectedLibraryState}
 			policyLabelInput={policyLabelInputState}
+			groupsList={groupsList}
 			onPolicyLabelInputChanged={onPolicyLabelInputChanged}
 			onSelectedLibrary={onSelectedLibrary}
 			onCancelSelectedLibrary={onCancelSelectedLibrary}
 			onSelectedGroup={onSelectedGroup}
+			onCreateNewGroup={onCreateNewGroup}
 		/>
 	);
 };

apps/frontend/src/components/containers/GroupCenter/GroupCenter.view.tsx

@@ -15,10 +15,12 @@ interface IProps {
 	readonly selectedGroup: IGroup | null;
 	readonly selectedLibrary: ILibrary | null;
 	readonly policyLabelInput: string | null;
+	readonly groupsList: IGroup[] | [];
 	readonly onPolicyLabelInputChanged: (input: string) => void;
 	readonly onSelectedLibrary: (library: ILibrary) => void;
 	readonly onCancelSelectedLibrary: () => void;
 	readonly onSelectedGroup: (group: IGroup) => void;
+	readonly onCreateNewGroup: () => void;
 }
 
 const GroupCenterView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
@@ -29,14 +31,21 @@ const GroupCenterView: React.FC<IProps> = (props: React.PropsWithChildren<IProps
 
 	if (route.pathname.includes('/Policy')) {
 		currentPage = 'configurations';
+	} else if (route.pathname.includes('/manuel')) {
+		currentPage = 'manual';
 	}
 
 	return (
-		<section className={classes['groupCenterContainer']}>
+		<section
+			className={classes['groupCenterContainer']}
+			style={{ overflow: currentPage !== 'manual' ? 'auto' : 'hidden' }}
+		>
 			{currentPage !== 'configurations' && (
 				<div className={classes['innerGroupDetalis']}>
 					<GroupsSidebar
 						selectedGroup={props.selectedGroup}
+						groupsList={props.groupsList}
+						onCreateNewGroup={props.onCreateNewGroup}
 						onSelectedGroup={props.onSelectedGroup}
 					/>
 					<GroupDetails

apps/frontend/src/components/containers/GroupCenter/GroupDetails/GroupDetails.view.tsx

@@ -3,7 +3,6 @@ import { Route } from 'react-router-dom';
 
 import { IGroup } from '@/interfaces/group';
 import { ILibrary } from '@/interfaces/library';
-// import { Trans, useTranslation } from 'react-i18next';
 
 import GroupInfo from './GroupInfo';
 
@@ -19,8 +18,6 @@ interface IProps {
 }
 
 const GroupDetailsView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
-	// const { t } = useTranslation();
-
 	return (
 		<section className={classes['groupDetails']}>
 			<Route path="/groupCenter/group">

apps/frontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/LibrariesList/LibrariesList.view.tsx

@@ -14,18 +14,19 @@ interface IProps {
 
 const LibrariesListView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
 	// const { t } = useTranslation();
+	const libraries = Object.keys(librariesList) as (keyof typeof librariesList)[];
 
 	return (
 		<div className={classes['librariesList']}>
-			{librariesList.map((library, index) => (
+			{libraries.map((library, index) => (
 				<Library
 					key={index}
-					logo={library.logo}
-					title={library.title}
-					madeBy={library.madeBy}
-					description={library.description}
-					type={library.type}
-					category={library.category}
+					logo={librariesList[library].logo}
+					title={librariesList[library].title}
+					madeBy={librariesList[library].madeBy}
+					description={librariesList[library].description}
+					type={librariesList[library].type}
+					category={librariesList[library].category}
 					index={index}
 					selectedLibrary={props.selectedLibrary}
 					onSelectedLibrary={props.onSelectedLibrary}

apps/frontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/NewPolicy.view.tsx

@@ -87,7 +87,7 @@ const NewPolicyView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>)
 						</div>
 						<div className={classes['sortByContainer']}>
 							<SelectFromOptions
-								componentWidth="150px"
+								componentWidth="200px"
 								defaultValue="Sort by"
 								border="2px solid #E7E7E7"
 								selectedOptionIndex={props.selectedSortByOptionIndex}

apps/frontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/PolicyConfiguration/NewPolicyConfiguration/NewPolicyConfiguration.view.tsx

@@ -15,7 +15,7 @@ const NewPolicyConfigurationView: React.FC<IProps> = (props: React.PropsWithChil
 
 	return (
 		<section className={classes['newPolicyConfiguration']}>
-			<NavigateBackButton />
+			<NavigateBackButton position={{ bottom: '50px', right: ' 100px' }} />
 
 			<div className={classes['innerNewPolicyConfiguration']}>
 				<div className={classes['headerContainer']}>

apps/frontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/PolicyConfiguration/PolicyConfiguration.module.scss

@@ -1,5 +1,4 @@
 .policyConfiguration {
 	display: flex;
 	width: 100%;
-	height: 100%;
 }

apps/frontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/PolicyConfiguration/PolicyConfiguration.view.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Route, useLocation } from 'react-router-dom';
+import React, { Suspense } from 'react';
+import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
 import { ILibrary } from '@/interfaces/library';
 
 import PolicySidebar from './PolicySidebar';
@@ -18,26 +18,33 @@ const PolicyConfiguration: React.FC<IProps> = (props: React.PropsWithChildren<IP
 
 	let currentPage;
 
-	if (route.pathname.includes('/Configurations')) {
-		currentPage = 'configurations';
-	} else if (route.pathname.includes('/ruleOnboarding')) {
-		currentPage = 'ruleCreation';
+	if (route.pathname.includes('/manual')) {
+		currentPage = 'manual';
 	}
 
 	return (
-		<section className={classes['policyConfiguration']}>
+		<section
+			className={classes['policyConfiguration']}
+			style={{ height: currentPage !== 'manual' ? '100%' : 'fit-content' }}
+		>
 			<PolicySidebar
 				selectedLibrary={props.selectedLibrary}
 				policyLabelInput={props.policyLabelInput}
 			/>
-			<Route path="/groupCenter/group/Policy/Configurations-Onboarding">
-				{currentPage === 'configurations' && (
-					<NewPolicyConfiguration policyLabelInput={props.policyLabelInput} />
-				)}
-			</Route>
-			<Route path="/groupCenter/group/Policy/ruleOnboarding">
-				{currentPage === 'ruleCreation' && <RuleCreation policyLabelInput={props.policyLabelInput} />}
-			</Route>
+			<Suspense fallback={null}>
+				<Switch>
+					<Route path="/groupCenter/group/Policy/Configurations-Onboarding">
+						<NewPolicyConfiguration policyLabelInput={props.policyLabelInput} />
+					</Route>
+					<Route path="/groupCenter/group/Policy/ruleOnboarding">
+						<RuleCreation
+							policyLabelInput={props.policyLabelInput}
+							selectedLibrary={props.selectedLibrary}
+						/>
+					</Route>
+					<Redirect path="*" to="/groupCenter/group/Policy/ruleOnboarding" />
+				</Switch>
+			</Suspense>
 		</section>
 	);
 };