Migrate APPM Store UI from antd v3 to v4

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",

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 (
       <Menu>
         <Menu.Item key="1" onClick={this.handleSubmit}>
-          <Icon type="logout" />
+          <LogoutOutlined />
           Logout
         </Menu.Item>
       </Menu>

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;
+      let icon;
-      const defaultPlatformIcons = config.defaultPlatformIcons;
+      switch (deviceType.name) {
-      let icon = defaultPlatformIcons.default.icon;
+        case 'android':
-      let theme = defaultPlatformIcons.default.theme;
+          icon = <AndroidFilled />;
-      if (defaultPlatformIcons.hasOwnProperty(platform)) {
+          break;
-        icon = defaultPlatformIcons[platform].icon;
+        case 'ios':
-        theme = defaultPlatformIcons[platform].theme;
+          icon = <AppleFilled />;
+          break;
+        case 'windows':
+          icon = <WindowsFilled />;
+          break;
+        default:
+          icon = <HddFilled />;
       }
       return (
-        <Menu.Item key={platform}>
+        <Menu.Item key={deviceType.name}>
-          <Link to={'/store/' + platform}>
+          <Link to={'/store/' + deviceType.name}>
-            <Icon type={icon} theme={theme} />
+            {icon}
-            {platform}
+            {deviceType.name}
           </Link>
         </Menu.Item>
       );
@@ -161,7 +175,7 @@ class Dashboard extends React.Component {
 
                 <Menu.Item key="web-clip">
                   <Link to="/store/web-clip">
-                    <Icon type="upload" />
+                    <UploadOutlined />
                     Web Clips
                   </Link>
                 </Menu.Item>
@@ -170,7 +184,7 @@ class Dashboard extends React.Component {
                   className="profile"
                   title={
                     <span className="submenu-title-wrapper">
-                      <Icon type="user" />
+                      <UserOutlined />
                       {this.config.user.username}
                     </span>
                   }
@@ -185,10 +199,11 @@ class Dashboard extends React.Component {
         <Layout className="mobile-layout">
           <div className="mobile-menu-button">
             <Button type="link" onClick={this.showMobileNavigationBar}>
-              <Icon
+              {this.state.collapsed ? (
-                type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'}
+                <MenuFoldOutlined />
-                className="bar-icon"
+              ) : (
-              />
+                <MenuUnfoldOutlined />
+              )}
             </Button>
           </div>
         </Layout>
@@ -221,7 +236,7 @@ class Dashboard extends React.Component {
 
             <Menu.Item key="web-clip">
               <Link to="/store/web-clip">
-                <Icon type="upload" />
+                <UploadOutlined />
                 Web Clips
               </Link>
             </Menu.Item>
@@ -236,7 +251,7 @@ class Dashboard extends React.Component {
             <SubMenu
               title={
                 <span className="submenu-title-wrapper">
-                  <Icon type="user" />
+                  <UserOutlined />
                 </span>
               }
             >

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 {
         >
           <Row gutter={16}>
             {apps.length === 0 && (
+              <Col span={24}>
                 <Result
                   status="404"
                   title="No apps, yet."
                   subTitle="No apps available, yet! When the administration uploads, apps will show up here."
                 />
+              </Col>
             )}
             {apps.map(app => (
               <Col key={app.id} xs={12} sm={6} md={6} lg={4} xl={3}>

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 (
       <div>
         <Button type="primary" onClick={this.showDrawer}>
-          <Icon type="star" /> Add a review
+          <StarOutlined /> Add a review
         </Button>
 
         <Drawer

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/Rating/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Row, Typography, Icon } from 'antd';
+import { TeamOutlined } from '@ant-design/icons';
+import { Row, Typography } from 'antd';
 import StarRatings from 'react-star-ratings';
 import './styles.css';
 import { withConfigContext } from '../../../../../../../../../../../../../../components/context/ConfigContext';
@@ -67,7 +68,7 @@ class Rating extends React.Component {
           />
           <br />
           <Text type="secondary" className="people-count">
-            <Icon type="team" /> {totalCount} total
+            <TeamOutlined /> {totalCount} total
           </Text>
         </div>
         <div className="bar-containers">

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 (
-      <div>
+      <div style={{ width: '100%' }}>
         <List.Item.Meta
           avatar={
             <Avatar

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/SubscriptionDetails/index.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import axios from 'axios';
+import { SyncOutlined } from '@ant-design/icons';
 import { Tag, Table, Typography, Button, Alert } from 'antd';
 import TimeAgo from 'javascript-time-ago';
 
@@ -235,7 +236,7 @@ class SubscriptionDetails extends React.Component {
               </Text>
             </div>
             <div style={{ textAlign: 'right', paddingBottom: 6 }}>
-              <Button icon="sync" onClick={this.fetch}>
+              <Button icon={<SyncOutlined />} onClick={this.fetch}>
                 Refresh
               </Button>
             </div>

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={
                     <Dropdown overlay={menu}>
                       <Button type="primary">
-                        Subscribe <Icon type="down" />
+                        Subscribe <DownOutlined />
                       </Button>
                     </Dropdown>
                   }
                   no={
                     <Button type="primary" disabled={true}>
-                      Subscribe <Icon type="down" />
+                      Subscribe <DownOutlined />
                     </Button>
                   }
                 />

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 {
             <Breadcrumb style={{ paddingBottom: 16 }}>
               <Breadcrumb.Item>
                 <Link to={'/store/' + deviceType}>
-                  <Icon type="home" /> {deviceType + ' apps'}{' '}
+                  <HomeOutlined /> {deviceType + ' apps'}{' '}
                 </Link>
               </Breadcrumb.Item>
               <Breadcrumb.Item>{appName}</Breadcrumb.Item>

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,40 +36,6 @@ const { Title } = Typography;
 const { Text } = Typography;
 
 class Login extends React.Component {
-  render() {
-    const config = this.props.context;
-    return (
-      <div className="login">
-        <div className="background"></div>
-        <div className="content">
-          <Row>
-            <Col xs={3} sm={3} md={10}></Col>
-            <Col xs={18} sm={18} md={4}>
-              <Row style={{ marginBottom: 20 }}>
-                <Col style={{ textAlign: 'center' }}>
-                  <img
-                    style={{
-                      marginTop: 36,
-                      height: 60,
-                    }}
-                    src={config.theme.logo}
-                  />
-                </Col>
-              </Row>
-              <Title level={2}>Login</Title>
-              <WrappedNormalLoginForm />
-            </Col>
-          </Row>
-          <Row>
-            <Col span={4} offset={10}></Col>
-          </Row>
-        </div>
-      </div>
-    );
-  }
-}
-
-class NormalLoginForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -78,18 +44,10 @@ class NormalLoginForm extends React.Component {
     };
   }
 
-  handleSubmit = e => {
+  handleSubmit = values => {
-    const thisForm = this;
+    this.setState({
-    const config = this.props.context;
-
-    e.preventDefault();
-    this.props.form.validateFields((err, values) => {
-      thisForm.setState({
-        inValid: false,
-      });
-      if (!err) {
-        thisForm.setState({
       loading: true,
+      inValid: false,
     });
     const parameters = {
       username: values.username,
@@ -102,7 +60,7 @@ class NormalLoginForm extends React.Component {
       .join('&');
 
     axios
-          .post(window.location.origin + config.serverConfig.loginUri, request)
+      .post(window.location.origin + '/store-ui-request-handler/login', request)
       .then(res => {
         if (res.status === 200) {
           let redirectUrl = window.location.origin + '/store';
@@ -111,14 +69,13 @@ class NormalLoginForm extends React.Component {
             redirectUrl = searchParams.get('redirect');
           }
           window.location = redirectUrl;
+        } else {
+          throw new Error();
         }
       })
-          .catch(function(error) {
+      .catch(error => {
-            if (
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
-              error.hasOwnProperty('response') &&
+          this.setState({
-              error.response.status === 401
-            ) {
-              thisForm.setState({
             loading: false,
             inValid: true,
           });
@@ -128,81 +85,101 @@ class NormalLoginForm extends React.Component {
             duration: 10,
             description: '',
           });
-              thisForm.setState({
+          this.setState({
             loading: false,
             inValid: false,
           });
         }
       });
-      }
-    });
   };
-
   render() {
-    const { getFieldDecorator } = this.props.form;
+    const config = this.props.context;
-    let errorMsg = '';
-    if (this.state.inValid) {
-      errorMsg = <Text type="danger">Invalid Login Details</Text>;
-    }
-    let loading = '';
-    if (this.state.loading) {
-      loading = <Text type="secondary">Loading..</Text>;
-    }
     return (
-      <Form onSubmit={this.handleSubmit} className="login-form">
+      <div className="login">
-        <Form.Item>
+        <div className="background"></div>
-          {getFieldDecorator('username', {
+        <div className="content">
-            rules: [{ required: true, message: 'Please input your username!' }],
+          <Row>
-          })(
+            <Col xs={3} sm={3} md={10}></Col>
+            <Col xs={18} sm={18} md={4}>
+              <Row style={{ marginBottom: 20 }}>
+                <Col
+                  style={{
+                    display: 'block',
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                  }}
+                >
+                  <img
+                    style={{
+                      marginTop: 36,
+                      height: 60,
+                    }}
+                    src={config.theme.logo}
+                  />
+                </Col>
+              </Row>
+              <Title level={2}>Login</Title>
+              <Form
+                initialValues={{ remember: true }}
+                onFinish={this.handleSubmit}
+              >
+                <Form.Item
+                  name="username"
+                  rules={[
+                    { required: true, message: 'Please input your username!' },
+                  ]}
+                >
                   <Input
                     name="username"
                     style={{ height: 32 }}
-              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                    prefix={
+                      <UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />
+                    }
                     placeholder="Username"
-            />,
+                  />
-          )}
                 </Form.Item>
-        <Form.Item>
+                <Form.Item
-          {getFieldDecorator('password', {
-            rules: [{ required: true, message: 'Please input your Password!' }],
-          })(
-            <Input
                   name="password"
-              style={{ height: 32 }}
+                  rules={[
-              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                    { required: true, message: 'Please input your password!' },
-              type="password"
+                  ]}
+                >
+                  <Input.Password
+                    prefix={
+                      <LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />
+                    }
                     placeholder="Password"
-            />,
+                  />
+                </Form.Item>
+                {this.state.loading && <Text type="secondary">Loading..</Text>}
+                {this.state.inValid && (
+                  <Text type="danger">Invalid Login Details</Text>
                 )}
+                <br />
+                <a href="">Forgot password</a>
+                <Form.Item name="remember" valuePropName="checked">
+                  <Checkbox>Remember me</Checkbox>
                 </Form.Item>
-        {loading}
-        {errorMsg}
                 <Form.Item>
-          {getFieldDecorator('remember', {
-            valuePropName: 'checked',
-            initialValue: true,
-          })(<Checkbox>Remember me</Checkbox>)}
-          <br />
-          <a className="login-form-forgot" href="">
-            Forgot password
-          </a>
                   <Button
-            loading={this.state.loading}
-            block
                     type="primary"
                     htmlType="submit"
-            className="login-form-button"
+                    block
+                    loading={this.state.loading}
                   >
                     Log in
                   </Button>
                 </Form.Item>
               </Form>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={4} offset={10}></Col>
+          </Row>
+        </div>
+      </div>
     );
   }
 }
 
-const WrappedNormalLoginForm = withConfigContext(
-  Form.create({ name: 'normal_login' })(NormalLoginForm),
-);
-
 export default withConfigContext(Login);