minor bug fixes on create tab. Created data table heading.

Co-authored-by: Sal Saluga [email protected]
Co-authored-by: Bianca Picasso [email protected]
Co-authored-by: Huy Pham [email protected]

Author: ken-Bains

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

@@ -7,6 +7,7 @@ import DataTable from './components/DataTable';
 import AddDataForm from './components/AddDataForm';
 import AddContextForm from './components/AddContextForm';
 import * as actions from '../../../redux/actions/actions';
+import { Typography } from '@mui/material';
 
 const CreateContainer = () => {
   const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
@@ -73,7 +74,14 @@ const CreateContainer = () => {
         </Grid>
         <Divider orientation="vertical" variant="middle" flexItem />
         <Grid item>
-          <DataTable target={tableState} />
+          <Typography
+            style={{ color: 'black' }}
+            variant="h6"
+            gutterBottom={true}
+          >
+            Context Data Table
+          </Typography>
+          <DataTable target={tableState} contextInput={contextInput} />
         </Grid>
       </Grid>
     </>

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

@@ -104,7 +104,7 @@ const AddContextForm = ({
         <Button
           variant="contained"
           onClick={handleClick}
-          disabled={btnDisabled ? true : false}
+          disabled={btnDisabled}
         >
           Create
         </Button>

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

@@ -6,10 +6,13 @@ import { Typography } from '@mui/material';
 
 const AddDataForm = ({ handleClickInputData, contextInput }) => {
   //const [contextInput, setContextInput] = React.useState(null);
-  const [dataContext, setDataContext] = React.useState({
-    inputKey: '',
-    inputValue: ''
-  });
+  const defaultInputData = {inputKey: '', inputValue: ''};
+  const [dataContext, setDataContext] = React.useState(defaultInputData);
+
+  const saveData = () => {
+    setDataContext(defaultInputData);
+    handleClickInputData(contextInput, dataContext)
+  }
 
   const handleChange = e => {
     setDataContext(prevDataContext => {
@@ -23,7 +26,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
   return (
     <Fragment>
       <Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
-        Add context data
+        Add context data 
       </Typography>
       <Box sx={{ display: 'flex', gap: 2 }}>
         <TextField
@@ -44,7 +47,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
         />
         <Button
           variant="contained"
-          onClick={() => handleClickInputData(contextInput, dataContext)}
+          onClick={saveData}
         >
           Save
         </Button>

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

@@ -7,6 +7,7 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableFooter from '@mui/material/TableFooter';
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
@@ -28,27 +29,40 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
   }
 }));
 
-export default function DataTable({target}) {
+export default function DataTable({ target, contextInput }) {
   return (
-    <TableContainer component={Paper}>
-      <Table sx={{ width: '510px' }} aria-label="customized table">
-        <TableHead>
-          <TableRow>
-            <StyledTableCell>Key</StyledTableCell>
-            <StyledTableCell align="right">Value</StyledTableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {target.map((data, index) => (
-            <StyledTableRow key={index}>
-              <StyledTableCell component="th" scope="row">
-                {data.key}
+    <>
+      <TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
+        <Table
+          sx={{ width: '510px' }}
+          aria-label="customized table"
+          stickyHeader
+        >
+          <TableHead>
+            <TableRow>
+              {/* <StyledTableCell>Key</StyledTableCell> */}
+              <StyledTableCell align="center" colSpan={3}>
+                {contextInput ? contextInput.name : 'Context Name'}
               </StyledTableCell>
-              <StyledTableCell align="right">{data.value}</StyledTableCell>
-            </StyledTableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {target.map((data, index) => (
+              <StyledTableRow key={index}>
+                <StyledTableCell component="th" scope="row">
+                  {data.key}
+                </StyledTableCell>
+                <StyledTableCell align="right">{data.value}</StyledTableCell>
+              </StyledTableRow>
+            ))}
+          </TableBody>
+          {/* <TableFooter>
+            <StyledTableCell align="center" colSpan={3}>
+              {contextInput ? contextInput.name : 'Context Name'}
+            </StyledTableCell>
+          </TableFooter> */}
+        </Table>
+      </TableContainer>
+    </>
   );
-}
+}