INFRA-1859 | Harinder | Package upgrades

package.json

@@ -14,27 +14,27 @@
   "dependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@jsonforms/core": "^2.4.1-alpha.3",
-    "@jsonforms/material-renderers": "^2.4.1-alpha.3",
-    "@jsonforms/react": "^2.4.1-alpha.3",
-    "@material-ui/core": "^4.11.0",
+    "@jsonforms/core": "^2.5.2",
+    "@jsonforms/material-renderers": "^2.5.2",
+    "@jsonforms/react": "^2.5.2",
+    "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@types/react-redux": "^7.1.11",
     "dayjs": "^1.11.7",
-    "formik": "^2.2.2",
+    "formik": "^2.4.2",
     "global": "^4.4.0",
     "js-cookie": "^2.2.1",
     "json-to-pretty-yaml": "^1.2.2",
-    "react": "^16.13.0",
+    "react": "^16.14.0",
     "react-cookie": "4.0.3",
     "react-datetime-picker": "^5.2.0",
-    "react-dom": "^16.13.0",
-    "react-redux": "^7.2.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-dom": "^16.14.0",
+    "react-redux": "^7.2.9",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
     "react-scripts": "3.4.0",
-    "react-toastify": "^6.0.6",
+    "react-toastify": "^6.2.0",
     "yup": "^0.32.11"
   },
   "eslintConfig": {
@@ -61,31 +61,31 @@
     "@types/jest": "^24.0.22",
     "@types/lodash": "^4.14.149",
     "@types/material-ui": "^0.21.7",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/node": "^12.20.55",
+    "@types/react": "^16.14.43",
+    "@types/react-dom": "^16.9.19",
     "@types/react-router-dom": "^5.1.3",
-    "@types/react-test-renderer": "^16.9.1",
+    "@types/react-test-renderer": "^16.9.5",
     "@types/yup": "^0.29.13",
-    "@typescript-eslint/eslint-plugin": "^2.10.0",
-    "@typescript-eslint/parser": "^2.10.0",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
     "awesome-typescript-loader": "^5.2.1",
     "copy-webpack-plugin": "^5.0.5",
     "css-loader": "^3.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-plugin-react-hooks": "^4.0.4",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.1.0",
-    "jest": "^24.9.0",
+    "jest": "^29.5.0",
     "jest-fetch-mock": "^2.1.2",
     "prettier": "1.19.1",
     "react-test-renderer": "^16.12.0",
     "ts-jest": "^24.1.0",
-    "typescript": "~3.7.2",
-    "webpack-cli": "^3.3.11"
+    "typescript": "~3.7.7",
+    "webpack-cli": "^3.3.12"
   },
   "optionalDependencies": {
     "fsevents": "^2.1.3"

src/coreform/BaseForm.tsx

@@ -22,7 +22,6 @@ import { Dispatch, SetStateAction } from 'react';
 import DynamoDbForm from "./dynamodb/DynamoDbForm";
 import {store} from "../store/store";
 import { getBreachedValues } from '../helper/ChangeRequest'
-import { BackgroundColorProperty, FloatProperty, MarginRightProperty } from 'csstype'
 import Popup from '../components/common/Popup'
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -33,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   tabs: {
     borderRight: `1px solid ${theme.palette.divider}`,
-  },
+  }
 }));
 
 interface BaseFormProps {
@@ -53,12 +52,6 @@ interface FormTab {
   errorCheckFn: Function
 }
 
-interface SubmitButtonStyle {
-  float: FloatProperty,
-  marginRight: MarginRightProperty<number>,
-  backgroundColor?: BackgroundColorProperty,
-}
-
 const tabList: Array<FormTab> = [
   {
     name: 'deployment',
@@ -150,8 +143,8 @@ const BaseForm = (props: BaseFormProps) => {
   const classes = useStyles();
   const defaultSubmitButtonLabel = "Submit";
   const submitChangeRequestLabel = "Submit Change Request"
-  const defaultSubmitButtonStyle: SubmitButtonStyle = {float: "right", marginRight: 100};
-  const submitChangeRequestStyle: SubmitButtonStyle = {...defaultSubmitButtonStyle, backgroundColor: '#fd7700'};
+  const defaultSubmitButtonStyle = { alignItems: "flex-end", display: "flex", justifyContent: "flex-end", float: "right" };
+  const submitChangeRequestStyle = {...defaultSubmitButtonStyle, backgroundColor: '#fd7700'};
   const { setCrDescription } = props
 
   const [currentTab, setCurrentTab] = React.useState(0);
@@ -182,7 +175,7 @@ const BaseForm = (props: BaseFormProps) => {
   };
 
   const submitButton = (
-    style: SubmitButtonStyle,
+    style: {},
     label: string,
     type: "submit" | "button" = "submit",
     onClick: () => void = () => {}
@@ -204,7 +197,7 @@ const BaseForm = (props: BaseFormProps) => {
     type: "submit" | "button" = "button",
     style = submitChangeRequestStyle,
     onClick: () => void = () => {}
-  ) => submitButton(style, submitChangeRequestLabel, type, onClick);
+  ) => submitButton(submitChangeRequestStyle, submitChangeRequestLabel, type, onClick);
 
   const submitManifestButton = () => submitButton(defaultSubmitButtonStyle, defaultSubmitButtonLabel)
 
@@ -286,7 +279,7 @@ const BaseForm = (props: BaseFormProps) => {
                 onBlur={({ target: { value } }) => setCrDescription(value)}
                 multiline
               />
-              {submitCrButton("submit", {...submitChangeRequestStyle, marginRight: 0},
+              {submitCrButton("submit", {...submitChangeRequestStyle},
                 () => {
                   handleSubmit(props.values);
                   setRolloutPopupOpen(false);