Merge branch 'OCD-4770' into qa

src/app/api/version.jsx

@@ -0,0 +1,19 @@
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
+import { useAxios } from './axios';
+
+const usePutVersion = () => {
+  const axios = useAxios();
+  const queryClient = useQueryClient();
+  return useMutation(async (data) => axios.put('versions', data)
+    .then((response) => response), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('developers');
+      queryClient.invalidateQueries('developers/hierarchy');
+    },
+  });
+};
+
+export {
+  usePutVersion,
+};

src/app/components/products/product-view.jsx

@@ -226,7 +226,10 @@ function ChplProductView({ product, productCount, dispatch }) {
                         Edit Product
                       </MenuItem>
                       <MenuItem
-                        onClick={handleAction('editVersion', { product, version: selectedVersion })}
+                        onClick={handleAction('editVersion', {
+                          version: product.versions.find((v) => v.id === selectedVersion),
+                          productId: product.id,
+                        })}
                         disabled={selectedVersion === 'all'}
                       >
                         Edit Version

src/app/components/version/version-edit.jsx

@@ -0,0 +1,166 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  Container,
+  makeStyles,
+} from '@material-ui/core';
+import {
+  arrayOf,
+  bool,
+  func,
+  object,
+  string,
+} from 'prop-types';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+
+import { ChplActionBar } from 'components/action-bar';
+import { ChplTextField } from 'components/util';
+import { eventTrack } from 'services/analytics.service';
+import { DeveloperContext, UserContext, useAnalyticsContext } from 'shared/contexts';
+import { utilStyles } from 'themes';
+
+const useStyles = makeStyles({
+  ...utilStyles,
+  content: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: '16px',
+    alignItems: 'start',
+  },
+  developerHeader: {
+    margin: '0',
+    fontSize: '1.25em',
+  },
+});
+
+const validationSchema = yup.object({
+  version: yup.string()
+    .required('Version is required'),
+});
+
+function ChplVersionEdit(props) {
+  const {
+    dispatch,
+    errorMessages: initialErrorMessages,
+    isInvalid: initialIsInvalid,
+    isProcessing,
+    isSplitting,
+    version,
+  } = props;
+  const { analytics } = useAnalyticsContext();
+  const { developer } = useContext(DeveloperContext);
+  const [errorMessages, setErrorMessages] = useState([]);
+  const [warnings, setWarnings] = useState([]);
+  const [isInvalid, setIsInvalid] = useState(false);
+  const classes = useStyles();
+  let formik;
+
+  useEffect(() => {
+    setIsInvalid(initialIsInvalid);
+  }, [initialIsInvalid]);
+
+  useEffect(() => {
+    setErrorMessages(initialErrorMessages);
+  }, [initialErrorMessages]);
+
+  const cancel = () => {
+    eventTrack({
+      ...analytics,
+      event: 'Cancel Version Edit',
+    });
+    dispatch('cancel');
+  };
+
+  const save = () => {
+    const updatedVersion = {
+      ...version,
+      version: formik.values.version,
+    };
+    dispatch('save', updatedVersion);
+  };
+
+  const handleDispatch = (action) => {
+    switch (action) {
+      case 'cancel':
+        cancel();
+        break;
+      case 'save':
+        formik.submitForm();
+        break;
+        // no default
+    }
+  };
+
+  const isActionDisabled = () => isInvalid || !formik.isValid;
+
+  formik = useFormik({
+    initialValues: {
+      version: version.version || '',
+    },
+    onSubmit: () => {
+      save();
+    },
+    validationSchema,
+  });
+
+  return (
+    <Container disableGutters maxWidth="lg">
+      <Card>
+        { isSplitting
+          && (
+            <CardHeader
+              title="New Developer"
+              component="h5"
+              className={classes.developerHeader}
+            />
+          )}
+        { !isSplitting
+          && (
+            <CardHeader
+              title={developer.name}
+              className={classes.developerHeader}
+              component="h2"
+            />
+          )}
+        <CardContent className={classes.content}>
+          <ChplTextField
+            id="version"
+            name="version"
+            label="Version"
+            required
+            value={formik.values.version}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.version && !!formik.errors.version}
+            helperText={formik.touched.version && formik.errors.version}
+          />
+        </CardContent>
+      </Card>
+      <ChplActionBar
+        dispatch={handleDispatch}
+        isDisabled={isActionDisabled()}
+        isProcessing={isProcessing}
+        errors={errorMessages}
+        warnings={warnings}
+      />
+    </Container>
+  );
+}
+
+export default ChplVersionEdit;
+
+ChplVersionEdit.propTypes = {
+  dispatch: func.isRequired,
+  errorMessages: arrayOf(string).isRequired,
+  isInvalid: bool.isRequired,
+  isProcessing: bool,
+  isSplitting: bool.isRequired,
+  version: object.isRequired,
+};
+
+ChplVersionEdit.defaultProps = {
+  isProcessing: false,
+};

