Edit a release (#346)

* Edit a release * Render releases summary features and issues charts * Clean code base
buildly-release-management · Nov 19, 2024 · fa576c1 · fa576c1
1 parent 3390397
commit fa576c1
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 36 deletions.
diff --git a/src/components/Charts/BarChart/BarChart.js b/src/components/Charts/BarChart/BarChart.js
@@ -22,7 +22,7 @@ ChartJS.register(
 // style={{ maxHeight: "600px" }}
 
 const BarChart = ({
-  id, labels, label, data, backgroundColor, borderWidth, borderColor,
+  id, label, labels, data, backgroundColor, borderWidth, borderColor,
 }) => {
   const options = {
     plugins: {

diff --git a/src/pages/ReleaseDetails/ReleaseDetails.js b/src/pages/ReleaseDetails/ReleaseDetails.js
@@ -44,7 +44,7 @@ const ReleaseDetails = ({ history }) => {
   const [assigneesValues, setAssigneesValues] = useState([]);
   const [barFeatureNames, setBarFeatureNames] = useState([]);
   const [barSummary, setBarSummary] = useState([]);
-  const [value, setValue] = useState('1');
+  const [value, setValue] = useState('2');
 
   const { data: releaseDetails, isLoading: isReleaseDetailsLoading } = useQuery(
     ['releaseSummary', releaseUuid],

diff --git a/src/pages/ReleaseDetails/components/ReleaseForm.js b/src/pages/ReleaseDetails/components/ReleaseForm.js
@@ -1,35 +1,47 @@
 import React, { useEffect, useState } from 'react';
 import Form from 'react-bootstrap/Form';
-import { Button } from '@mui/material';
+import {
+  Autocomplete, Button, Checkbox, TextField,
+} from '@mui/material';
 import Loader from '@components/Loader/Loader';
 import { useUpdateReleaseMutation } from '@react-query/mutations/release/updateReleaseMutation';
 import './ReleaseForm.css';
+import _ from 'lodash';
+import { useQuery } from 'react-query';
+import { getAllFeatureQuery } from '@react-query/queries/release/getAllFeatureQuery';
+import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon } from '@mui/icons-material';
 
 const ReleaseForm = ({ releasesDetails, displayAlert }) => {
   const [formData, setFormData] = useState({});
+  const [selectedFeatures, setSelectedFeatures] = useState([]);
 
-  const { mutate: updateReleaseMutation, isLoading: isUpdatingReleaseLoading } = useUpdateReleaseMutation(releasesDetails.release_uuid, displayAlert);
+  const uncheckedIcon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+  const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
+  const { data: features, isLoading: isAllFeatureLoading } = useQuery(
+    ['allFeatures', releasesDetails?.product_uuid],
+    () => getAllFeatureQuery(releasesDetails?.product_uuid, displayAlert),
+    { refetchOnWindowFocus: false, enabled: !_.isEmpty(releasesDetails?.product_uuid) && !_.isEqual(_.toNumber(releasesDetails?.product_uuid), 0) },
+  );
+
+  // Initialize selected features
   useEffect(() => {
-    setFormData({});
-    if (releasesDetails) {
-      setFormData({
-        ...formData,
-        release_uuid: releasesDetails.release_uuid,
-        name: releasesDetails.name,
-        description: releasesDetails.description,
-        release_date: releasesDetails.release_date,
-      });
+    resetForm();
+    if (!_.isEmpty(features)) {
+      const selected = features.filter((featureObj) => releasesDetails.features.includes(featureObj.feature_uuid));
+      setSelectedFeatures(selected);
     }
-  }, []);
+  }, [features]);
+
+  const { mutate: updateReleaseMutation, isLoading: isUpdatingReleaseLoading } = useUpdateReleaseMutation(releasesDetails?.release_uuid, displayAlert);
 
   const updateFormData = (e) => {
     setFormData({
       ...formData,
       [e.target.name]: e.target.value,
     });
   };
-  console.log(formData);
+
   const submitRelease = (event) => {
     event.preventDefault();
     updateReleaseMutation(formData);
@@ -38,18 +50,19 @@ const ReleaseForm = ({ releasesDetails, displayAlert }) => {
   const resetForm = () => {
     setFormData({
       ...formData,
-      release_uuid: releasesDetails.release_uuid,
-      name: releasesDetails.name,
-      description: releasesDetails.description,
-      release_date: releasesDetails.release_date,
+      release_uuid: releasesDetails?.release_uuid,
+      name: releasesDetails?.name,
+      description: releasesDetails?.description,
+      release_date: releasesDetails?.release_date,
+      features: releasesDetails?.features,
     });
   };
 
   return (
     <>
-      {isUpdatingReleaseLoading && <Loader open={isUpdatingReleaseLoading} />}
+      {(isUpdatingReleaseLoading || isAllFeatureLoading) && <Loader open={isUpdatingReleaseLoading || isAllFeatureLoading} />}
       <Form noValidate>
-        <Form.Group className="mb-3 col-md-6 col-sm-12" controlId="name">
+        <Form.Group className="mb-3" controlId="name">
           <Form.Label>Name*</Form.Label>
           <Form.Control
             size="sm"
@@ -71,7 +84,7 @@ const ReleaseForm = ({ releasesDetails, displayAlert }) => {
             onChange={(event) => updateFormData(event)}
           />
         </Form.Group>
-        <Form.Group className="mb-3 col-md-3 col-sm-12" controlId="date">
+        <Form.Group className="mb-3 col-md-6 col-sm-12" controlId="date">
           <Form.Label>Release date*</Form.Label>
           <Form.Control
             size="sm"
@@ -83,6 +96,43 @@ const ReleaseForm = ({ releasesDetails, displayAlert }) => {
             onChange={(event) => updateFormData(event)}
           />
         </Form.Group>
+        <Form.Group
+          className="mb-3"
+          controlId="features"
+        >
+          <Form.Label>Add Features</Form.Label>
+          <Autocomplete
+            multiple
+            id="features"
+            disableCloseOnSelect
+            filterSelectedOptions
+            options={_.orderBy(features, ['name'], ['asc'])}
+            getOptionLabel={(option) => option && option.name}
+            value={selectedFeatures}
+            onChange={(event, newValue) => {
+              if (_.size(newValue) > _.size(selectedFeatures)) {
+                setSelectedFeatures([
+                  ...selectedFeatures,
+                  _.last(newValue),
+                ]);
+              } else {
+                setSelectedFeatures(newValue);
+              }
+            }}
+            renderOption={(props, option, { selected }) => (
+              <li {...props}>
+                <Checkbox
+                  icon={uncheckedIcon}
+                  checkedIcon={checkedIcon}
+                  style={{ marginRight: 8 }}
+                  checked={selected}
+                />
+                {option.name}
+              </li>
+            )}
+            renderInput={(params) => <TextField {...params} />}
+          />
+        </Form.Group>
       </Form>
 
       <div className="d-flex flex-row justify-content-end">

diff --git a/src/pages/ReleaseList/ReleaseList.js b/src/pages/ReleaseList/ReleaseList.js
@@ -98,12 +98,10 @@ const ReleaseList = () => {
   const { mutate: createReleaseMutation, isLoading: isCreatingReleaseLoading } = useCreateReleaseMutation(selectedProduct, null, null, displayAlert);
   const { mutate: deleteReleaseMutation, isLoading: isDeletingReleaseLoading } = useDeleteReleaseMutation(selectedProduct, null, null, displayAlert);
 
-  let featuresReleaseNames = [];
-  let issuesReleaseNames = [];
-
   useEffect(() => {
     if (!_.isEmpty(releases)) {
-      _.orderBy(releases, 'release_date');
+      releases.sort((a, b) => b.release_date.localeCompare(a.release_date));
+
       let modifiedReleases = [];
       _.forEach(releases, (rel) => {
         modifiedReleases = [
@@ -124,16 +122,16 @@ const ReleaseList = () => {
         releaseDetails.issues,
         'issues_data',
       );
-      issuesReleaseNames = issuesSummaryObj.releaseNames;
+
       const featuresSummaryObj = generateBarChartData(
-        releaseDetails.features,
+          releaseDetails.features,
         'features_data',
       );
-      featuresReleaseNames = featuresSummaryObj.releaseNames;
+
       setReleasesSummary({
         releases: Object.values(releaseDetails.releases),
-        features: featuresSummaryObj.barChartSummaryData,
-        issues: issuesSummaryObj.barChartSummaryData,
+        features: featuresSummaryObj,
+        issues: issuesSummaryObj,
       });
     }
   }, [releaseDetails]);
@@ -160,7 +158,8 @@ const ReleaseList = () => {
         data: [],
       },
     ];
-    _.forEach(data, (entry) => {
+
+    data.forEach((entry) => {
       releaseNames.push(entry.release);
       Object.keys(entry[dataField]).forEach((key) => {
         const index = barChartSummaryData.findIndex(
@@ -507,8 +506,8 @@ const ReleaseList = () => {
                       <BarChart
                         id="features"
                         label="Features summary"
-                        labels={featuresReleaseNames}
-                        data={releasesSummary.features}
+                        labels={releasesSummary.features.releaseNames}
+                        data={releasesSummary.features.barChartSummaryData}
                         backgroundColor={backgroundColor}
                         borderWidth={borderWidth}
                         borderColor={borderColor}
@@ -523,8 +522,8 @@ const ReleaseList = () => {
                       <BarChart
                         id="issues"
                         label="Issues summary"
-                        labels={issuesReleaseNames}
-                        data={releasesSummary.issues}
+                        labels={releasesSummary.issues.releaseNames}
+                        data={releasesSummary.issues.barChartSummaryData}
                         backgroundColor={backgroundColor}
                         borderWidth={borderWidth}
                         borderColor={borderColor}