diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json
index 1f6086a20..5df66e77b 100644
--- a/ui/src/i18n/en.json
+++ b/ui/src/i18n/en.json
@@ -334,6 +334,7 @@
"plugin": {
"name": "Plugin |||| Plugins",
"fields": {
+ "id": "ID",
"name": "Name",
"description": "Description",
"version": "Version",
diff --git a/ui/src/plugin/PluginList.jsx b/ui/src/plugin/PluginList.jsx
index 9afafd53a..4b3f5c29e 100644
--- a/ui/src/plugin/PluginList.jsx
+++ b/ui/src/plugin/PluginList.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react'
+import React, { useCallback } from 'react'
import {
Datagrid,
TextField,
@@ -8,10 +8,11 @@ import {
useRecordContext,
useTranslate,
FunctionField,
+ useResourceContext,
} from 'react-admin'
import Switch from '@material-ui/core/Switch'
import { makeStyles } from '@material-ui/core/styles'
-import { useMediaQuery, Tooltip, Chip } from '@material-ui/core'
+import { useMediaQuery, Tooltip, Chip, Typography } from '@material-ui/core'
import { MdError } from 'react-icons/md'
import { List, DateField, SimpleList } from '../common'
@@ -36,8 +37,9 @@ const useStyles = makeStyles((theme) => ({
},
}))
-const ToggleEnabledInput = ({ resource }) => {
- const record = useRecordContext()
+const ToggleEnabledInput = ({ props }) => {
+ const resource = useResourceContext(props)
+ const record = useRecordContext(props)
const notify = useNotify()
const refresh = useRefresh()
const translate = useTranslate()
@@ -118,33 +120,18 @@ const ErrorIndicator = () => {
)
}
-const VersionField = () => {
+const ManifestField = ({ source }) => {
const record = useRecordContext()
- if (!record.manifest) {
+ if (!record?.manifest) {
return null
}
try {
const manifest = JSON.parse(record.manifest)
- return {manifest.version || '-'}
+ return {manifest[source] || '-'}
} catch {
- return -
- }
-}
-
-const DescriptionField = () => {
- const record = useRecordContext()
-
- if (!record.manifest) {
- return null
- }
-
- try {
- const manifest = JSON.parse(record.manifest)
- return {manifest.description || '-'}
- } catch {
- return -
+ return -
}
}
@@ -152,40 +139,6 @@ const PluginList = (props) => {
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
const translate = useTranslate()
- const toggleableFields = useMemo(
- () => ({
- description: !isXsmall && (
- }
- />
- ),
- version: (
- }
- />
- ),
- enabled: (
- }
- />
- ),
- error: (
- }
- />
- ),
- }),
- [isXsmall],
- )
-
return (
{isXsmall ? (
@@ -208,11 +161,11 @@ const PluginList = (props) => {
/>
) : (
-
- {toggleableFields['description']}
- {toggleableFields['version']}
- {toggleableFields['enabled']}
- {toggleableFields['error']}
+
+ {!isXsmall && }
+
+
+
)}