src/app/components/version/version.jsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import {
+  arrayOf,
+  bool,
+  func,
+  object,
+  string,
+} from 'prop-types';
+
+import ChplVersionEdit from './version-edit';
+
+function ChplVersion({
+  dispatch,
+  errorMessages,
+  isInvalid: initialIsInvalid,
+  isProcessing,
+  isSplitting,
+  version,
+}) {
+  const [isInvalid, setIsInvalid] = useState(false);
+
+  useEffect(() => {
+    setIsInvalid(initialIsInvalid);
+  }, [initialIsInvalid]);
+
+  return (
+    <ChplVersionEdit
+      dispatch={dispatch}
+      isInvalid={isInvalid}
+      isProcessing={isProcessing}
+      isSplitting={isSplitting}
+      errorMessages={errorMessages}
+      version={version}
+    />
+  );
+}
+
+export default ChplVersion;
+
+ChplVersion.propTypes = {
+  dispatch: func,
+  errorMessages: arrayOf(string),
+  isInvalid: bool,
+  isProcessing: bool,
+  isSplitting: bool,
+  version: object.isRequired,
+};
+
+ChplVersion.defaultProps = {
+  dispatch: () => {},
+  errorMessages: [],
+  isInvalid: false,
+  isProcessing: false,
+  isSplitting: false,
+};

src/app/pages/organizations/developers/developer/developer-view.jsx

@@ -18,7 +18,7 @@ import { theme, utilStyles } from 'themes';
 
 const useStyles = makeStyles({
   ...utilStyles,
-  editUser:{
+  focus: {
     display: 'flex',
     flexDirection: 'column-reverse',
     paddingTop: '16px',
@@ -121,7 +121,7 @@ function ChplDeveloperView({ dispatch }) {
   };
 
   return (
-    <Box className={`${state === 'editUser' ? classes.editUser : classes.mainContent}`}>
+    <Box className={`${state === 'view' ? classes.mainContent : classes.focus}`}>
       <Box className={classes.lefthandContainer}>
         { state === 'view'
           && (
@@ -154,9 +154,11 @@ function ChplDeveloperView({ dispatch }) {
               />
             )}
             <ChplDirectReviews developer={developer} />
-            <ChplProducts developer={developer} dispatch={handleProductDispatch} />
           </>
         )}
+        {state === 'view' && (
+          <ChplProducts developer={developer} dispatch={handleProductDispatch} />
+        )}
         {(state === 'view' || state === 'editUser') && (
           <ChplUsers
             users={users}

src/app/pages/organizations/developers/developer/developer.jsx

@@ -13,6 +13,7 @@ import ChplDeveloperEdit from './developer-edit';
 import ChplDeveloperJoin from './developer-join';
 import ChplDeveloperSplit from './developer-split';
 import ChplDeveloperView from './developer-view';
+import ChplVersionEdit from './version-edit';
 
 import { useDeleteUserFromDeveloper, useFetchDeveloperHierarchy } from 'api/developer';
 import { usePostCreateInvitation, usePostCreateOldInvitation } from 'api/users';
@@ -34,6 +35,7 @@ function ChplDeveloperPage({ id }) {
   const { mutate: createInvitation } = usePostCreateInvitation();
   const { mutate: createOldInvitation } = usePostCreateOldInvitation();
   const [developer, setDeveloper] = useState(undefined);
+  const [version, setVersion] = useState(undefined);
   const [state, setState] = useState('view');
   const classes = useStyles();
 
@@ -55,6 +57,10 @@ function ChplDeveloperPage({ id }) {
       case 'split':
         setState(action);
         break;
+      case 'editVersion':
+        setState(action);
+        setVersion({ version: payload.version, productId: payload.productId });
+        break;
       case 'cognito-invite':
         createInvitation({
           ...payload,
@@ -121,12 +127,6 @@ function ChplDeveloperPage({ id }) {
           productId: payload.id,
         });
         break;
-      case 'editVersion':
-        $state.go('organizations.developers.developer.product.version.edit', {
-          productId: payload.product.id,
-          versionId: payload.version,
-        });
-        break;
       case 'mergeVersion':
         $state.go('organizations.developers.developer.product.version.merge', {
           productId: payload.product.id,
@@ -185,6 +185,14 @@ function ChplDeveloperPage({ id }) {
                 dispatch={handleDispatch}
               />
             )}
+          { state === 'editVersion'
+            && (
+              <ChplVersionEdit
+                dispatch={handleDispatch}
+                productId={version.productId}
+                version={version.version}
+              />
+            )}
           { state === 'join'
             && (
               <ChplDeveloperJoin