Upgrade to nextv12 and routing update to next/router (#1686)

* Upgrade to nextv12 and routing update to next/router

Signed-off-by: Ding Ma <[email protected]>

* Fix service pages

Signed-off-by: Ding Ma <[email protected]>

* Fix sd build

Signed-off-by: Ding Ma <[email protected]>

* add old pages mapping

Signed-off-by: Ding Ma <[email protected]>

* Fix lint

Signed-off-by: Ding Ma <[email protected]>

* Fix snapshots

Signed-off-by: Ding Ma <[email protected]>

* Update based on comments

Signed-off-by: Ding Ma <[email protected]>

screwdriver/scripts/install_deps.sh

@@ -13,7 +13,7 @@ echo "-----------------Install maven: -----------------"
 apt-get install -y maven
 
 echo "-----------------Install nodejs: -----------------"
-curl -sL https://deb.nodesource.com/setup_12.x | bash -
+curl -sL https://deb.nodesource.com/setup_14.x | bash -
 apt-get install -y nodejs
 aptitude install -y npm
 npm install -g npm@latest

ui/app.js

@@ -19,7 +19,6 @@ const express = require('express');
 const next = require('next');
 const appConfig = require('./src/config/config')();
 const secrets = require('./src/server/secrets');
-const appRoutes = require('./src/routes');
 const handlers = {
     api: require('./src/server/handlers/api'),
     passportAuth: require('./src/server/handlers/passportAuth'),
@@ -45,7 +44,23 @@ Promise.all([nextApp.prepare(), secrets.load(appConfig)])
             handlers.secure(expressApp, appConfig, secrets);
             handlers.passportAuth.auth(expressApp, appConfig, secrets);
             handlers.routes.route(expressApp, appConfig, secrets);
-            expressApp.use(appRoutes.getRequestHandler(nextApp));
+            expressApp.get('/athenz/', (req, res) => {
+                return nextApp.render(req, res, `/index`, req.query);
+            });
+            expressApp.get('/athenz/*', (req, res) => {
+                return nextApp.render(
+                    req,
+                    res,
+                    `${req.path.substring(7)}`,
+                    req.query
+                );
+            });
+            expressApp.get('/', (req, res) => {
+                return nextApp.render(req, res, `/index`, req.query);
+            });
+            expressApp.get('*', (req, res) => {
+                return nextApp.render(req, res, `${req.path}`, req.query);
+            });
 
             const server = https.createServer(
                 {

ui/package.json

@@ -31,7 +31,7 @@
         "build": "NODE_ENV=production next build",
         "start": "NODE_ENV=production node app.js",
         "fix-lint": "prettier --write *.js src/*.js src/config/*.js src/pages/*.js src/components/*/*.js src/server/*.js src/server/*/*.js src/__tests__/*/*.js __mocks__/*/*.js",
-        "single-test": "jest -i src/__tests__/pages/home.test.js -t HomePage",
+        "single-test": "jest -i src/__tests__/pages/index.test.js -t HomePage",
         "func:local:wd": "webdriver-manager update && webdriver-manager start --seleniumPort 4445",
         "func:local:ui": "DEBUG=AthenzUI:functional:* APP_ENV=functional-local PLATFORM=$(uname -s) wdio run src/__tests__/spec/wdio.conf.js --baseUrl=$BASEURL",
         "ci-setup": "./scripts/ci/ci-setup.sh",
@@ -70,25 +70,23 @@
         "moment": "2.29.1",
         "moment-timezone": "0.5.33",
         "multer": "1.4.3",
-        "next": "10.2.3",
-        "next-compose-plugins": "2.2.1",
-        "next-routes": "1.4.2",
+        "next": "12.0.4",
         "passport": "0.4.1",
         "passport-strategy": "1.0.0",
         "polished": "4.1.3",
         "prop-types": "15.7.2",
-        "react": "17.0.2",
-        "react-dom": "17.0.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-modal": "3.14.3",
         "react-popper": "2.2.5",
         "react-popper-tooltip": "3.1.1",
         "request": "2.88.2",
         "setimmediate": "1.0.5",
         "terser": "5.7.2",
-        "uuid": "8.3.2",
-        "xml-crypto": "2.1.3",
         "tslib": "2.3.1",
-        "typescript": "4.4.2"
+        "typescript": "4.4.2",
+        "uuid": "8.3.2",
+        "xml-crypto": "2.1.3"
     },
     "devDependencies": {
         "@babel/core": "7.13.16",

ui/src/__tests__/components/utils/JsonUtils.test.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright The Athenz Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import JsonUtils from "../../../components/utils/JsonUtils";
+
+describe('JsonUtils', () => {
+    it('should test', () => {
+        let undefinedVar = undefined;
+        expect(JsonUtils.omitUndefined(undefinedVar)).toEqual(null);
+
+        let undefinedObj = {
+            var1: undefined,
+            var2: 'test'
+        };
+        let undefinedObjExpect = {var2: 'test'};
+        expect(JsonUtils.omitUndefined(undefinedObj)).toEqual(undefinedObjExpect);
+
+        let varObj = {
+            var1: 'test'
+        };
+        expect(JsonUtils.omitUndefined(varObj)).toEqual(varObj);
+    });
+});

ui/src/__tests__/pages/domain-settings.test.js → ui/src/__tests__/pages/domain/[domain]/domain-settings.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import DomainSettingsPage from '../../pages/domain-settings';
+import DomainSettingsPage from '../../../../pages/domain/[domain]/domain-settings';
 
 describe('DomainSettingsPage', () => {
     it('should render', () => {

ui/src/__tests__/pages/group-settings.test.js → ui/src/__tests__/pages/domain/[domain]/group/[group]/settings.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import SettingPage from '../../pages/settings';
+import SettingPage from '../../../../../../pages/domain/[domain]/role/[role]/settings';
 
 describe('GroupSettingPage', () => {
     it('should render', () => {

ui/src/__tests__/pages/policy.test.js → ui/src/__tests__/pages/domain/[domain]/policy.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import PolicyPage from '../../pages/policy';
+import PolicyPage from '../../../../pages/domain/[domain]/policy';
 
 describe('PolicyPage', () => {
     it('should render', () => {

ui/src/__tests__/pages/role.test.js → ui/src/__tests__/pages/domain/[domain]/role.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import RolePage from '../../pages/role';
+import RolePage from '../../../../pages/domain/[domain]/role';
 
 describe('RolePage', () => {
     it('should render', () => {

ui/src/__tests__/pages/members.test.js → ui/src/__tests__/pages/domain/[domain]/role/[role]/members.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import MemberPage from '../../pages/members';
+import MemberPage from '../../../../../../pages/domain/[domain]/role/[role]/members';
 
 describe('MemberPage', () => {
     it('should render', () => {

ui/src/__tests__/pages/role-policy.test.js → ui/src/__tests__/pages/domain/[domain]/role/[role]/policy.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import RolePolicyPage from '../../pages/role-policy';
+import RolePolicyPage from '../../../../../../pages/domain/[domain]/role/[role]/policy';
 
 describe('RolePolicyPage', () => {
     it('should render', () => {

ui/src/__tests__/pages/review.test.js → ui/src/__tests__/pages/domain/[domain]/role/[role]/review.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import ReviewPage from '../../pages/review';
+import ReviewPage from '../../../../../../pages/domain/[domain]/role/[role]/review';
 
 describe('ReviewPage', () => {
     it('should render', () => {

ui/src/__tests__/pages/settings.test.js → ui/src/__tests__/pages/domain/[domain]/role/[role]/settings.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import SettingPage from '../../pages/settings';
+import SettingPage from '../../../../../../pages/domain/[domain]/role/[role]/settings';
 
 describe('SettingPage', () => {
     it('should render', () => {

ui/src/__tests__/pages/role-tags.test.js → ui/src/__tests__/pages/domain/[domain]/role/[role]/tags.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import RoleTagsPage from '../../pages/role-tags';
+import RoleTagsPage from '../../../../../../pages/domain/[domain]/role/[role]/tags';
 
 describe('Roles Tag Page', () => {
     it('should render', () => {

ui/src/__tests__/pages/service.test.js → ui/src/__tests__/pages/domain/[domain]/service.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import ServicePage from '../../pages/service';
+import ServicePage from '../../../../pages/domain/[domain]/service';
 
 describe('ServicePage', () => {
     it('should render', () => {

ui/src/__tests__/pages/dynamic-instance.test.js → ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/dynamic.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import DynamicInstancePage from '../../pages/dynamic-instance';
+import DynamicInstancePage from '../../../../../../../pages/domain/[domain]/service/[service]/instance/dynamic';
 
 const testInstancedetails = {
     workLoadData: [

ui/src/__tests__/pages/static-instance.test.js → ui/src/__tests__/pages/domain/[domain]/service/[service]/instance/static.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import StaticInstancePage from '../../pages/static-instance';
+import StaticInstancePage from '../../../../../../../pages/domain/[domain]/service/[service]/instance/static';
 
 const testInstancedetails = {
     workLoadData: [

ui/src/__tests__/pages/tags.test.js → ui/src/__tests__/pages/domain/[domain]/tags.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import TagsPage from '../../pages/tags';
+import TagsPage from '../../../../pages/domain/[domain]/tags';
 
 describe('Tag Page', () => {
     it('should render', () => {

ui/src/__tests__/pages/template.test.js → ui/src/__tests__/pages/domain/[domain]/template.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import TemplatePage from '../../pages/template';
+import TemplatePage from '../../../../pages/domain/[domain]/template';
 
 describe('Template Page', () => {
     it('should render', () => {

ui/src/__tests__/pages/create-domain.test.js → ui/src/__tests__/pages/domain/create.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import CreateDomainPage from '../../pages/create-domain';
+import CreateDomainPage from '../../../pages/domain/create';
 
 describe('CreateDomainPage', () => {
     it('should render', () => {

ui/src/__tests__/pages/manage-domains.test.js → ui/src/__tests__/pages/domain/manage.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import ManageDomainsPage from '../../pages/manage-domains';
+import ManageDomainsPage from '../../../pages/domain/manage';
 
 describe('PageManageDomains', () => {
     it('should render', () => {

ui/src/__tests__/pages/home.test.js → ui/src/__tests__/pages/index.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import Home from '../../pages/home';
+import Home from '../../pages';
 
 describe('Home', () => {
     it('should render', () => {

ui/src/__tests__/pages/search.test.js → ui/src/__tests__/pages/search/[type]/[searchterm]/search.test.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import Search from '../../pages/search';
+import Search from '../../../../../pages/search/[type]/[searchterm]';
 
 describe('Search', () => {
     it('should render', () => {

ui/src/components/group/GroupRow.js

@@ -96,7 +96,7 @@ class GroupRow extends React.Component {
     }
 
     onClickFunction(route) {
-        this.props.router.push(route, route, { getInitialProps: true });
+        this.props.router.push(route, route);
     }
 
     onSubmitDelete(domain) {

ui/src/components/header/GroupTabs.js

@@ -55,43 +55,37 @@ class GroupTabs extends React.Component {
             case 'members':
                 this.props.router.push(
                     `/domain/${domain}/group/${group}/members`,
-                    `/domain/${domain}/group/${group}/members`,
-                    { getInitialProps: true }
+                    `/domain/${domain}/group/${group}/members`
                 );
                 break;
             case 'review':
                 this.props.router.push(
                     `/domain/${domain}/group/${group}/review`,
-                    `/domain/${domain}/group/${group}/review`,
-                    { getInitialProps: true }
+                    `/domain/${domain}/group/${group}/review`
                 );
                 break;
             case 'roles':
                 this.props.router.push(
                     `/domain/${domain}/group/${group}/roles`,
-                    `/domain/${domain}/group/${group}/roles`,
-                    { getInitialProps: true }
+                    `/domain/${domain}/group/${group}/roles`
                 );
                 break;
             case 'settings':
                 this.props.router.push(
                     `/domain/${domain}/group/${group}/settings`,
-                    `/domain/${domain}/group/${group}/settings`,
-                    { getInitialProps: true }
+                    `/domain/${domain}/group/${group}/settings`
                 );
                 break;
             case 'history':
                 this.props.router.push(
                     `/domain/${domain}/group/${group}/history`,
-                    `/domain/${domain}/group/${group}/history`,
-                    { getInitialProps: true }
+                    `/domain/${domain}/group/${group}/history`
                 );
                 break;
             case 'tags':
                 this.props.router.push(
                     `/domain/${domain}/group/${group}/tags`,
-                    `/domain/${domain}/group/${group}/tags`,
-                    { getInitialProps: true }
+                    `/domain/${domain}/group/${group}/tags`
                 );
                 break;
         }

ui/src/components/header/HeaderMenu.js

@@ -109,11 +109,7 @@ const HeaderMenu = (props) => {
             <Icon
                 icon={icon}
                 isLink
-                onClick={() =>
-                    router.push('/workflow', '/workflow', {
-                        getInitialProps: true,
-                    })
-                }
+                onClick={() => router.push('/workflow', '/workflow')}
                 size={'25px'}
                 color={colors.white}
             />