Migrate APPM Publisher UI from antd v3 to v4

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json

@@ -10,11 +10,12 @@
   },
   "license": "Apache License 2.0",
   "dependencies": {
+    "@ant-design/compatible": "^1.0.0",
     "@ant-design/dark-theme": "^0.2.2",
     "@ant-design/icons": "^4.0.6",
     "@babel/polyfill": "^7.6.0",
     "acorn": "^6.2.0",
-    "antd": "^3.23.6",
+    "antd": "^4.0.0",
     "axios": "^0.19.0",
     "babel-eslint": "^9.0.0",
     "d3": "^5.9.7",

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/components/Logout/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { notification, Menu, Icon } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
+import { notification, Menu } from 'antd';
 import axios from 'axios';
 import { withConfigContext } from '../../../../components/ConfigContext';
 
@@ -70,7 +71,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.publisher.ui/react-app/src/scenes/Home/index.js

@@ -17,7 +17,18 @@
  */
 
 import React from 'react';
-import { Layout, Menu, Icon, Drawer, Button } from 'antd';
+
+import {
+  AndroidFilled,
+  AppstoreOutlined,
+  ControlOutlined,
+  PlusOutlined,
+  SettingOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { Layout, Menu, Drawer, Button } from 'antd';
 import { Switch, Link } from 'react-router-dom';
 import RouteWithSubRoutes from '../../components/RouteWithSubRoutes';
 import { Redirect } from 'react-router';
@@ -81,7 +92,7 @@ class Dashboard extends React.Component {
               >
                 <Menu.Item key="1">
                   <Link to="/publisher/apps">
-                    <Icon type="appstore" />
+                    <AppstoreOutlined />
                     Apps
                   </Link>
                 </Menu.Item>
@@ -92,7 +103,7 @@ class Dashboard extends React.Component {
                   <SubMenu
                     title={
                       <span className="submenu-title-wrapper">
-                        <Icon type="plus" />
+                        <PlusOutlined />
                         Add New App
                       </span>
                     }
@@ -118,21 +129,20 @@ class Dashboard extends React.Component {
                 <SubMenu
                   title={
                     <span className="submenu-title-wrapper">
-                      <Icon type="control" />
+                      <ControlOutlined />
                       Manage
                     </span>
                   }
                 >
                   <Menu.Item key="manage">
                     <Link to="/publisher/manage">
-                      <Icon type="setting" /> General
+                      <SettingOutlined /> General
                     </Link>
                   </Menu.Item>
                   {this.config.androidEnterpriseToken != null && (
                     <Menu.Item key="manage-android-enterprise">
                       <Link to="/publisher/manage/android-enterprise">
-                        <Icon type="android" theme="filled" /> Android
+                        <AndroidFilled /> Android Enterprise
-                        Enterprise
                       </Link>
                     </Menu.Item>
                   )}
@@ -142,7 +152,7 @@ class Dashboard extends React.Component {
                   className="profile"
                   title={
                     <span className="submenu-title-wrapper">
-                      <Icon type="user" />
+                      <UserOutlined />
                       {this.config.username}
                     </span>
                   }
@@ -157,7 +167,7 @@ class Dashboard extends React.Component {
         <Layout className="mobile-layout">
           <div className="mobile-menu-button">
             <Button type="link" onClick={this.showMobileNavigationBar}>
-              <Icon
+              <LegacyIcon
                 type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'}
                 className="bar-icon"
               />
@@ -194,14 +204,14 @@ class Dashboard extends React.Component {
           >
             <Menu.Item key="1">
               <Link to="/publisher/apps">
-                <Icon type="appstore" />
+                <AppstoreOutlined />
                 Apps
               </Link>
             </Menu.Item>
             <SubMenu
               title={
                 <span className="submenu-title-wrapper">
-                  <Icon type="plus" />
+                  <PlusOutlined />
                   Add New App
                 </span>
               }
@@ -223,7 +233,7 @@ class Dashboard extends React.Component {
             </SubMenu>
             <Menu.Item key="2">
               <Link to="/publisher/manage">
-                <Icon type="control" />
+                <ControlOutlined />
                 Manage
               </Link>
             </Menu.Item>
@@ -238,7 +248,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.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppDetailsForm/index.js

@@ -17,7 +17,9 @@
  */
 
 import React from 'react';
-import { Alert, Button, Col, Form, Input, Row, Select, Spin } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Alert, Button, Col, Input, Row, Select, Spin } from 'antd';
 import axios from 'axios';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
 import { handleApiError } from '../../../../../../../../services/utils/errorHandler';

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppUploadForm/index.js

@@ -17,11 +17,12 @@
  */
 
 import React from 'react';
+import { MinusOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
 import {
   Button,
   Col,
-  Form,
-  Icon,
   Input,
   Row,
   Select,
@@ -280,7 +281,7 @@ class NewAppUploadForm extends React.Component {
     } = this.state;
     const uploadButton = (
       <div>
-        <Icon type="plus" />
+        <PlusOutlined />
         <div className="ant-upload-text">Select</div>
       </div>
     );
@@ -315,7 +316,7 @@ class NewAppUploadForm extends React.Component {
                     >
                       {binaryFiles.length !== 1 && (
                         <Button>
-                          <Icon type="upload" /> Click to upload
+                          <UploadOutlined /> Click to upload
                         </Button>
                       )}
                     </Upload>,
@@ -577,7 +578,7 @@ class NewAppUploadForm extends React.Component {
                               <Button
                                 type="dashed"
                                 shape="circle"
-                                icon="minus"
+                                icon={<MinusOutlined />}
                                 onClick={() => {
                                   metaData.splice(index, 1);
                                   this.setState({
@@ -592,7 +593,7 @@ class NewAppUploadForm extends React.Component {
                     })}
                     <Button
                       type="dashed"
-                      icon="plus"
+                      icon={<PlusOutlined />}
                       onClick={this.addNewMetaData}
                     >
                       Add

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/index.js

@@ -17,7 +17,9 @@
  */
 
 import React from 'react';
-import { Card, Button, Steps, Row, Col, Form, Result, Spin } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Card, Button, Steps, Row, Col, Result, Spin } from 'antd';
 import axios from 'axios';
 import { withRouter } from 'react-router-dom';
 import NewAppDetailsForm from './components/NewAppDetailsForm';

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Custom/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { PageHeader, Typography, Breadcrumb, Icon, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
 import AddNewAppForm from '../../components/AddNewAppForm';
 import { Link } from 'react-router-dom';
 import Authorized from '../../../../../../components/Authorized/Authorized';
@@ -58,7 +59,7 @@ class AddNewCustomApp extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Custom App</Breadcrumb.Item>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Enterprise/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { PageHeader, Typography, Breadcrumb, Icon, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
 import AddNewAppForm from '../../components/AddNewAppForm';
 import { Link } from 'react-router-dom';
 import Authorized from '../../../../../../components/Authorized/Authorized';
@@ -52,7 +53,7 @@ class AddNewEnterpriseApp extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Enterprise App</Breadcrumb.Item>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Public/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Icon, PageHeader, Typography, Breadcrumb, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
 import AddNewAppForm from '../../components/AddNewAppForm';
 import { Link } from 'react-router-dom';
 import Authorized from '../../../../../../components/Authorized/Authorized';
@@ -59,7 +60,7 @@ class AddNewPublicApp extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Public App</Breadcrumb.Item>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/WebClip/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Icon, PageHeader, Typography, Breadcrumb, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
 import AddNewAppForm from '../../components/AddNewAppForm';
 import { Link } from 'react-router-dom';
 import Authorized from '../../../../../../components/Authorized/Authorized';
@@ -55,7 +56,7 @@ class AddNewEnterpriseApp extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Web Clip</Breadcrumb.Item>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/components/AddNewReleaseForm/index.js

@@ -17,7 +17,9 @@
  */
 
 import React from 'react';
-import { Form, notification, Spin, Card, Row, Col } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { notification, Spin, Card, Row, Col } from 'antd';
 import axios from 'axios';
 import { withRouter } from 'react-router-dom';
 import { withConfigContext } from '../../../../../../components/ConfigContext';

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Icon, PageHeader, Typography, Breadcrumb } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb } from 'antd';
 import AddNewReleaseForm from './components/AddNewReleaseForm';
 import { Link } from 'react-router-dom';
 
@@ -40,7 +41,7 @@ class AddNewRelease extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Release</Breadcrumb.Item>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/AppDetailsDrawer/index.js

@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
 import {
   Drawer,
   Select,
@@ -29,7 +30,6 @@ import {
   Button,
   Spin,
   message,
-  Icon,
   Card,
   Badge,
   Tooltip,
@@ -48,7 +48,11 @@ import ManagedConfigurationsIframe from './components/ManagedConfigurationsIfram
 import { handleApiError } from '../../../../../../../../../services/utils/errorHandler';
 import Authorized from '../../../../../../../../../components/Authorized/Authorized';
 import { isAuthorized } from '../../../../../../../../../services/utils/authorizationHandler';
-import { MoreOutlined } from '@ant-design/icons';
+import {
+  CheckCircleOutlined,
+  EditOutlined,
+  MoreOutlined,
+} from '@ant-design/icons';
 import DeleteApp from './components/DeleteApp';
 import RetireApp from './components/RetireApp';
 
@@ -58,7 +62,7 @@ const { Option } = Select;
 
 const IconText = ({ type, text }) => (
   <span>
-    <Icon type={type} style={{ marginRight: 8 }} />
+    <LegacyIcon type={type} style={{ marginRight: 8 }} />
     {text}
   </span>
 );
@@ -603,13 +607,12 @@ class AppDetailsDrawer extends React.Component {
                                       title="Published"
                                       count={
                                         <Tooltip title="Published">
-                                          <Icon
+                                          <CheckCircleOutlined
                                             style={{
                                               backgroundColor: '#52c41a',
                                               borderRadius: '50%',
                                               color: 'white',
                                             }}
-                                            type="check-circle"
                                           />
                                         </Tooltip>
                                       }
@@ -698,7 +701,7 @@ class AppDetailsDrawer extends React.Component {
                     }}
                     onClick={this.enableDescriptionEdit}
                   >
-                    <Icon type="edit" />
+                    <EditOutlined />
                   </Text>
                 )
               }
@@ -754,7 +757,7 @@ class AppDetailsDrawer extends React.Component {
                     }}
                     onClick={this.enableCategoriesEdit}
                   >
-                    <Icon type="edit" />
+                    <EditOutlined />
                   </Text>
                 )
               }
@@ -821,7 +824,7 @@ class AppDetailsDrawer extends React.Component {
                     }}
                     onClick={this.enableTagsEdit}
                   >
-                    <Icon type="edit" />
+                    <EditOutlined />
                   </Text>
                 )
               }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/index.js

@@ -17,7 +17,9 @@
  */
 
 import React from 'react';
-import { Avatar, Table, Tag, Icon, Badge, Alert, Tooltip } from 'antd';
+import { CheckCircleOutlined } from '@ant-design/icons';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { Avatar, Table, Tag, Badge, Alert, Tooltip } from 'antd';
 import axios from 'axios';
 import pSBC from 'shade-blend-color';
 import './styles.css';
@@ -69,13 +71,12 @@ const columns = [
             }}
             count={
               <Tooltip title="Published">
-                <Icon
+                <CheckCircleOutlined
                   style={{
                     backgroundColor: '#52c41a',
                     borderRadius: '50%',
                     color: 'white',
                   }}
-                  type="check-circle"
                 />
               </Tooltip>
             }
@@ -147,7 +148,7 @@ const columns = [
       }
       return (
         <span style={{ fontSize: 20, color: color, textAlign: 'center' }}>
-          <Icon type={icon} theme={theme} />
+          <LegacyIcon type={icon} theme={theme} />
         </span>
       );
     },

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/Filters/index.js

@@ -17,16 +17,9 @@
  */
 
 import React from 'react';
-import {
+import { Form } from '@ant-design/compatible';
-  Card,
+import '@ant-design/compatible/assets/index.css';
-  Col,
+import { Card, Col, Row, Typography, Divider, Select, Button } from 'antd';
-  Row,
-  Typography,
-  Divider,
-  Select,
-  Button,
-  Form,
-} from 'antd';
 import axios from 'axios';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
 import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
@@ -196,7 +189,8 @@ class FiltersForm extends React.Component {
             permission="/permission/admin/app-mgt/publisher/application/update"
             yes={
               <div>
-                <Form.Item label="Categories">
+                <p>Categories:</p>
+                <Form.Item>
                   {getFieldDecorator('categories', {
                     rules: [
                       {
@@ -221,7 +215,8 @@ class FiltersForm extends React.Component {
                     </Select>,
                   )}
                 </Form.Item>
-                <Form.Item label="Tags">
+                <p>Tags:</p>
+                <Form.Item>
                   {getFieldDecorator('tags', {
                     rules: [
                       {
@@ -244,10 +239,11 @@ class FiltersForm extends React.Component {
               </div>
             }
           />
+          <p>Device Type:</p>
           <Authorized
             permission="/permission/admin/device-mgt/admin/device-type/view"
             yes={
-              <Form.Item label="Device Type">
+              <Form.Item>
                 {getFieldDecorator('deviceType', {
                   rules: [
                     {
@@ -271,7 +267,8 @@ class FiltersForm extends React.Component {
               </Form.Item>
             }
           />
-          <Form.Item label="App Type">
+          <p>App Type:</p>
+          <Form.Item>
             {getFieldDecorator('appType', {})(
               <Select style={{ width: '100%' }} placeholder="Select app type">
                 <Option value="ENTERPRISE">Enterprise</Option>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/DetailedRating/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 axios from 'axios';
@@ -118,7 +119,7 @@ class DetailedRating 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.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/lifeCycleDetailsModal/index.js

@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Modal, Button, Tag, List, Typography } from 'antd';
 import pSBC from 'shade-blend-color';
 import { withConfigContext } from '../../../../../../../../../../components/ConfigContext';
@@ -47,7 +48,11 @@ class LifeCycleDetailsModal extends React.Component {
     const { lifecycle } = this.props;
     return (
       <div>
-        <Button size="small" icon="question-circle" onClick={this.showModal}>
+        <Button
+          size="small"
+          icon={<QuestionCircleOutlined />}
+          onClick={this.showModal}
+        >
           Learn more
         </Button>
         <Modal

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js

@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
 import {
   Typography,
   Tag,
@@ -25,7 +26,6 @@ import {
   Modal,
   notification,
   Steps,
-  Icon,
   Alert,
   Tabs,
 } from 'antd';
@@ -239,7 +239,7 @@ class LifeCycle extends React.Component {
                 {lifecycleSteps.map((step, index) => (
                   <Step
                     key={index}
-                    icon={<Icon type={step.icon} />}
+                    icon={<LegacyIcon type={step.icon} />}
                     title={step.title}
                     disabled={current !== step.step}
                     description={

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/DeleteRelease/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Modal, Button, Icon, notification } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Modal, Button, notification } from 'antd';
 import axios from 'axios';
 import { handleApiError } from '../../../../../../../../../../services/utils/errorHandler';
 import { withConfigContext } from '../../../../../../../../../../components/ConfigContext';
@@ -77,7 +78,7 @@ class DeleteRelease extends React.Component {
           type="danger"
           onClick={this.showModal}
         >
-          <Icon type="delete" /> Delete
+          <DeleteOutlined /> Delete
         </Button>
       </>
     );

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/EditRelease/index.js

@@ -17,16 +17,22 @@
  */
 
 import React from 'react';
+import {
+  EditOutlined,
+  MinusOutlined,
+  PlusOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
 import {
   Modal,
   Button,
-  Icon,
   notification,
   Spin,
   Tooltip,
   Upload,
   Input,
-  Form,
   Divider,
   Row,
   Col,
@@ -397,7 +403,7 @@ class EditReleaseModal extends React.Component {
     const config = this.props.context;
     const uploadButton = (
       <div>
-        <Icon type="plus" />
+        <PlusOutlined />
         <div className="ant-upload-text">Select</div>
       </div>
     );
@@ -417,7 +423,7 @@ class EditReleaseModal extends React.Component {
             type="primary"
             onClick={this.showModal}
           >
-            <Icon type="edit" /> Edit
+            <EditOutlined /> Edit
           </Button>
         </Tooltip>
         <Modal
@@ -450,7 +456,7 @@ class EditReleaseModal extends React.Component {
                       >
                         {binaryFiles.length !== 1 && (
                           <Button>
-                            <Icon type="upload" /> Change
+                            <UploadOutlined /> Change
                           </Button>
                         )}
                       </Upload>,
@@ -676,7 +682,7 @@ class EditReleaseModal extends React.Component {
                                 <Button
                                   type="dashed"
                                   shape="circle"
-                                  icon="minus"
+                                  icon={<MinusOutlined />}
                                   onClick={() => {
                                     metaData.splice(index, 1);
                                     this.setState({
@@ -691,7 +697,7 @@ class EditReleaseModal extends React.Component {
                       })}
                       <Button
                         type="dashed"
-                        icon="plus"
+                        icon={<PlusOutlined />}
                         onClick={this.addNewMetaData}
                       >
                         Add

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/index.js

@@ -17,16 +17,9 @@
  */
 
 import React from 'react';
-import {
+import { Icon as LegacyIcon } from '@ant-design/compatible';
-  Divider,
+import { ShopOutlined } from '@ant-design/icons';
-  Row,
+import { Divider, Row, Col, Typography, Button, Tooltip, Alert } from 'antd';
-  Col,
-  Typography,
-  Button,
-  Icon,
-  Tooltip,
-  Alert,
-} from 'antd';
 import StarRatings from 'react-star-ratings';
 import Reviews from './components/Reviews';
 import '../../../../../../../../App.css';
@@ -98,7 +91,7 @@ class ReleaseView extends React.Component {
               <br />
               <Text>Platform : </Text>
               <span style={{ fontSize: 20, color: color, textAlign: 'center' }}>
-                <Icon type={icon} theme={theme} />
+                <LegacyIcon type={icon} theme={theme} />
               </span>
               <Divider type="vertical" />
               <Text>Version : {release.version}</Text>
@@ -140,7 +133,7 @@ class ReleaseView extends React.Component {
                         style={{ float: 'right' }}
                         htmlType="button"
                         type="primary"
-                        icon="shop"
+                        icon={<ShopOutlined />}
                         disabled={!isAppInstallable}
                         onClick={() => {
                           window.open(

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Categories/index.js

@@ -17,11 +17,11 @@
  */
 
 import React from 'react';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   Card,
   Tag,
   message,
-  Icon,
   Input,
   notification,
   Divider,
@@ -157,11 +157,10 @@ class ManageCategories extends React.Component {
           <>
             <Divider type="vertical" />
             <Tooltip title="edit">
-              <Icon
+              <EditOutlined
                 onClick={() => {
                   this.openEditModal(categoryName);
                 }}
-                type="edit"
               />
             </Tooltip>
             <Divider type="vertical" />
@@ -182,7 +181,7 @@ class ManageCategories extends React.Component {
                 okText="Yes"
                 cancelText="No"
               >
-                <Icon type="delete" />
+                <DeleteOutlined />
               </Popconfirm>
             </Tooltip>
           </>
@@ -399,7 +398,7 @@ class ManageCategories extends React.Component {
                 {!isAddNewVisible && (
                   <div style={{ float: 'right' }}>
                     <Button
-                      icon="plus"
+                      icon={<PlusOutlined />}
                       // type="primary"
                       size="small"
                       onClick={() => {
@@ -456,7 +455,7 @@ class ManageCategories extends React.Component {
                         onClick={this.showInput}
                         style={{ background: '#fff', borderStyle: 'dashed' }}
                       >
-                        <Icon type="plus" /> New Category
+                        <PlusOutlined /> New Category
                       </Tag>
                     )}
                   </TweenOneGroup>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Tags/index.js

@@ -17,11 +17,11 @@
  */
 
 import React from 'react';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   Card,
   Tag,
   message,
-  Icon,
   Input,
   notification,
   Divider,
@@ -151,11 +151,10 @@ class ManageTags extends React.Component {
           <>
             <Divider type="vertical" />
             <Tooltip title="edit">
-              <Icon
+              <EditOutlined
                 onClick={() => {
                   this.openEditModal(tagName);
                 }}
-                type="edit"
               />
             </Tooltip>
             <Divider type="vertical" />
@@ -176,7 +175,7 @@ class ManageTags extends React.Component {
                 okText="Yes"
                 cancelText="No"
               >
-                <Icon type="delete" />
+                <DeleteOutlined />
               </Popconfirm>
             </Tooltip>
           </>
@@ -390,7 +389,7 @@ class ManageTags extends React.Component {
                 {!isAddNewVisible && (
                   <div style={{ float: 'right' }}>
                     <Button
-                      icon="plus"
+                      icon={<PlusOutlined />}
                       // type="primary"
                       size="small"
                       onClick={() => {
@@ -447,7 +446,7 @@ class ManageTags extends React.Component {
                         onClick={this.showInput}
                         style={{ background: '#fff', borderStyle: 'dashed' }}
                       >
-                        <Icon type="plus" /> New Tag
+                        <PlusOutlined /> New Tag
                       </Tag>
                     )}
                   </TweenOneGroup>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { PageHeader, Typography, Breadcrumb, Row, Col, Icon } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Row, Col } from 'antd';
 import ManageCategories from './components/Categories';
 import ManageTags from './components/Tags';
 import { Link } from 'react-router-dom';
@@ -40,7 +41,7 @@ class Manage extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Manage</Breadcrumb.Item>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/Pages/index.js

@@ -18,13 +18,13 @@
 
 import React from 'react';
 import axios from 'axios';
+import { DeleteOutlined, HomeOutlined } from '@ant-design/icons';
 import {
   Tag,
   notification,
   Table,
   Typography,
   Divider,
-  Icon,
   Popconfirm,
   Button,
 } from 'antd';
@@ -239,7 +239,7 @@ class Pages extends React.Component {
                 <Button
                   disabled={page.id === this.state.homePageId}
                   className="btn-warning"
-                  icon="home"
+                  icon={<HomeOutlined />}
                   type="link"
                   onClick={() => {
                     this.updateHomePage(page.id);
@@ -259,7 +259,7 @@ class Pages extends React.Component {
               >
                 <span className="action">
                   <Text type="danger">
-                    <Icon type="delete" /> delete
+                    <DeleteOutlined /> delete
                   </Text>
                 </span>
               </Popconfirm>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/SyncAndroidApps/index.js

@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+import { SyncOutlined } from '@ant-design/icons';
 import { Button, notification } from 'antd';
 import axios from 'axios';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
@@ -69,7 +70,7 @@ class SyncAndroidApps extends React.Component {
           loading={loading}
           style={{ marginTop: 16 }}
           type="primary"
-          icon="sync"
+          icon={<SyncOutlined />}
         >
           Sync{loading && 'ing...'}
         </Button>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { PageHeader, Breadcrumb, Divider, Icon, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Breadcrumb, Divider, Result } from 'antd';
 import { Link } from 'react-router-dom';
 import SyncAndroidApps from './components/SyncAndroidApps';
 import { withConfigContext } from '../../../../../../components/ConfigContext';
@@ -41,7 +42,7 @@ class ManageAndroidEnterprise extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Manage</Breadcrumb.Item>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/components/AddAppsToClusterModal/index.js

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Modal, Icon, Table, Avatar } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { Modal, Table, Avatar } from 'antd';
 import '../../styles.css';
 import { withConfigContext } from '../../../../../../../../../../../../components/ConfigContext';
 
@@ -84,7 +85,7 @@ class AddAppsToClusterModal extends React.Component {
         <div className="btn-add-new-wrapper">
           <div className="btn-add-new">
             <button className="btn" onClick={this.showModal}>
-              <Icon style={{ position: 'relative' }} type="plus" />
+              <PlusOutlined style={{ position: 'relative' }} />
             </button>
           </div>
           <div className="title">Add app</div>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/index.js

@@ -17,11 +17,18 @@
  */
 
 import React from 'react';
+import {
+  CaretDownOutlined,
+  CaretLeftFilled,
+  CaretRightFilled,
+  CaretUpOutlined,
+  CloseCircleFilled,
+  DeleteOutlined,
+} from '@ant-design/icons';
 import {
   Button,
   Col,
   Divider,
-  Icon,
   message,
   notification,
   Popconfirm,
@@ -304,7 +311,7 @@ class Cluster extends React.Component {
                   this.swapProduct(index, index - 1);
                 }}
               >
-                <Icon type="caret-left" theme="filled" />
+                <CaretLeftFilled />
               </button>
             )}
           </div>
@@ -324,7 +331,7 @@ class Cluster extends React.Component {
                   }}
                   className="btn btn-right"
                 >
-                  <Icon type="caret-right" theme="filled" />
+                  <CaretRightFilled />
                 </button>
               </div>
               <div className="delete-btn">
@@ -334,7 +341,7 @@ class Cluster extends React.Component {
                     this.removeProduct(index);
                   }}
                 >
-                  <Icon type="close-circle" theme="filled" />
+                  <CloseCircleFilled />
                 </button>
               </div>
             </>
@@ -363,7 +370,7 @@ class Cluster extends React.Component {
                   <Tooltip title="Move Up">
                     <Button
                       type="link"
-                      icon="caret-up"
+                      icon={<CaretUpOutlined />}
                       size="large"
                       onClick={() => {
                         this.props.swapClusters(index, index - 1);
@@ -374,7 +381,7 @@ class Cluster extends React.Component {
                   <Tooltip title="Move Down">
                     <Button
                       type="link"
-                      icon="caret-down"
+                      icon={<CaretDownOutlined />}
                       size="large"
                       onClick={() => {
                         this.props.swapClusters(index, index + 1);
@@ -391,7 +398,7 @@ class Cluster extends React.Component {
                     >
                       <Button
                         type="danger"
-                        icon="delete"
+                        icon={<DeleteOutlined />}
                         shape="circle"
                         htmlType="button"
                       />

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/index.js

@@ -17,12 +17,12 @@
  */
 
 import React from 'react';
+import { HomeOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   PageHeader,
   Typography,
   Breadcrumb,
   Button,
-  Icon,
   Col,
   Row,
   notification,
@@ -326,7 +326,7 @@ class Page extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Manage</Breadcrumb.Item>
@@ -406,7 +406,7 @@ class Page extends React.Component {
                       <Button
                         type="dashed"
                         shape="round"
-                        icon="plus"
+                        icon={<PlusOutlined />}
                         size="large"
                         onClick={() => {
                           this.toggleAddNewClusterVisibility(true);

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Login/index.js

@@ -17,12 +17,13 @@
  */
 
 import React from 'react';
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
 import {
   Typography,
   Row,
   Col,
-  Form,
-  Icon,
   Input,
   Button,
   message,
@@ -156,7 +157,7 @@ class NormalLoginForm extends React.Component {
           })(
             <Input
               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"
             />,
           )}
@@ -167,7 +168,7 @@ class NormalLoginForm extends React.Component {
           })(
             <Input
               style={{ height: 32 }}
-              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
               type="password"
               placeholder="Password"
             />,