[BUGFIX] fix NavDrawer to force href update of menu items (#32)

* - fix NavDrawer to force href update of menu items (instead of state update) - update dependencies * - revert proxy config * - fix callback of subsections too * - formatting * - test husky * - test husky * - test husky
caraml-dev · Aug 11, 2021 · 2c41da7 · 2c41da7
1 parent 1412e85
commit 2c41da7
Show file tree

Hide file tree

Showing 19 changed files with 632 additions and 360 deletions.
diff --git a/ui/.husky/pre-commit b/ui/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd ui && yarn lint-staged
diff --git a/ui/package.json b/ui/package.json
@@ -16,26 +16,24 @@
   "scripts": {
     "app": "yarn workspace mlp-ui",
     "lib": "yarn workspace @gojek/mlp-ui",
-
     "format": "yarn prettier --write",
     "prettier": "prettier \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "lint": "yarn workspaces run lint",
-
     "wait-for-lib": "wait-on packages/lib/dist/index.js packages/lib/dist/index.es.js",
     "start:app": "sleep 1; run-s wait-for-lib \"app start\"",
     "start:lib": "yarn lib start",
     "start": "run-p start:lib start:app",
-
     "version:app": "yarn lib version",
     "version:lib": "yarn app version",
+    "prepare": "cd ../ && husky install ui/.husky",
     "set-version-from-git:package": "run-p \"version:* --new-version {1} --no-git-tag-version\" --",
     "set-version-from-git:depenency": "run-s \"app add @gojek/mlp-ui@{1}\" --",
     "set-version-from-git": "run-s \"set-version-from-git:* $(yarn --silent version-from-git)\"",
     "version-from-git": "../scripts/vertagen/vertagen.sh -f docker"
   },
   "devDependencies": {
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.11",
+    "husky": "^7.0.1",
+    "lint-staged": "^11.1.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.17.0",
     "wait-on": "^5.1.0"

diff --git a/ui/packages/app/package.json b/ui/packages/app/package.json
@@ -1,19 +1,19 @@
 {
   "name": "mlp-ui",
-  "version": "1.4.6",
+  "version": "1.4.9",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "31.10.0",
-    "@gojek/mlp-ui": "1.4.6",
-    "@reach/router": "1.3.3",
+    "@elastic/datemath": "^5.0.3",
+    "@elastic/eui": "32.3.0",
+    "@gojek/mlp-ui": "1.4.9",
+    "@reach/router": "1.3.4",
     "@sentry/browser": "5.15.5",
-    "moment": "2.25.3",
+    "moment": "^2.29.1",
     "object-assign-deep": "0.4.0",
-    "query-string": "5.1.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "query-string": "^7.0.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {

diff --git a/ui/packages/lib/package.json b/ui/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gojek/mlp-ui",
-  "version": "1.4.6",
+  "version": "1.4.9",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -31,26 +31,26 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "lodash": "^4.17.20",
-    "prop-types": "15.7.2",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.7.2",
     "proper-url-join": "2.1.1",
-    "query-string": "^6.13.1",
+    "query-string": "^7.0.1",
     "react-collapsed": "^3.0.1",
     "react-ellipsis-text": "^1.2.1",
     "react-fast-compare": "^3.2.0",
-    "react-google-login": "5.1.19",
+    "react-google-login": "5.2.2",
     "react-scroll": "^1.8.1",
     "react-sticky": "^6.0.3",
     "resize-observer-polyfill": "^1.5.1",
-    "yup": "^0.29.1"
+    "yup": "^0.29.3"
   },
   "peerDependencies": {
-    "@elastic/eui": "31.10.0",
-    "@reach/router": "1.3.3",
+    "@elastic/eui": "^32.3.0",
+    "@reach/router": "1.3.4",
     "@sentry/browser": "5.15.5",
-    "moment": "^2.27.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "moment": "^2.29.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -60,15 +60,16 @@
     "@babel/plugin-proposal-export-default-from": "^7.8.3",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-eslint": "^8.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.4",
     "node-importer": "1.0.2",
-    "node-sass": "^4.14.1",
-    "rollup": "^1.32.1",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^8.3.0",
-    "rollup-plugin-eslint": "^7.0.0",
+    "node-sass": "^4.11.0",
+    "rollup": "^2.56.2",
     "rollup-plugin-ignore-import": "^1.3.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.3",
-    "rollup-plugin-sass": "^1.2.2"
+    "rollup-plugin-sass": "^1.2.4",
+    "rollup-pluginutils": "^2.8.2"
   }
 }
diff --git a/ui/packages/lib/rollup.config.js b/ui/packages/lib/rollup.config.js
@@ -1,10 +1,10 @@
-import babel from "rollup-plugin-babel";
-import resolve from "rollup-plugin-node-resolve";
+import babel from "@rollup/plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import eslint from "@rollup/plugin-eslint";
 import sass from "rollup-plugin-sass";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import ignoreImport from "rollup-plugin-ignore-import";
 import nodeSass from "node-sass";
-import { eslint } from "rollup-plugin-eslint";
 
 import pkg from "./package.json";
 
@@ -42,6 +42,7 @@ export default {
     }),
     resolve(),
     babel({
+      babelHelpers: "bundled",
       exclude: "node_modules/**"
     })
   ]

