adding delete context functionality

Author: huypham048

app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx

@@ -81,7 +81,7 @@ const AssignContainer = () => {
             </Grid>
 
             <Grid item>
-              <DataTable target={tableState} />
+              <DataTable target={tableState} contextInput={contextInput} />
             </Grid>
           </Grid>
         </Grid>

app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx

@@ -34,7 +34,7 @@ export default function DataTable({ target }) {
       <Table sx={{ width: '510px' }} aria-label="customized table">
         <TableHead>
           <TableRow>
-            <StyledTableCell>Contexts Consumed</StyledTableCell>
+            <StyledTableCell align="center">Contexts Consumed</StyledTableCell>
           </TableRow>
         </TableHead>
         <TableBody>

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -36,15 +36,14 @@ const AddContextForm = ({
         values: []
       });
       renderTable(newValue);
-
     } else {
       setContextInput(newValue);
       renderTable(newValue);
     }
   };
 
   const filterOptions = (options, params) => {
-   // setBtnDisabled(true);
+    // setBtnDisabled(true);
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
@@ -55,7 +54,7 @@ const AddContextForm = ({
         name: `Add "${inputValue}"`
       });
 
-     // setBtnDisabled(false);
+      // setBtnDisabled(false);
     }
 
     return filtered;
@@ -74,9 +73,7 @@ const AddContextForm = ({
     return option.name;
   };
 
-  const renderOption = (props, option) => (
-    <li {...props}>{option.name}</li>
-  );
+  const renderOption = (props, option) => <li {...props}>{option.name}</li>;
 
   return (
     <Fragment>

app/src/redux/reducers/slice/contextReducer.js

@@ -3,22 +3,23 @@ import * as types from '../../constants/actionTypes';
 const initialState = {
   allContext: [
     {
-      name: 'MainContext1',
+      name: 'ContextExample1',
       values: [
         { key: 'testKey1', value: 'testValue1' },
         { key: 'testKey2', value: 'testValue2' }
       ],
       components: ['MainContainer', 'SubmitForm']
     },
     {
-      name: 'MainContext3',
+      name: 'ContextExample2',
       values: [
         { key: 'testKey3', value: 'testValue3' },
         { key: 'testKey33', value: 'testValue33' }
       ],
       components: ['MainContainer', 'EditForm', 'TableContainer']
     }
   ]
+  // allContext: []
 };
 
 const contextReducer = (state = initialState, action) => {