feat(admin-ui): fix issues with material list #43

Author: syntrydy

admin-ui/package.json

@@ -116,7 +116,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
-    "@material-table/core": "^4.3.18",
+    "@material-table/core": "^4.3.31",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",

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

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react'
-import MaterialTable from '@material-table/core';
+import MaterialTable from '@material-table/core'
 import { useHistory } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { Paper } from '@material-ui/core'
-import { Badge } from 'reactstrap'
-import { Card, CardBody, FormGroup } from '../../../../app/components'
+import { Card, CardBody, FormGroup, Badge } from '../../../../app/components'
 import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
 import GluuDialog from '../../../../app/routes/Apps/Gluu/GluuDialog'
 import ClientDetailPage from '../Clients/ClientDetailPage'
@@ -47,6 +46,41 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   const [item, setItem] = useState({})
   const [modal, setModal] = useState(false)
   const toggle = () => setModal(!modal)
+  const tableColumns = [
+    {
+      title: `${t('fields.inum')}`,
+      field: 'inum',
+      hidden: true,
+      sorting: true,
+      searchable: true,
+    },
+    { title: `${t('fields.client_name')}`, field: 'clientName' },
+    {
+      title: `${t('fields.application_type')}`,
+      field: 'applicationType',
+    },
+    { title: `${t('fields.subject_type')}`, field: 'subjectType' },
+    {
+      title: `${t('fields.status')}`,
+      field: 'disabled',
+      type: 'boolean',
+      render: (rowData) => (
+        <Badge color={getBadgeTheme(rowData.disabled)}>
+          {getClientStatus(rowData.disabled)}
+        </Badge>
+      ),
+    },
+    {
+      title: `${t('fields.is_trusted_client')}`,
+      field: 'trustedClient',
+      type: 'boolean',
+      render: (rowData) => (
+        <Badge color={getTrustedTheme(rowData.trustedClient)}>
+          {rowData.trustedClient ? t('options.yes') : t('options.no')}
+        </Badge>
+      ),
+    },
+  ]
   useEffect(() => {
     makeOptions()
     buildPayload(userAction, FETCHING_OIDC_CLIENTS, options)
@@ -192,41 +226,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
             components={{
               Container: (props) => <Paper {...props} elevation={0} />,
             }}
-            columns={[
-              {
-                title: `${t('fields.inum')}`,
-                field: 'inum',
-                hidden: true,
-                sorting: true,
-                searchable: true,
-              },
-              { title: `${t('fields.client_name')}`, field: 'clientName' },
-              {
-                title: `${t('fields.application_type')}`,
-                field: 'applicationType',
-              },
-              { title: `${t('fields.subject_type')}`, field: 'subjectType' },
-              {
-                title: `${t('fields.status')}`,
-                field: 'disabled',
-                type: 'boolean',
-                render: (rowData) => (
-                  <Badge color={getBadgeTheme(rowData.disabled)}>
-                    {getClientStatus(rowData.disabled)}
-                  </Badge>
-                ),
-              },
-              {
-                title: `${t('fields.is_trusted_client')}`,
-                field: 'trustedClient',
-                type: 'boolean',
-                render: (rowData) => (
-                  <Badge color={getTrustedTheme(rowData.trustedClient)}>
-                    {rowData.trustedClient ? t('options.yes') : t('options.no')}
-                  </Badge>
-                ),
-              },
-            ]}
+            columns={tableColumns}
             data={clients}
             isLoading={loading}
             title=""

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import MaterialTable from '@material-table/core';
+import MaterialTable from '@material-table/core'
 import { Paper } from '@material-ui/core'
 import { useHistory } from 'react-router-dom'
 import { connect } from 'react-redux'
@@ -47,6 +47,17 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
   const [pattern, setPattern] = useState(null)
   const toggle = () => setModal(!modal)
 
+  const tableColumns = [
+    { title: `${t('fields.inum')}`, field: 'inum' },
+    { title: `${t('fields.displayname')}`, field: 'displayName' },
+    { title: `${t('fields.description')}`, field: 'description' },
+    {
+      title: `${t('fields.scope_type')}`,
+      field: 'scopeType',
+      render: (rowData) => <Badge color="primary">{rowData.scopeType}</Badge>,
+    },
+  ]
+
   useEffect(() => {
     makeOptions()
     buildPayload(userAction, FETCHING_SCOPES, options)
@@ -162,23 +173,13 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
             components={{
               Container: (props) => <Paper {...props} elevation={0} />,
             }}
-            columns={[
-              { title: `${t('fields.inum')}`, field: 'inum' },
-              { title: `${t('fields.displayname')}`, field: 'displayName' },
-              { title: `${t('fields.description')}`, field: 'description' },
-              {
-                title: `${t('fields.scope_type')}`,
-                field: 'scopeType',
-                render: (rowData) => (
-                  <Badge color="primary">{rowData.scopeType}</Badge>
-                ),
-              },
-            ]}
+            columns={tableColumns}
             data={scopes}
             isLoading={loading}
             title=""
             actions={myActions}
             options={{
+              columnsButton: true,
               search: true,
               searchFieldAlignment: 'left',
               selection: false,