Milestone Screen - Complete Management

README.md

@@ -1,4 +1,5 @@
 # Buildly React Template
+
 [![Build Status](https://travis-ci.org/buildlyio/buildly-react-template.svg?branch=master)](https://travis-ci.org/buildlyio/buildly-react-template) [![Documentation Status](https://readthedocs.org/projects/buildly-react-template/badge/?version=latest)](https://buildly-react-template.readthedocs.io/en/latest/?badge=latest) [![Gitter](https://badges.gitter.im/Buildlyio/community.svg)](https://gitter.im/Buildlyio/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
 Buildly React Template is a [React](https://reactjs.org/) web application that implements the core features of the UI core, pre-configure to connect to [Buildly Core](https://github.com/buildlyio/buildly-core).
@@ -11,30 +12,36 @@ These instructions will get you a copy of the project up and running on your loc
 
 The web application was tested and built with the following versions:
 
-- node v16.13.0
-- yarn v1.17.3
+-   node v16.13.0
+-   yarn v1.17.3
 
 ### Installing
 
 First of all, you need to have a Buildly Core instance up and running locally.
 Further detail about how to deploy Buildly Core locally, check its [documentation](https://buildly-core.readthedocs.io/en/latest/).
 
-To install the application you need to download and install its dependencies, so you have to navigate to the project folder and run the following command:
+Create a `.env.development.local` file in the root, and add the following lines with working credentials:
 
-```
-$ yarn install
-```
+    window.env = {
+        API_URL: "https://rm-dev-api.buildly.io/",
+        OAUTH_CLIENT_ID: "xxxxx",
+        OAUTH_TOKEN_URL: "https://rm-dev-api.buildly.io/oauth/token/",
+        GITHUB_CLIENT_ID: "xxxxx",
+        TRELLO_API_KEY: "xxxxx",
+        FEEDBACK_SHEET: "https://sheet.best/api/sheets/xxxxx",
+        production: false
+    };
 
-Now, initialize and build the project
+To install the application you need to download and install its dependencies, so you have to navigate to the project folder and run the following command:
 
 ```
-$ yarn run build
+$ yarn install
 ```
 
 To run the web app:
 
 ```
-$ yarn run start
+$ yarn start:local
 ```
 
 Your Buildly React Template will be running locally and listening to the port 3000, so you can access it via your browser typing this address: 127.0.0.1:3000
@@ -64,14 +71,14 @@ Now, you just need to build a Docker image and host it somewhere. Further info a
 
 ### Configuration
 
-The following table lists the configurable parameters of Buildly React Template and their default values.  They can be updated in the
+The following table lists the configurable parameters of Buildly React Template and their default values. They can be updated in the
 Docker container via flags as below or configured as environment variables in Travis.
 
-|             Parameter               |            Description             |                    Default                |
-|-------------------------------------|------------------------------------|-------------------------------------------|
-| `API_URL`                           | Buildly Core URL                   | ``      |
-| `OAUTH_CLIENT_ID`                   | The client identifier issued to the client during Buildly Core deployment  | `` |
-| `OAUTH_TOKEN_URL`                   | Buildly Core URL used to authenticate users | `` |
+| Parameter         | Description                                                               | Default |
+| ----------------- | ------------------------------------------------------------------------- | ------- |
+| `API_URL`         | Buildly Core URL                                                          | ``      |
+| `OAUTH_CLIENT_ID` | The client identifier issued to the client during Buildly Core deployment | ``      |
+| `OAUTH_TOKEN_URL` | Buildly Core URL used to authenticate users                               | ``      |
 
 Specify each parameter using `-e`, `--env`, and `--env-file` flags to set simple (non-array) environment variables to `docker run`. For example,
 
@@ -83,7 +90,7 @@ $ docker run -e MYVAR1 --env MYVAR2=foo \
 
 ## Built With
 
-* [Travis CI](https://travis-ci.org/) - Recommended CI/CD
+-   [Travis CI](https://travis-ci.org/) - Recommended CI/CD
 
 ## Contributing
 
@@ -95,7 +102,7 @@ We use [SemVer](http://semver.org/) for versioning. For the versions available,
 
 ## Authors
 
-* **Buildly** - *Initial work*
+-   **Buildly** - _Initial work_
 
 See also the list of [contributors](https://github.com/buildlyio/buildly-react-template/graphs/contributors) who participated in this project.
 

src/components/DataTableWrapper/DataTableWrapper.js

@@ -12,6 +12,7 @@ import {
   Add as AddIcon,
   Edit as EditIcon,
   Delete as DeleteIcon,
+  Close as CloseIcon,
 } from '@mui/icons-material';
 import Loader from '@components/Loader/Loader';
 import ConfirmModal from '@components/Modal/ConfirmModal';
@@ -52,6 +53,8 @@ const DataTableWrapper = ({
   filename,
   addButtonHeading,
   onAddButtonClick,
+  additionalButtonHeading,
+  onAdditionalButtonClick,
   children,
   editAction,
   deleteAction,
@@ -62,12 +65,14 @@ const DataTableWrapper = ({
   tableHeight,
   tableHeader,
   hideAddButton,
+  hideAdditionalButton,
   selectable,
   selected,
   customSort,
   noCustomTheme,
   noSpace,
   noOptionsIcon,
+  onRowSelectChange
 }) => {
   const classes = useStyles();
 
@@ -130,6 +135,9 @@ const DataTableWrapper = ({
     selectableRows: selectable && selectable.rows
       ? selectable.rows
       : 'none',
+    onRowSelectionChange: (currentRowsExpanded, allRowsExpanded, rowsExpanded) => {
+      onRowSelectChange(rowsExpanded);
+    },
     selectToolbarPlacement: 'none',
     selectableRowsHeader: selectable && selectable.rowsHeader
       ? selectable.rowsHeader
@@ -163,19 +171,33 @@ const DataTableWrapper = ({
     <Box mt={noSpace ? 0 : 5} mb={noSpace ? 0 : 5}>
       {loading && <Loader open={loading} />}
       <div>
-        {!hideAddButton && (
-          <Box mb={3} mt={2}>
+        <Box mb={3} mt={2}>
+          {!hideAddButton && (
             <Button
               type="button"
               variant="contained"
               color="primary"
               onClick={onAddButtonClick}
+              sx={{
+                marginRight: '16px',
+              }}
             >
               <AddIcon />
               {` ${addButtonHeading}`}
             </Button>
-          </Box>
-        )}
+          )}
+          {!hideAdditionalButton && (
+              <Button
+                  type="button"
+                  variant="outlined"
+                  color="error"
+                  onClick={onAdditionalButtonClick}
+              >
+                <CloseIcon />
+                {` ${additionalButtonHeading}`}
+              </Button>
+          )}
+        </Box>
         {tableHeader && (
           <Typography
             className={classes.dashboardHeading}

src/hooks/useInput.js

@@ -16,7 +16,6 @@ export const useInput = (initialValue = '', validators = {}) => {
     },
     clear: () => setValue(''),
     reset: () => setValue(initialValue),
-    setNewValue: (newValue) => setValue(newValue),
     hasChanged: () => {
       let newValue = value;
       if (typeof (initialValue) === 'number') {

src/layout/Container/Container.js

@@ -12,6 +12,7 @@ import { routes } from '@routes/routesConstants';
 import NewProduct from '@pages/NewProduct/NewProduct';
 import Release from '@pages/Release/Release';
 import ViewRelease from '@pages/Release/components/ViewRelease';
+import Milestone from '@pages/Milestone/Milestone';
 import DeveloperForm from '@pages/DeveloperForm/DeveloperForm';
 
 const useStyles = makeStyles((theme) => ({
@@ -65,6 +66,7 @@ const ContainerDashboard = ({ location, history }) => {
             <Route path={routes.DEVELOPER_FORM} component={DeveloperForm} />
             <Route exact path={`${routes.RELEASE}/view/:releaseID`} component={ViewRelease} />
             <Route path={routes.RELEASE} component={Release} />
+            <Route path={routes.MILESTONE} component={Milestone} />
           </Switch>
         </Container>
       </UserContext.Provider>

src/layout/NavBar/NavBarConstants.js

@@ -6,9 +6,19 @@ export const NAVIGATION_ITEMS = [
     name: 'Dashboard',
     link: routes.DASHBOARD,
   },
+  {
+    id: 'products',
+    name: 'Products',
+    link: routes.NEW_PRODUCT,
+  },
   {
     id: 'releases',
     name: 'Releases',
     link: routes.RELEASE,
   },
+  {
+    id: 'milestones',
+    name: 'Milestones',
+    link: routes.MILESTONE,
+  },
 ];

src/modules/http/http.service.js

@@ -13,9 +13,10 @@ export const httpService = {
  * @param {boolean} useJwt - boolean to check if we want to use JWT or not
  * @param {string} contentType - type of content to be requested
  * @param {string} responseType - the expected response type from the server
+ * @param customHeaders - custom headers to be sent with the request
  * @returns {Observable} - response of the request or error
  */
-function makeRequest(method, url, body, useJwt, contentType, responseType) {
+function makeRequest(method, url, body, useJwt, contentType, responseType, customHeaders) {
   let token;
   let tokenType;
   if (useJwt) {
@@ -25,13 +26,17 @@ function makeRequest(method, url, body, useJwt, contentType, responseType) {
     tokenType = 'Bearer';
     token = oauthService.getAccessToken();
   }
-  const headers = {
+  let headers;
+
+  headers = {
     Authorization: `${tokenType} ${token}`,
     // 'Content-Type': contentType || 'application/json', // Commenting to make it work for GCP
   };
-  if (method === 'POST' || method === 'post') {
-    headers['Content-Type'] = 'application/json';
+
+  if (customHeaders) {
+    headers = customHeaders;
   }
+
   const options = {
     method,
     data: body,

src/pages/Dashboard/components/UserDashboard.js

@@ -21,13 +21,12 @@ import {
   getAllFeatures,
   getAllIssues,
   getAllStatuses,
-  deleteFeature,
-  deleteIssue,
 } from '@redux/decision/actions/decision.actions';
 import List from '../components/List';
 import Kanban from '../components/Kanban';
 import AddFeatures from '../forms/AddFeatures';
 import AddIssues from '../forms/AddIssues';
+import FeatureToIssue from '../forms/FeatureToIssue';
 import ConfirmModal from '@components/Modal/ConfirmModal';
 
 const useStyles = makeStyles((theme) => ({
@@ -159,16 +158,18 @@ const UserDashboard = (props) => {
   const editItem = (item, type) => {
     let path;
     if (type === 'feat') {
-      path = `${editFeatPath}/:${item.feature_uuid}`;
+      path = `${editFeatPath}/:${item.id}`;
     } else if (type === 'issue') {
-      path = `${editIssuePath}/:${item.issue_uuid}`;
+      path = `${editIssuePath}/:${item.id}`;
+    } else if (type === 'convert') {
+      path = `${featureToIssuePath}/:${item.id}`;
     }
 
     history.push(path, {
       type: 'edit',
       from: redirectTo || location.pathname,
       data: item,
-      product_uuid: product,
+      productID: product,
     });
   };
 
@@ -178,11 +179,13 @@ const UserDashboard = (props) => {
       path = addFeatPath;
     } else if (type === 'issue') {
       path = addIssuePath;
+    } else if (type === 'convert') {
+      path = featureToIssuePath;
     }
 
     history.push(path, {
       from: redirectTo || location.pathname,
-      product_uuid: product,
+      productID: product,
     });
   };
 
@@ -193,9 +196,9 @@ const UserDashboard = (props) => {
     }
 
     history.push(path, {
-      type: 'convert',
+      type: 'edit',
       from: redirectTo || location.pathname,
-      product_uuid: product,
+      productID: product,
       data: item,
     });
   };
@@ -213,9 +216,9 @@ const UserDashboard = (props) => {
     const { id, type } = toDeleteItem;
     setDeleteModal(false);
     if (type === 'feat') {
-      dispatch(deleteFeature(id));
+      console.log('Dispatch delete feature action here');
     } else if (type === 'issue') {
-      dispatch(deleteIssue(id));
+      console.log('Dispatch delete issue action here');
     }
   };
 
@@ -319,7 +322,7 @@ const UserDashboard = (props) => {
       <Route path={editFeatPath} component={AddFeatures} />
       <Route path={addIssuePath} component={AddIssues} />
       <Route path={editIssuePath} component={AddIssues} />
-      <Route path={featureToIssuePath} component={AddIssues} />
+      <Route path={featureToIssuePath} component={FeatureToIssue} />
     </div>
   );
 };