From 080aeb39e0f783eb144ad237600a7dee895ea651 Mon Sep 17 00:00:00 2001 From: anjula-sack Date: Thu, 25 Jun 2020 11:58:12 +0530 Subject: [PATCH] Migrate APPM Store UI from antd v3 to v4 --- .../react-app/package.json | 2 +- .../scenes/Home/components/Logout/index.js | 5 +- .../react-app/src/scenes/Home/index.js | 59 ++-- .../scenes/Apps/components/AppList/index.js | 12 +- .../components/AddReview/index.js | 4 +- .../ReviewContainer/componets/Rating/index.js | 5 +- .../Reviews/components/Review/index.js | 2 +- .../components/SubscriptionDetails/index.js | 3 +- .../components/ReleaseView/index.js | 6 +- .../Release/components/ReleasePage/index.js | 5 +- .../react-app/src/scenes/Login/index.js | 257 ++++++++---------- 11 files changed, 179 insertions(+), 181 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json index 56aa61b49bb..91b0a4158b4 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json @@ -11,7 +11,7 @@ "license": "Apache License 2.0", "dependencies": { "acorn": "^6.2.0", - "antd": "^3.23.6", + "antd": "^4.0.0", "axios": "^0.18.1", "babel-eslint": "^9.0.0", "d3": "^5.9.7", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/components/Logout/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/components/Logout/index.js index a11d1d029ad..d2c5e106eba 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/components/Logout/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/components/Logout/index.js @@ -17,7 +17,8 @@ */ import React from 'react'; -import { Menu, Icon } from 'antd'; +import { LogoutOutlined } from '@ant-design/icons'; +import { Menu } from 'antd'; import axios from 'axios'; import { withConfigContext } from '../../../../components/context/ConfigContext'; import { handleApiError } from '../../../../services/utils/errorHandler'; @@ -64,7 +65,7 @@ class Logout extends React.Component { return ( - + Logout diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/index.js index b8582bbc3af..c5a8bf47fcd 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/index.js @@ -17,7 +17,17 @@ */ import React from 'react'; -import { Layout, Menu, Icon, Drawer, Button, Alert } from 'antd'; +import { + UploadOutlined, + UserOutlined, + AndroidFilled, + AppleFilled, + WindowsFilled, + HddFilled, + MenuFoldOutlined, + MenuUnfoldOutlined, +} from '@ant-design/icons'; +import { Layout, Menu, Drawer, Button, Alert } from 'antd'; const { Header, Content, Footer } = Layout; import { Link } from 'react-router-dom'; @@ -112,23 +122,27 @@ class Dashboard extends React.Component { }; render() { - const config = this.props.context; const { selectedKeys, deviceTypes, forbiddenErrors } = this.state; - const DeviceTypesData = deviceTypes.map(deviceType => { - const platform = deviceType.name; - const defaultPlatformIcons = config.defaultPlatformIcons; - let icon = defaultPlatformIcons.default.icon; - let theme = defaultPlatformIcons.default.theme; - if (defaultPlatformIcons.hasOwnProperty(platform)) { - icon = defaultPlatformIcons[platform].icon; - theme = defaultPlatformIcons[platform].theme; + let icon; + switch (deviceType.name) { + case 'android': + icon = ; + break; + case 'ios': + icon = ; + break; + case 'windows': + icon = ; + break; + default: + icon = ; } return ( - - - - {platform} + + + {icon} + {deviceType.name} ); @@ -161,7 +175,7 @@ class Dashboard extends React.Component { - + Web Clips @@ -170,7 +184,7 @@ class Dashboard extends React.Component { className="profile" title={ - + {this.config.user.username} } @@ -185,10 +199,11 @@ class Dashboard extends React.Component {
@@ -221,7 +236,7 @@ class Dashboard extends React.Component { - + Web Clips @@ -236,7 +251,7 @@ class Dashboard extends React.Component { - + } > diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/index.js index 15f9e0d216b..ab43ad7156a 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/index.js @@ -143,11 +143,13 @@ class AppList extends React.Component { > {apps.length === 0 && ( - + + + )} {apps.map(app => ( diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/CurrentUsersReview/components/AddReview/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/CurrentUsersReview/components/AddReview/index.js index 7a972a9f15c..af24e7dbf5e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/CurrentUsersReview/components/AddReview/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/CurrentUsersReview/components/AddReview/index.js @@ -17,10 +17,10 @@ */ import React from 'react'; +import { StarOutlined } from '@ant-design/icons'; import { Drawer, Button, - Icon, Row, Col, Typography, @@ -127,7 +127,7 @@ class AddReview extends React.Component { return (

- {totalCount} total + {totalCount} total
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/Reviews/components/Review/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/Reviews/components/Review/index.js index 3dac70cf558..2d3ec681d99 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/Reviews/components/Review/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/components/ReviewContainer/componets/Reviews/components/Review/index.js @@ -170,7 +170,7 @@ class Review extends React.Component { ); return ( -
+
-
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/index.js index fcdafd75512..fa6307d6b0b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/components/ReleaseView/index.js @@ -17,6 +17,7 @@ */ import React from 'react'; +import { DownOutlined } from '@ant-design/icons'; import { Divider, Row, @@ -26,7 +27,6 @@ import { Dropdown, notification, Menu, - Icon, Tabs, Tag, } from 'antd'; @@ -216,13 +216,13 @@ class ReleaseView extends React.Component { yes={ } no={ } /> diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/index.js index 7c8b1683865..787236598e2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleasePage/index.js @@ -18,7 +18,8 @@ import React from 'react'; import '../../../../../../../../App.css'; -import { Skeleton, Typography, Row, Col, Card, Breadcrumb, Icon } from 'antd'; +import { HomeOutlined } from '@ant-design/icons'; +import { Skeleton, Typography, Row, Col, Card, Breadcrumb } from 'antd'; import ReleaseView from './components/ReleaseView'; import axios from 'axios'; import { withConfigContext } from '../../../../../../../../components/context/ConfigContext'; @@ -110,7 +111,7 @@ class ReleasePage extends React.Component { - {deviceType + ' apps'}{' '} + {deviceType + ' apps'}{' '} {appName} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Login/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Login/index.js index b6e9b2ad497..3d0f11d4a88 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Login/index.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/scenes/Login/index.js @@ -17,14 +17,14 @@ */ import React from 'react'; +import { LockOutlined, UserOutlined } from '@ant-design/icons'; import { Typography, Row, Col, - Form, - Icon, Input, Button, + Form, Checkbox, notification, } from 'antd'; @@ -36,6 +36,62 @@ const { Title } = Typography; const { Text } = Typography; class Login extends React.Component { + constructor(props) { + super(props); + this.state = { + inValid: false, + loading: false, + }; + } + + handleSubmit = values => { + this.setState({ + loading: true, + inValid: false, + }); + const parameters = { + username: values.username, + password: values.password, + platform: 'store', + }; + + const request = Object.keys(parameters) + .map(key => key + '=' + parameters[key]) + .join('&'); + + axios + .post(window.location.origin + '/store-ui-request-handler/login', request) + .then(res => { + if (res.status === 200) { + let redirectUrl = window.location.origin + '/store'; + const searchParams = new URLSearchParams(window.location.search); + if (searchParams.has('redirect')) { + redirectUrl = searchParams.get('redirect'); + } + window.location = redirectUrl; + } else { + throw new Error(); + } + }) + .catch(error => { + if (error.hasOwnProperty('response') && error.response.status === 401) { + this.setState({ + loading: false, + inValid: true, + }); + } else { + notification.error({ + message: 'There was a problem', + duration: 10, + description: '', + }); + this.setState({ + loading: false, + inValid: false, + }); + } + }); + }; render() { const config = this.props.context; return ( @@ -46,7 +102,13 @@ class Login extends React.Component { - + Login - +
+ + + } + placeholder="Username" + /> + + + + } + placeholder="Password" + /> + + {this.state.loading && Loading..} + {this.state.inValid && ( + Invalid Login Details + )} +
+ Forgot password + + Remember me + + + + +
@@ -69,140 +182,4 @@ class Login extends React.Component { } } -class NormalLoginForm extends React.Component { - constructor(props) { - super(props); - this.state = { - inValid: false, - loading: false, - }; - } - - handleSubmit = e => { - const thisForm = this; - const config = this.props.context; - - e.preventDefault(); - this.props.form.validateFields((err, values) => { - thisForm.setState({ - inValid: false, - }); - if (!err) { - thisForm.setState({ - loading: true, - }); - const parameters = { - username: values.username, - password: values.password, - platform: 'store', - }; - - const request = Object.keys(parameters) - .map(key => key + '=' + parameters[key]) - .join('&'); - - axios - .post(window.location.origin + config.serverConfig.loginUri, request) - .then(res => { - if (res.status === 200) { - let redirectUrl = window.location.origin + '/store'; - const searchParams = new URLSearchParams(window.location.search); - if (searchParams.has('redirect')) { - redirectUrl = searchParams.get('redirect'); - } - window.location = redirectUrl; - } - }) - .catch(function(error) { - if ( - error.hasOwnProperty('response') && - error.response.status === 401 - ) { - thisForm.setState({ - loading: false, - inValid: true, - }); - } else { - notification.error({ - message: 'There was a problem', - duration: 10, - description: '', - }); - thisForm.setState({ - loading: false, - inValid: false, - }); - } - }); - } - }); - }; - - render() { - const { getFieldDecorator } = this.props.form; - let errorMsg = ''; - if (this.state.inValid) { - errorMsg = Invalid Login Details; - } - let loading = ''; - if (this.state.loading) { - loading = Loading..; - } - return ( -
- - {getFieldDecorator('username', { - rules: [{ required: true, message: 'Please input your username!' }], - })( - } - placeholder="Username" - />, - )} - - - {getFieldDecorator('password', { - rules: [{ required: true, message: 'Please input your Password!' }], - })( - } - type="password" - placeholder="Password" - />, - )} - - {loading} - {errorMsg} - - {getFieldDecorator('remember', { - valuePropName: 'checked', - initialValue: true, - })(Remember me)} -
- - Forgot password - - - -
- ); - } -} - -const WrappedNormalLoginForm = withConfigContext( - Form.create({ name: 'normal_login' })(NormalLoginForm), -); - export default withConfigContext(Login);