Production deployment v1.0.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buildly-react-template",
-  "version": "v1.0.0",
+  "version": "v1.0.1",
   "description": "Frontend Template from Buildly built using the React framework",
   "main": "src/index.js",
   "private": true,

src/components/Alerts/Alerts.js

@@ -14,18 +14,22 @@ const useStyles = makeStyles((theme) => ({
   success: {
     backgroundColor: '#009900',
     color: '#000',
+    whiteSpace: 'pre-wrap',
   },
   info: {
     backgroundColor: '#0099CC',
     color: '#000',
+    whiteSpace: 'pre-wrap',
   },
   warning: {
     backgroundColor: '#FFCC33',
     color: '#000',
+    whiteSpace: 'pre-wrap',
   },
   error: {
     backgroundColor: '#FF0033',
     color: '#000',
+    whiteSpace: 'pre-wrap',
   },
 }));
 
@@ -48,7 +52,7 @@ const Alerts = () => {
         <Snackbar
           key={`${data.type}-${data.message}`}
           open={data.open || false}
-          autoHideDuration={2000}
+          autoHideDuration={10000}
           onClose={handleClose}
           anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
           message={data.message}

src/components/StripeCard/StripeCard.js

@@ -36,7 +36,7 @@ const StripeCard = ({ cardError, setCardError }) => {
         <CardElement onChange={onCardChange} />
       </FormControl>
       <FormHelperText className={classes.helperText}>
-        {cardError}
+        {cardError && cardError.message}
       </FormHelperText>
     </FormGroup>
   );

src/pages/Login/Login.js

@@ -14,7 +14,7 @@ import {
 } from '@mui/material';
 import logo from '@assets/buildly-product-labs-logo.png';
 import Copyright from '@components/Copyright/Copyright';
-import GithubLogin from '@components/SocialLogin/GithubLogin';
+// import GithubLogin from '@components/SocialLogin/GithubLogin';
 import Loader from '@components/Loader/Loader';
 import { useInput } from '@hooks/useInput';
 import useAlert from '@hooks/useAlert';
@@ -202,7 +202,7 @@ const Login = ({ history }) => {
                 </div>
               </form>
               <Grid container>
-                <Grid item xs={12} className={classes.or}>
+                {/* <Grid item xs={12} className={classes.or}>
                   <Typography variant="body1">----OR----</Typography>
                 </Grid>
                 <Grid item xs={12} className={classes.socialAuth}>
@@ -211,7 +211,7 @@ const Login = ({ history }) => {
                     history={history}
                     disabled={isLoginLoading || isPasswordCheckLoading || isSocialLoginLoading}
                   />
-                </Grid>
+                </Grid> */}
                 <Grid item xs className={classes.link}>
                   <Link
                     href={routes.FORGOT_PASSWORD}

src/pages/ProductRoadmap/components/Kanban.js

@@ -206,6 +206,7 @@ const Kanban = ({
   useEffect(() => {
     let cols = {};
     if (statuses && !_.isEmpty(statuses)) {
+      statuses.sort((a, b) => (a.order_id > b.order_id ? 1 : -1));
       _.forEach(statuses, (sts) => {
         const feats = _.filter(features, { status: sts.status_uuid });
         const iss = _.filter(issues, { status: sts.status_uuid });

src/pages/ProductRoadmap/forms/StatusBoard.js

@@ -11,7 +11,7 @@ import {
   Button,
   Autocomplete,
   Chip,
-  MenuItem,
+  MenuItem, Typography,
 } from '@mui/material';
 import FormModal from '@components/Modal/FormModal';
 import Loader from '@components/Loader/Loader';
@@ -21,6 +21,7 @@ import { useCreateStatusMutation } from '@react-query/mutations/release/createSt
 import { useUpdateStatusMutation } from '@react-query/mutations/release/updateStatusMutation';
 import { useDeleteStatusMutation } from '@react-query/mutations/release/deleteStatusMutation';
 import { STATUSTYPES } from '../ProductRoadmapConstants';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
 const useStyles = makeStyles((theme) => ({
   form: {
@@ -40,6 +41,17 @@ const useStyles = makeStyles((theme) => ({
     marginTop: '1em',
     textAlign: 'center',
   },
+  orderLanesContainer: {
+    // width: '100%',
+    // display: 'Flex',
+    // flexDirection: 'Row',
+    flexWrap: 'Wrap',
+    border: '1.5px solid lightgray',
+    padding: '16px 8px',
+  },
+  laneChip: {
+    margin: '8px',
+  },
 }));
 
 const StatusBoard = ({ history, location }) => {
@@ -55,6 +67,7 @@ const StatusBoard = ({ history, location }) => {
   const [openFormModal, setFormModal] = useState(true);
   const [openConfirmModal, setConfirmModal] = useState(false);
   const [status, setStatus] = useState([]);
+  const [orderedLanes, setOrderedLanes] = useState([]);
   const [defaultStatus, setDefaultStatus] = useState('');
   const [formError, setFormError] = useState({});
 
@@ -67,7 +80,12 @@ const StatusBoard = ({ history, location }) => {
   useEffect(() => {
     const filteredStatus = _.filter(statuses, { product_uuid });
     const statusDefault = _.find(filteredStatus, (s) => s.is_default_status);
-    setStatus(_.map(filteredStatus, 'name'));
+    const initialStatuses = _.map(filteredStatus, 'name');
+    setStatus(initialStatuses);
+
+    // Initialize the ordered lanes/statuses
+    const lanesCopy = JSON.parse(JSON.stringify(filteredStatus));
+    setOrderedLanes(lanesCopy.sort((a, b) => (a.order_id > b.order_id ? 1 : -1)));
     setDefaultStatus((!!statusDefault && statusDefault.name) || '');
   }, [statuses]);
 
@@ -105,10 +123,12 @@ const StatusBoard = ({ history, location }) => {
   const onStatusChange = (value) => {
     switch (true) {
       case (value.length > status.length):
+        setOrderedLanes([...orderedLanes, { name: _.last(value) }]);
         setStatus([...status, _.last(value)]);
         break;
 
       case (value.length < status.length):
+        setOrderedLanes(orderedLanes.filter((lane) => value.includes(lane.name)));
         setStatus(value);
         break;
 
@@ -124,13 +144,17 @@ const StatusBoard = ({ history, location }) => {
   const handleSubmit = (event) => {
     event.preventDefault();
     if (!editStatus) {
-      const statusData = _.map(status, (col) => ({
-        product_uuid,
-        name: col,
-        description: col,
-        status_tracking_id: null,
-        is_default_status: _.isEqual(col, defaultStatus),
-      }));
+      const statusData = status.map((col) => {
+        const index = orderedLanes.findIndex((lane) => lane.name === col);
+        return {
+          product_uuid,
+          name: col,
+          description: col,
+          status_tracking_id: null,
+          is_default_status: _.isEqual(col, defaultStatus),
+          order_id: index,
+        };
+      });
 
       createStatusMutation(statusData);
     } else {
@@ -153,10 +177,11 @@ const StatusBoard = ({ history, location }) => {
       });
 
       _.forEach(status, (st) => {
+        const index = orderedLanes.findIndex((lane) => lane.name === st);
         if (_.includes(nameList, st)) {
           const existingStatus = _.find(filteredStatus, { name: st });
           if (!_.isEmpty(existingStatus)) {
-            editStatusData = [...editStatusData, { ...existingStatus, is_default_status: _.isEqual(st, defaultStatus) }];
+            editStatusData = [...editStatusData, { ...existingStatus, is_default_status: _.isEqual(st, defaultStatus), order_id: index }];
           }
         } else {
           createStatusData = [
@@ -167,6 +192,7 @@ const StatusBoard = ({ history, location }) => {
               description: st,
               status_tracking_id: null,
               is_default_status: _.isEqual(st, defaultStatus),
+              order_id: index,
             },
           ];
         }
@@ -199,6 +225,40 @@ const StatusBoard = ({ history, location }) => {
     return errorExists;
   };
 
+  const onDragEnd = (result) => {
+    if (!result.destination) return;
+
+    const items = Array.from(orderedLanes);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    setOrderedLanes(items);
+  };
+
+  // a little function to help us with reordering the result
+  const reorder = (list, startIndex, endIndex) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+
+    return result;
+  };
+
+  const getItemStyle = (draggableStyle, isDragging) => ({
+    // some basic styles to make the items look a bit nicer
+    userSelect: 'none',
+    padding: 16,
+    marginBottom: '0 8px 0 0',
+
+    // styles we need to apply on draggables
+    ...draggableStyle,
+  });
+  const getListStyle = (isDraggingOver) => ({
+    display: 'flex',
+    padding: 8,
+    width: '100%',
+  });
+
   return (
     <>
       {openFormModal && (
@@ -246,7 +306,45 @@ const StatusBoard = ({ history, location }) => {
                   )}
                 />
               </Grid>
+
               {!_.isEmpty(status) && (
+              <>
+                <Grid item xs={12}>
+                  <Typography variant="caption" gutterBottom sx={{ display: 'block', marginBottom: 0 }}>Drag to re-order columns</Typography>
+                  <DragDropContext onDragEnd={onDragEnd}>
+                    <Droppable droppableId="orderLanes" direction="horizontal">
+                      {(provided, snapshot) => (
+                        <div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)} {...provided.droppableProps} className={classes.orderLanesContainer}>
+                          {orderedLanes.map((lane, index) => (
+                            <Draggable
+                              key={lane.name}
+                              draggableId={lane.name.toString()}
+                              index={index}
+                            >
+                              {/* eslint-disable-next-line no-shadow */}
+                              {(provided, snapshot) => (
+                                <div
+                                  ref={provided.innerRef}
+                                  style={getItemStyle(
+                                    provided.draggableProps.style,
+                                    snapshot.isDragging,
+                                  )}
+                                  {...provided.draggableProps}
+                                  {...provided.dragHandleProps}
+                                  className={classes.laneChip}
+                                >
+                                  <Chip label={lane.name} variant="outlined" />
+                                </div>
+                              )}
+                            </Draggable>
+                          ))}
+                          {provided.placeholder}
+                        </div>
+                      )}
+                    </Droppable>
+                  </DragDropContext>
+                </Grid>
+
                 <Grid item xs={12}>
                   <TextField
                     variant="outlined"
@@ -269,33 +367,35 @@ const StatusBoard = ({ history, location }) => {
                     ))}
                   </TextField>
                 </Grid>
+              </>
               )}
             </Grid>
             <Grid container spacing={isDesktop ? 3 : 0} justifyContent="center">
               <Grid item xs={12} sm={4}>
                 <Button
-                  type="submit"
+                  type="button"
                   fullWidth
-                  variant="contained"
+                  variant="outlined"
                   color="primary"
+                  onClick={discardFormData}
                   className={classes.submit}
-                  disabled={submitDisabled()}
                 >
-                  Configure Board
+                  Cancel
                 </Button>
               </Grid>
               <Grid item xs={12} sm={4}>
                 <Button
-                  type="button"
+                  type="submit"
                   fullWidth
                   variant="contained"
                   color="primary"
-                  onClick={discardFormData}
                   className={classes.submit}
+                  disabled={submitDisabled()}
                 >
-                  Cancel
+                  Configure Board
                 </Button>
               </Grid>
+
             </Grid>
           </form>
         </FormModal>

src/pages/Register/Register.js

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import logo from '@assets/buildly-product-labs-logo.png';
 import Copyright from '@components/Copyright/Copyright';
-import GithubLogin from '@components/SocialLogin/GithubLogin';
+// import GithubLogin from '@components/SocialLogin/GithubLogin';
 import { useInput } from '@hooks/useInput';
 import useAlert from '@hooks/useAlert';
 import { routes } from '@routes/routesConstants';
@@ -460,7 +460,7 @@ const Register = ({ history }) => {
                 </div>
               </form>
               <Grid container>
-                <Grid item xs={12} className={classes.or}>
+                {/* <Grid item xs={12} className={classes.or}>
                   <Typography variant="body1">----OR----</Typography>
                 </Grid>
                 <Grid item xs={12} className={classes.socialAuth}>
@@ -469,7 +469,7 @@ const Register = ({ history }) => {
                     history={history}
                     disabled={isRegisterLoading || isSocialLoginLoading || isInviteTokenCheckLoading}
                   />
-                </Grid>
+                </Grid> */}
                 <Grid item className={classes.link}>
                   <Link href={routes.LOGIN} variant="body2" color="secondary">
                     Already have an account? Sign in