From af7199920020f8e15d7c629395c9db61e3e5e547 Mon Sep 17 00:00:00 2001
From: Sohyeon Kim <sooooooohyeon5@naver.com>
Date: Wed, 4 Sep 2024 17:31:03 +0900
Subject: [PATCH] Integrate Feature Group Create and List Page

Issue-ID: AIMLFW-150

Change-Id: I82d3c9261393ca98c89b59eb264fb83aa45928a4
Signed-off-by: Sohyeon Kim <sooooooohyeon5@naver.com>
---
 src/components/home/status/ListFeatureGroup.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/home/status/ListFeatureGroup.js b/src/components/home/status/ListFeatureGroup.js
index e3599a3..fec31e1 100644
--- a/src/components/home/status/ListFeatureGroup.js
+++ b/src/components/home/status/ListFeatureGroup.js
@@ -25,14 +25,18 @@ import axios from 'axios';
 import { Checkbox } from './Checkbox';
 import Popup from './Popup';
 import FeatureGroupInfo from './FeatureGroupInfo';
+import CreateFeatureGroup from '../create/CreateFeatureGroup';
 import { deleteFeatureGroups } from './API_STATUS';
 
 const ListFeatureGroup = props => {
   const logger = props.logger;
   const [featureGroups, setFeatureGroups] = useState([]);
   const [infoPopup, setInfoPopup] = useState(false);
+  const [createPopup, setCreatePopup] = useState(false);
   const closeInfoPopup = () => setInfoPopup(false);
+  const closeCreatePopup = () => setCreatePopup(false);
   const [featureGroupName, setFeatureGroupName] = useState(null);
+
   useEffect(() => {
     logger('useEffect');
     fetchFeatureGroups();
@@ -53,6 +57,11 @@ const ListFeatureGroup = props => {
       console.error(e);
     }
   };
+
+  const handleCreateClick = () => {
+    setCreatePopup(true);
+  };
+
   const handleInfoClick = featuregroup_name => {
     console.log('feature group name is : ', featuregroup_name);
     setFeatureGroupName({
@@ -154,6 +163,9 @@ const ListFeatureGroup = props => {
   );
   return (
     <>
+      <Button variant='success' size='sm' onClick={handleCreateClick}>
+        Create
+      </Button>{' '}
       <Button variant='success' size='sm' onClick={e => handleDelete(e)}>
         Delete
       </Button>{' '}
@@ -180,6 +192,9 @@ const ListFeatureGroup = props => {
           })}
         </tbody>
       </BTable>
+      <Popup show={createPopup} onHide={closeCreatePopup} title='Create Feature Group' size='lg'>
+        <CreateFeatureGroup logger={logger} />
+      </Popup>
       <Popup show={infoPopup} onHide={closeInfoPopup} title='Feature Group Info'>
         <FeatureGroupInfo featureGroupName={featureGroupName} />
       </Popup>
-- 
2.16.6