Merge pull request #360 from buildly-release-management/feat/custom-a…

…ctions-datatable Fixes from punchlist 0.10.0
buildly-release-management · Dec 4, 2024 · 216f867 · 216f867
2 parents fa576c1 + b5fdb29
commit 216f867
Show file tree

Hide file tree

Showing 14 changed files with 387 additions and 13 deletions.
diff --git a/src/components/DataTableWrapper/DataTableWrapper.js b/src/components/DataTableWrapper/DataTableWrapper.js
@@ -71,6 +71,7 @@ const DataTableWrapper = ({
   noOptionsIcon,
   menuIndex,
   setMenuIndex,
+  extraOptions,
 }) => {
   const classes = useStyles();
   // dropdown menu variables
@@ -229,6 +230,7 @@ const DataTableWrapper = ({
       className: classes.dataTableBody,
     }),
     customSort,
+    ...extraOptions,
   };
 
   return (

diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css
@@ -0,0 +1,12 @@
+.searchInputDiv {
+  display: flex;
+  flex: 1 0 auto;
+}
+
+.searchTextField {
+  flex: 0.8 0;
+}
+
+.searchClearIcon:hover {
+  color: var(--color-palette-error-main),
+}
diff --git a/src/components/SearchInput/SearchInput.js b/src/components/SearchInput/SearchInput.js
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Grow, IconButton, TextField } from '@mui/material';
+import { Clear as ClearIcon } from '@mui/icons-material';
+import './SearchInput.css';
+
+const SearchInput = ({
+  options,
+  onSearch,
+  onHide,
+  searchText,
+  setSearchText,
+}) => {
+  const onClose = (e) => {
+    onHide(e);
+    setSearchText('');
+  };
+
+  return (
+    <div>
+      <Grow appear in timeout={300}>
+        <div className="searchInputDiv">
+          <TextField
+            fullWidth
+            variant="standard"
+            className="searchTextField"
+            InputProps={{
+              'aria-label': options.textLabels.toolbar.search,
+            }}
+            value={searchText || ''}
+            onChange={(e) => {
+              onSearch(e.target.value);
+              setSearchText(e.target.value);
+            }}
+          />
+          <IconButton className="searchClearIcon" onClick={onClose}>
+            <ClearIcon />
+          </IconButton>
+        </div>
+      </Grow>
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/src/components/StripeCard/StripeCard.js b/src/components/StripeCard/StripeCard.js
@@ -21,6 +21,7 @@ const StripeCard = ({ cardError, setCardError }) => {
   const classes = useStyles();
 
   const onCardChange = (elementData) => {
+    console.log(elementData);
     if (elementData.error) {
       setCardError(elementData.error.message);
     } else if (!elementData.complete) {
@@ -36,7 +37,7 @@ const StripeCard = ({ cardError, setCardError }) => {
         <CardElement onChange={onCardChange} />
       </FormControl>
       <FormHelperText className={classes.helperText}>
-        {cardError && cardError.message}
+        {cardError}
       </FormHelperText>
     </FormGroup>
   );

diff --git a/src/modules/oauth/oauth.service.js b/src/modules/oauth/oauth.service.js
@@ -97,6 +97,7 @@ function logout() {
     localStorage.removeItem('token_stored_at');
     localStorage.removeItem('oauthUser');
     localStorage.removeItem('currentUser');
+    localStorage.removeItem('activeProduct');
   }
 }
 

diff --git a/src/pages/ProductRoadmap/ProductRoadmap.js b/src/pages/ProductRoadmap/ProductRoadmap.js
@@ -116,6 +116,8 @@ const ProductRoadmap = ({ history }) => {
     id: 0,
     type: 'feat',
   });
+  const [featSearch, setFeatSearch] = useState('');
+  const [issSearch, setIssSearch] = useState('');
 
   const { data: productData, isLoading: isAllProductLoading } = useQuery(
     ['allProducts', organization],
@@ -501,6 +503,10 @@ const ProductRoadmap = ({ history }) => {
                             createSuggestedFeature={createSuggestedFeature}
                             removeSuggestedFeature={removeSuggestedFeature}
                             showRelatedIssues={showRelatedIssues}
+                            featSearch={featSearch}
+                            setFeatSearch={setFeatSearch}
+                            issSearch={issSearch}
+                            setIssSearch={setIssSearch}
                           />
                         )}
                       />

diff --git a/src/pages/ProductRoadmap/components/Kanban.js b/src/pages/ProductRoadmap/components/Kanban.js
@@ -180,8 +180,8 @@ const Kanban = ({
     { refetchOnWindowFocus: false, enabled: !_.isEmpty(selectedProduct) && _.toNumber(selectedProduct) !== 0 },
   );
 
-  const { mutate: updateFeatureMutation } = useUpdateFeatureMutation(selectedProduct, history, routes.PRODUCT_ROADMAP_KANBAN, displayAlert);
-  const { mutate: updateIssueMutation } = useUpdateIssueMutation(selectedProduct, history, routes.PRODUCT_ROADMAP_KANBAN, displayAlert);
+  const { mutate: updateFeatureMutation, isLoading: isUpdatingFeature } = useUpdateFeatureMutation(selectedProduct, history, routes.PRODUCT_ROADMAP_KANBAN, displayAlert);
+  const { mutate: updateIssueMutation, isLoading: isUpdatingIssue } = useUpdateIssueMutation(selectedProduct, history, routes.PRODUCT_ROADMAP_KANBAN, displayAlert);
 
   const handleClick = (event, number) => {
     setAnchorEl(event.currentTarget);
@@ -215,7 +215,7 @@ const Kanban = ({
           ...cols,
           [sts.status_uuid]: {
             name: sts.name,
-            items: _.orderBy(items, 'create_date', 'desc'),
+            items: _.sortBy(items, (i) => (i && i.feature_detail ? i.feature_detail.kanban_column_order : i.issue_detail.kanban_column_order)),
           },
         };
         if (sts.name === 'No Status' && !items.length) {
@@ -284,13 +284,38 @@ const Kanban = ({
           items: copiedItems,
         },
       });
+
+      _.forEach(copiedItems, (ci, idx) => {
+        let updateData = {};
+        if (ci.issue_uuid) {
+          updateData = {
+            ...ci,
+            ...issueCred?.auth_detail,
+            issue_detail: {
+              ...ci.issue_detail,
+              kanban_column_order: idx,
+            },
+          };
+          updateIssueMutation(updateData);
+        } else {
+          updateData = {
+            ...ci,
+            ...featCred?.auth_detail,
+            feature_detail: {
+              ...ci.feature_detail,
+              kanban_column_order: idx,
+            },
+          };
+          updateFeatureMutation(updateData);
+        }
+      });
     }
   };
 
   return (
     <>
-      {(isAllCredentialLoading || isAllStatusLoading || isAllFeatureLoading || isAllIssueLoading || isAllCommentLoading) && (
-        <Loader open={isAllCredentialLoading || isAllStatusLoading || isAllFeatureLoading || isAllIssueLoading || isAllCommentLoading} />
+      {(isAllCredentialLoading || isAllStatusLoading || isAllFeatureLoading || isAllIssueLoading || isAllCommentLoading || isUpdatingFeature || isUpdatingIssue) && (
+        <Loader open={isAllCredentialLoading || isAllStatusLoading || isAllFeatureLoading || isAllIssueLoading || isAllCommentLoading || isUpdatingFeature || isUpdatingIssue} />
       )}
       {(_.isEmpty(selectedProduct) || _.toNumber(selectedProduct) === 0) && (
         <Typography className={classes.noProduct} component="div" variant="body1">
@@ -421,7 +446,7 @@ const Kanban = ({
                                     ? item.issue_uuid
                                     : item.feature_uuid
                                 }
-                                index={itemIndex}
+                                index={item && item.feature_detail ? item.feature_detail.kanban_column_order : item.issue_detail.kanban_column_order}
                               >
                                 {(provided, snapshot) => (
                                   <Card

diff --git a/src/pages/ProductRoadmap/components/Tabular.js b/src/pages/ProductRoadmap/components/Tabular.js
@@ -15,6 +15,7 @@ import {
 } from '@mui/icons-material';
 import DataTableWrapper from '@components/DataTableWrapper/DataTableWrapper';
 import Loader from '@components/Loader/Loader';
+import SearchInput from '@components/SearchInput/SearchInput';
 import useAlert from '@hooks/useAlert';
 import { getAllStatusQuery } from '@react-query/queries/release/getAllStatusQuery';
 import { getAllFeatureQuery } from '@react-query/queries/release/getAllFeatureQuery';
@@ -49,6 +50,10 @@ const Tabular = ({
   createSuggestedFeature,
   removeSuggestedFeature,
   showRelatedIssues,
+  featSearch,
+  setFeatSearch,
+  issSearch,
+  setIssSearch,
 }) => {
   const classes = useStyles();
   const { displayAlert } = useAlert();
@@ -148,17 +153,19 @@ const Tabular = ({
     const featRows = _.map(features, (feat) => ({
       ...feat,
       _status: _.find(statuses, { status_uuid: feat.status })?.name,
+      _status_order_id: _.find(statuses, { status_uuid: feat.status })?.order_id,
       _url: feat.feature_detail?.url || '',
     }));
 
     const issRows = _.map(issues, (iss) => ({
       ...iss,
       _status: _.find(statuses, { status_uuid: iss.status })?.name,
+      _status_order_id: _.find(statuses, { status_uuid: iss.status })?.order_id,
       _url: iss.issue_detail?.url || '',
     }));
 
-    setFeatureRows(featRows);
-    setIssueRows(issRows);
+    setFeatureRows(_.orderBy(featRows, ['_status_order_id', 'feature_detail.kanban_column_order']));
+    setIssueRows(_.orderBy(issRows, ['_status_order_id', 'issue_detail.kanban_column_order']));
   }, [statuses, features, issues]);
 
   useEffect(() => {
@@ -217,6 +224,16 @@ const Tabular = ({
     }
   }, [suggestedFeatures]);
 
+  const customSearch = (searchQuery, currentRow, columns) => {
+    let isFound = false;
+    currentRow.forEach((col) => {
+      if (col && (col.toString().indexOf(searchQuery) >= 0)) {
+        isFound = true;
+      }
+    });
+    return isFound;
+  };
+
   return (
     <>
       {(isAllStatusLoading || isAllFeatureLoading || isAllIssueLoading || isAllCommentLoading) && (
@@ -264,6 +281,24 @@ const Tabular = ({
             menuActions={featMenuActions}
             menuIndex={menuIndex}
             setMenuIndex={setMenuIndex}
+            extraOptions={{
+              searchText: featSearch,
+              searchProps: {
+                onChange: (e) => {
+                  setFeatSearch(e.target.value);
+                },
+              },
+              customSearch,
+              customSearchRender: (searchText, handleSearch, hideSearch, options) => (
+                <SearchInput
+                  searchText={featSearch}
+                  setSearchText={setFeatSearch}
+                  onSearch={handleSearch}
+                  onHide={hideSearch}
+                  options={options}
+                />
+              ),
+            }}
           />
         </div>
       )}
@@ -282,6 +317,24 @@ const Tabular = ({
             menuActions={issueMenuActions}
             menuIndex={menuIndex}
             setMenuIndex={setMenuIndex}
+            extraOptions={{
+              searchText: issSearch,
+              searchProps: {
+                onChange: (e) => {
+                  setIssSearch(e.target.value);
+                },
+              },
+              customSearch,
+              customSearchRender: (searchText, handleSearch, hideSearch, options) => (
+                <SearchInput
+                  searchText={issSearch}
+                  setSearchText={setIssSearch}
+                  onSearch={handleSearch}
+                  onHide={hideSearch}
+                  options={options}
+                />
+              ),
+            }}
           />
         </div>
       )}

diff --git a/src/pages/Register/Register.js b/src/pages/Register/Register.js
@@ -128,8 +128,8 @@ const Register = ({ history }) => {
 
   useEffect(() => {
     if (inviteTokenCheckData) {
-      email.setValue(inviteTokenCheckData.email || '');
-      organization_name.setValue(inviteTokenCheckData.organization_name || '');
+      email.setNewValue(inviteTokenCheckData.email || '');
+      organization_name.setNewValue(inviteTokenCheckData.organization?.name || '');
     }
   }, [inviteTokenCheckData]);
 

diff --git a/src/pages/UserManagement/UserManagement.js b/src/pages/UserManagement/UserManagement.js
@@ -2,12 +2,16 @@ import React, { useEffect, useState } from 'react';
 import { Route, useHistory } from 'react-router-dom';
 import {
   Box,
+  Button,
   Tab,
   Tabs,
 } from '@mui/material';
+import { getUser } from '@context/User.context';
+import { hasGlobalAdminRights } from '@utils/permissions';
 import { routes } from '@routes/routesConstants';
 import Users from './Users/Users';
 import UserGroups from './UserGroups/UserGroups';
+import AddUser from './forms/AddUser';
 
 const UserManagement = () => {
   const history = useHistory();
@@ -19,6 +23,14 @@ const UserManagement = () => {
     subNav.find((item) => location.pathname.endsWith(item.value)) || subNav[0]
   ).value;
   const [view, setView] = useState(viewPath);
+  const [showAddUser, setShowAddUser] = useState(false);
+
+  const user = getUser();
+  let isSuperAdmin = false;
+
+  if (user) {
+    isSuperAdmin = hasGlobalAdminRights(user);
+  }
 
   useEffect(() => {
     history.push(`/app/profile/users/${view || location.state}`);
@@ -30,6 +42,15 @@ const UserManagement = () => {
 
   return (
     <Box mt={5} mb={3}>
+      <Button
+        type="button"
+        variant="contained"
+        color="primary"
+        onClick={() => setShowAddUser(true)}
+        style={{ marginLeft: isSuperAdmin ? '20px' : '0px' }}
+      >
+        + Add Users
+      </Button>
       <Box mb={3} mt={2}>
         <Tabs value={view} onChange={viewTabClicked}>
           {subNav.map((itemProps, index) => (
@@ -39,6 +60,7 @@ const UserManagement = () => {
       </Box>
       <Route path={routes.CURRENT_USERS} component={Users} />
       <Route path={routes.USER_GROUPS} component={UserGroups} />
+      <AddUser open={showAddUser} setOpen={setShowAddUser} />
     </Box>
   );
 };

diff --git a/src/pages/UserManagement/UserManagementStyles.css b/src/pages/UserManagement/UserManagementStyles.css
@@ -11,4 +11,13 @@
 
 .usersIconButton:hover {
   background-color: var(--color-palette-primary-light);
-}
+}
+
+.addUserFormContainer {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.addOrganizationSubmit {
+  margin-top: 24px;
+}