diff --git a/ui/packages/lib/src/components/accordion_form/AccordionForm.js b/ui/packages/lib/src/components/accordion_form/AccordionForm.js
@@ -1,20 +1,15 @@
 import React, { useRef } from "react";
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from "@elastic/eui";
-import { StepActions } from "../multi_steps_form/StepActions";
 import { Sticky, StickyContainer } from "react-sticky";
+import { StepActions } from "../multi_steps_form";
 import FormValidationContext from "../form/validation/context";
-import { MultiSectionFormValidationContextProvider } from "../form/validation/multi_section_provider";
-import {
-  AccordionFormScrollController,
-  AccordionFormSection,
-  AccordionFormSideNav
-} from ".";
-
-import "./AccordionForm.scss";
+import { MultiSectionFormValidationContextProvider } from "../form";
+import { AccordionFormSideNav } from "./AccordionFormSideNav";
+import { AccordionFormScrollController } from "./AccordionFormScrollController";
+import { AccordionFormSection } from "./AccordionFormSection";
 import { useDimension } from "../../hooks";
-import { isEmpty } from "../../utils/object";
 
-export const isSectionInvalid = errors => !isEmpty(errors);
+import "./AccordionForm.scss";
 
 export const AccordionForm = ({
   name,

diff --git a/ui/packages/lib/src/components/accordion_form/AccordionFormScrollController.js b/ui/packages/lib/src/components/accordion_form/AccordionFormScrollController.js
@@ -1,9 +1,9 @@
 import { useContext, useEffect, useState } from "react";
 import { FormValidationContext } from "../form/validation";
-import { slugify } from "@gojek/mlp-ui";
 import { scroller } from "react-scroll";
 import { animatedScrollConfig } from "./scroll";
-import { isSectionInvalid } from "./AccordionForm";
+import { isSectionInvalid } from "./functions";
+import { slugify } from "../../utils";
 
 export const AccordionFormScrollController = ({ sections }) => {
   const [isFormSubmissionInProgress, setFormSubmissionInProgress] = useState(

diff --git a/ui/packages/lib/src/components/accordion_form/AccordionFormSection.js b/ui/packages/lib/src/components/accordion_form/AccordionFormSection.js
@@ -1,9 +1,9 @@
 import React from "react";
 import { Element } from "react-scroll";
 import { EuiAccordion } from "@elastic/eui";
-import { slugify } from "@gojek/mlp-ui";
+import { slugify } from "../../utils";
 import { FormValidationContext } from "../form/validation";
-import { isSectionInvalid } from "./AccordionForm";
+import { isSectionInvalid } from "./functions";
 
 export const AccordionFormSection = ({ section, errors, renderTitle }) => (
   <Element name={slugify(section.title)}>

diff --git a/ui/packages/lib/src/components/accordion_form/AccordionFormSideNav.js b/ui/packages/lib/src/components/accordion_form/AccordionFormSideNav.js
@@ -1,8 +1,8 @@
 import React from "react";
-import { slugify } from "@gojek/mlp-ui";
 import { EuiIcon, EuiSideNav } from "@elastic/eui";
 import { Link } from "react-scroll";
 import { animatedScrollConfig } from "./scroll";
+import { slugify } from "../../utils";
 
 export const AccordionFormSideNav = ({ name, sections }) => {
   const sideNav = [

diff --git a/ui/packages/lib/src/components/accordion_form/functions.js b/ui/packages/lib/src/components/accordion_form/functions.js
@@ -0,0 +1,3 @@
+import { isEmpty } from "../../utils/object";
+
+export const isSectionInvalid = errors => !isEmpty(errors);
diff --git a/ui/packages/lib/src/components/confirmation_modal/ConfirmationModal.js b/ui/packages/lib/src/components/confirmation_modal/ConfirmationModal.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from "react";
-import { useToggle } from "@gojek/mlp-ui";
 import { EuiOverlayMask, EuiConfirmModal, EuiProgress } from "@elastic/eui";
+import { useToggle } from "../../hooks";
 
 export const ConfirmationModal = ({
   title,

diff --git a/ui/packages/lib/src/components/expandable_container/ExpandableContainer.js b/ui/packages/lib/src/components/expandable_container/ExpandableContainer.js
@@ -1,10 +1,9 @@
 import React, { Fragment, useRef } from "react";
 import { EuiButton, EuiFlexItem, EuiLink, EuiSpacer } from "@elastic/eui";
 import classNames from "classnames";
-import { useToggle } from "@gojek/mlp-ui";
+import { useToggle, useDimension } from "../../hooks";
 
 import "./ExpandableDescriptionList.scss";
-import { useDimension } from "../../hooks";
 
 export const ExpandableContainer = ({
   maxHeight = 300,

diff --git a/ui/packages/lib/src/components/form/context.js b/ui/packages/lib/src/components/form/context.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useState, useMemo } from "react";
-import { set } from "@gojek/mlp-ui/src/utils";
-import { StackableFunction } from "./functions/stackable_function";
-import { useOnChangeHandler } from "./hooks/useOnChangeHandler";
+import { set } from "../../utils";
+import { StackableFunction } from "./functions";
+import { useOnChangeHandler } from "./hooks";
 
 export const FormContext = React.createContext({});
 

diff --git a/ui/packages/lib/src/components/form/docker_image_combo_box/DockerRegistryPopover.js b/ui/packages/lib/src/components/form/docker_image_combo_box/DockerRegistryPopover.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { EuiButtonEmpty, EuiContextMenu, EuiPopover } from "@elastic/eui";
-import { flattenPanelTree } from "@gojek/mlp-ui";
+import { flattenPanelTree } from "../../../utils";
 
 export const DockerRegistryPopover = ({ value, registryOptions, onChange }) => {
   const [isOpen, setOpen] = useState(false);

diff --git a/ui/packages/lib/src/components/form/in_memory_table_form/InMemoryTableForm.js b/ui/packages/lib/src/components/form/in_memory_table_form/InMemoryTableForm.js
@@ -5,7 +5,7 @@ import {
   EuiFormRow,
   EuiInMemoryTable
 } from "@elastic/eui";
-import { get } from "@gojek/mlp-ui/src/utils";
+import { get } from "../../../utils";
 
 import "./InMemoryTableForm.scss";
 

diff --git a/ui/packages/lib/src/components/form/validation/errors.js b/ui/packages/lib/src/components/form/validation/errors.js
@@ -1,4 +1,4 @@
-import { get, normalizePath, set } from "@gojek/mlp-ui/src/utils";
+import { get, normalizePath, set } from "../../../utils";
 
 export const extractErrors = validationError => {
   let errors = {};

diff --git a/ui/packages/lib/src/components/header/Header.js b/ui/packages/lib/src/components/header/Header.js
@@ -15,6 +15,7 @@ import { HeaderUserMenu } from "./HeaderUserMenu";
 import { slugify } from "../../utils";
 import { NavDrawer } from "../nav_drawer";
 import "./Header.scss";
+import { Link } from "@reach/router";
 
 export const Header = ({
   homeUrl = "/",
@@ -35,11 +36,11 @@ export const Header = ({
         </EuiHeaderSectionItem>
 
         <EuiHeaderSectionItem border="right">
-          <a href={homepage ? homepage : "/"}>
+          <Link to={homepage ? homepage : "/"}>
             <EuiText className="header-title">
               <h4>Machine Learning Platform</h4>
             </EuiText>
-          </a>
+          </Link>
         </EuiHeaderSectionItem>
         <ProjectsDropdown
           projects={projects}

diff --git a/ui/packages/lib/src/components/nav_drawer/NavDrawer.js b/ui/packages/lib/src/components/nav_drawer/NavDrawer.js
@@ -36,8 +36,11 @@ export const NavDrawer = ({ homeUrl = "/", docLinks }) => {
           ? a.config.sections.map(s => ({
               id: slugify(`${a.name}.${s.name}`),
               label: s.name,
-              callback: () =>
-                navigate(urlJoin(a.href, "projects", projectId, s.href)),
+              callback: () => {
+                const dest = urlJoin(a.href, "projects", projectId, s.href);
+
+                isAppActive ? navigate(dest) : (window.location.href = dest);
+              },
               className: "euiTreeView__node---small---subsection"
             }))
           : undefined;
@@ -53,7 +56,9 @@ export const NavDrawer = ({ homeUrl = "/", docLinks }) => {
 
         callback: () =>
           !children || !projectId
-            ? navigate(projectId ? `${a.href}/projects/${projectId}` : a.href)
+            ? (window.location.href = !!projectId
+                ? urlJoin(a.href, "projects", projectId)
+                : a.href)
             : {},
         children: children
       };