Addressed review comments

Signed-off-by: Yi Cai <yicai@redhat.com>
debsmita1 · Apr 16, 2024 · 18d4b99 · 18d4b99
1 parent 7c78065
commit 18d4b99
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 45 deletions.
diff --git a/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx b/plugins/bulk-import/src/components/AddRepositories/AddRepositoriesDrawer.tsx
@@ -48,6 +48,12 @@ const useStyles = makeStyles(theme => ({
       },
     },
   },
+  drawerContainer: {
+    padding: '20px',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
 }));
 
 export const AddRepositoriesDrawer = ({
@@ -81,14 +87,7 @@ export const AddRepositoriesDrawer = ({
       variant="temporary"
       className={classes.drawerPaper}
     >
-      <Container
-        style={{
-          padding: '20px',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
+      <Container className={classes.drawerContainer}>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <div>
             <Typography variant="h5">{data?.name}</Typography>

diff --git a/plugins/bulk-import/src/components/AddRepositories/OrganizationTableRow.tsx b/plugins/bulk-import/src/components/AddRepositories/OrganizationTableRow.tsx
@@ -13,7 +13,7 @@ import {
   urlHelper,
 } from '../../utils/repository-utils';
 
-const tableRowStyle = {
+const tableCellStyle = {
   lineHeight: '1.5rem',
   fontSize: '0.875rem',
   padding: '15px 16px 15px 24px',
@@ -30,10 +30,10 @@ export const OrganizationTableRow = ({
 }) => {
   return (
     <TableRow hover>
-      <TableCell component="th" scope="row" padding="none" sx={tableRowStyle}>
+      <TableCell component="th" scope="row" padding="none" sx={tableCellStyle}>
         {data.name}
       </TableCell>
-      <TableCell align="left" sx={tableRowStyle}>
+      <TableCell align="left" sx={tableCellStyle}>
         <Link to={data.url}>
           <>
             {urlHelper(data.url)}
@@ -43,10 +43,10 @@ export const OrganizationTableRow = ({
           </>
         </Link>
       </TableCell>
-      <TableCell align="left" sx={tableRowStyle}>
+      <TableCell align="left" sx={tableCellStyle}>
         {getSelectedRepositories(onOrgRowSelected, data, alreadyAdded)}
       </TableCell>
-      <TableCell align="left" sx={tableRowStyle}>
+      <TableCell align="left" sx={tableCellStyle}>
         {getRepositoryStatusForOrg(data, alreadyAdded)}
       </TableCell>
     </TableRow>

diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx b/plugins/bulk-import/src/components/AddRepositories/RepositoriesHeader.tsx
@@ -45,37 +45,37 @@ export const RepositoriesHeader = ({
     return RepositoriesColumnHeader;
   };
 
-  const tableRowStyle = {
+  const tableCellStyle = {
     lineHeight: '1.5rem',
     fontSize: '0.875rem',
-    padding: '15px 16px 15px 24px',
+    padding: showOrganizations ? '15px 16px 15px 24px' : '15px 16px 15px 6px',
     fontWeight: '700',
   };
 
   return (
     <TableHead>
       <TableRow>
-        {!showOrganizations && (
-          <TableCell padding="none">
-            <Checkbox
-              color="primary"
-              indeterminate={numSelected > 0 && numSelected < rowCount}
-              checked={rowCount > 0 && numSelected === rowCount}
-              onChange={onSelectAllClick}
-              inputProps={{
-                'aria-label': 'select all repositories',
-              }}
-            />
-          </TableCell>
-        )}
-        {getColumnHeader().map(headCell => (
+        {getColumnHeader().map((headCell, index) => (
           <TableCell
             key={headCell.id as string}
             align="left"
             padding="normal"
-            sx={tableRowStyle}
+            sx={tableCellStyle}
             sortDirection={orderBy === headCell.field ? order : 'asc'}
           >
+            {index === 0 && !showOrganizations && (
+              <Checkbox
+                disableRipple
+                color="primary"
+                style={{ padding: '0 12px' }}
+                indeterminate={numSelected > 0 && numSelected < rowCount}
+                checked={rowCount > 0 && numSelected === rowCount}
+                onChange={onSelectAllClick}
+                inputProps={{
+                  'aria-label': 'select all repositories',
+                }}
+              />
+            )}
             <TableSortLabel
               active={orderBy === headCell.field}
               direction={orderBy === headCell.field ? order : 'asc'}

diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx b/plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx
@@ -384,7 +384,7 @@ export const RepositoriesTable = ({
 
   return (
     <>
-      <TableContainer>
+      <TableContainer sx={{ padding: '0 24px' }}>
         <Table
           sx={{ minWidth: 750 }}
           aria-labelledby={

diff --git a/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx b/plugins/bulk-import/src/components/AddRepositories/RepositoryTableRow.tsx
@@ -23,6 +23,11 @@ export const RepositoryTableRow = ({
   selectedRepositoryStatus: string;
   isDrawer?: boolean;
 }) => {
+  const tableCellStyle = {
+    lineHeight: '1.5rem',
+    fontSize: '0.875rem',
+    padding: '15px 16px 15px 6px',
+  };
   return (
     <TableRow
       hover
@@ -31,21 +36,21 @@ export const RepositoryTableRow = ({
       key={data.id}
       selected={isItemSelected}
     >
-      <TableCell padding="none">
+      <TableCell component="th" scope="row" padding="none" sx={tableCellStyle}>
         <Checkbox
+          disableRipple
           color="primary"
           checked={
             selectedRepositoryStatus === 'Exists' ? true : isItemSelected
           }
           disabled={selectedRepositoryStatus === 'Exists'}
           onClick={event => handleClick(event, data.id)}
+          style={{ padding: '0 12px' }}
         />
-      </TableCell>
-      <TableCell component="th" scope="row" padding="none">
         {data.name}
       </TableCell>
       {!isDrawer && data.organization && (
-        <TableCell align="left">
+        <TableCell align="left" sx={tableCellStyle}>
           <Link to={data.url}>
             <>
               {urlHelper(data.url)}
@@ -56,7 +61,7 @@ export const RepositoryTableRow = ({
           </Link>
         </TableCell>
       )}
-      <TableCell align="left">
+      <TableCell align="left" sx={tableCellStyle}>
         <Link to={data.url || ''}>
           <>
             {urlHelper(data.url)}
@@ -66,7 +71,7 @@ export const RepositoryTableRow = ({
           </>
         </Link>
       </TableCell>
-      <TableCell align="left">
+      <TableCell align="left" sx={tableCellStyle}>
         {getRepositoryStatus(
           data.catalogInfoYaml?.status || '',
           isItemSelected,

diff --git a/plugins/bulk-import/src/utils/repository-utils.tsx b/plugins/bulk-import/src/utils/repository-utils.tsx
@@ -162,14 +162,6 @@ export const getNewSelectedRepositories = (
 
 export const getRepositoriesSelected = (data: AddRepositoriesFormValues) => {
   return data.repositories?.length || 0;
-  // if (data.repositoryType === 'repository') {
-  // }
-  // return (
-  //   data.organizations?.reduce((acc, org) => {
-  //     const repos = acc + (org.selectedRepositories as number) || 0;
-  //     return repos;
-  //   }, 0) || 0
-  // );
 };
 
 export const filterSelectedForActiveDrawer = (