fix: delete icon hanged with bordered icon

Author: mjatin-dev

admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import MaterialTable from '@material-table/core';
+import MaterialTable from '@material-table/core'
+import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
 import { Paper } from '@material-ui/core'
 import { Badge } from 'reactstrap'
@@ -76,7 +77,6 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
     myActions.push((rowData) => ({
       icon: 'edit',
       iconProps: {
-        color: 'primary',
         id: 'editCustomScript' + rowData.inum,
       },
       tooltip: `${t('messages.edit_script')}`,
@@ -115,9 +115,8 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
   }
   if (hasPermission(permissions, SCRIPT_DELETE)) {
     myActions.push((rowData) => ({
-      icon: 'delete',
+      icon: () => <DeleteOutlined />,
       iconProps: {
-        color: 'secondary',
         id: 'deleteCustomScript' + rowData.inum,
       },
       tooltip: `${t('messages.delete_script')}`,

admin-ui/plugins/admin/components/Mapping/MappingItem.js

@@ -9,6 +9,7 @@ import {
   Form,
 } from '../../../../app/components'
 import { useDispatch, useSelector } from 'react-redux'
+import { DeleteOutlined } from '@material-ui/icons'
 import {
   updateMapping,
   addPermissionsToRole,
@@ -96,19 +97,13 @@ function MappingItem({ candidate }) {
               <Accordion.Indicator className="mr-2" />
               {candidate.role}
 
-              <Button
-                type="button"
-                color="danger"
+              <DeleteOutlined
                 onClick={() => handleDeleteRole()}
                 style={{
-                  margin: '1px',
                   float: 'right',
-                  padding: '0px',
+                  color: '#000',
                 }}
-              >
-                <i className="fa fa-trash mr-2"></i>
-                Delete
-              </Button>
+              />
               <Badge
                 color="info"
                 style={{

admin-ui/plugins/auth-server/components/Clients/ClientListPage.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import MaterialTable from '@material-table/core'
+import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { Paper } from '@material-ui/core'
@@ -130,7 +131,6 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
     myActions.push((rowData) => ({
       icon: 'edit',
       iconProps: {
-        color: 'primary',
         id: 'editClient' + rowData.inum,
       },
       tooltip: `${t('messages.edit_client')}`,
@@ -174,7 +174,6 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
     myActions.push((rowData) => ({
       icon: 'visibility',
       iconProps: {
-        color: 'primary',
         id: 'viewClient' + rowData.inum,
       },
       tooltip: `${t('messages.view_client_details')}`,
@@ -184,7 +183,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   }
   if (hasPermission(permissions, CLIENT_DELETE)) {
     myActions.push((rowData) => ({
-      icon: 'delete',
+      icon: () => <DeleteOutlined />,
       iconProps: {
         color: 'secondary',
         id: 'deleteClient' + rowData.inum,

admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import MaterialTable from '@material-table/core'
+import { DeleteOutlined } from '@material-ui/icons'
 import { Paper } from '@material-ui/core'
 import { useHistory } from 'react-router-dom'
 import { connect } from 'react-redux'
@@ -112,7 +113,6 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
     myActions.push((rowData) => ({
       icon: 'edit',
       iconProps: {
-        color: 'primary',
         id: 'editScope' + rowData.inum,
       },
       tooltip: `${t('messages.edit_scope')}`,
@@ -164,7 +164,7 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
 
   if (hasPermission(permissions, SCOPE_DELETE)) {
     myActions.push((rowData) => ({
-      icon: 'delete',
+      icon: () => <DeleteOutlined />,
       iconProps: {
         color: 'secondary',
         id: 'deleteScope' + rowData.inum,

admin-ui/plugins/schema/components/Person/AttributeListPage.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import MaterialTable from '@material-table/core'
+import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
 import { Paper } from '@material-ui/core'
 import { connect } from 'react-redux'
@@ -83,7 +84,6 @@ function AttributeListPage({ attributes, permissions, loading, dispatch }) {
     myActions.push((rowData) => ({
       icon: 'edit',
       iconProps: {
-        color: 'primary',
         id: 'editAttribute' + rowData.inum,
       },
       tooltip: `${t('tooltips.edit_attribute')}`,
@@ -95,7 +95,6 @@ function AttributeListPage({ attributes, permissions, loading, dispatch }) {
     myActions.push((rowData) => ({
       icon: 'visibility',
       iconProps: {
-        color: 'primary',
         id: 'viewAttribute' + rowData.inum,
       },
       tooltip: `${t('tooltips.view_Attribute')}`,
@@ -133,7 +132,7 @@ function AttributeListPage({ attributes, permissions, loading, dispatch }) {
   }
   if (hasPermission(permissions, ATTRIBUTE_DELETE)) {
     myActions.push((rowData) => ({
-      icon: 'delete',
+      icon: () => <DeleteOutlined />,
       iconProps: {
         color: 'secondary',
         id: 'deleteAttribute' + rowData.inum,

admin-ui/plugins/services/Components/Configuration/LdapListPage.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import MaterialTable from '@material-table/core';
+import MaterialTable from '@material-table/core'
+import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { Badge } from 'reactstrap'
@@ -72,7 +73,6 @@ function LdapListPage({
     myActions.push((rowData) => ({
       icon: 'edit',
       iconProps: {
-        color: 'primary',
         id: 'editLdap' + rowData.configId,
       },
       tooltip: `${t('tooltips.edit_ldap')}`,
@@ -94,7 +94,7 @@ function LdapListPage({
   }
   if (hasPermission(permissions, LDAP_DELETE)) {
     myActions.push((rowData) => ({
-      icon: 'delete',
+      icon: () => <DeleteOutlined />,
       iconProps: {
         color: 'secondary',
         id: 'deleteLdap' + rowData.configId,

admin-ui/plugins/services/Components/Configuration/SqlListPage.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import MaterialTable from '@material-table/core';
+import MaterialTable from '@material-table/core'
+import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { Paper } from '@material-ui/core'
@@ -71,7 +72,6 @@ function SqlListPage({
     myActions.push((rowData) => ({
       icon: 'edit',
       iconProps: {
-        color: 'primary',
         id: 'editSql' + rowData.configId,
       },
       tooltip: `${t('tooltips.edit_sql')}`,
@@ -93,7 +93,7 @@ function SqlListPage({
   }
   if (hasPermission(permissions, SQL_DELETE)) {
     myActions.push((rowData) => ({
-      icon: 'delete',
+      icon: () => <DeleteOutlined />,
       iconProps: {
         color: 'secondary',
         id: 'deleteSql' + rowData.configId,