diff --git a/src/fireedge/src/client/components/Tabs/Common/Attribute/Inputs.js b/src/fireedge/src/client/components/Tabs/Common/Attribute/Inputs.js index 838c51480f..1f811c3f21 100644 --- a/src/fireedge/src/client/components/Tabs/Common/Attribute/Inputs.js +++ b/src/fireedge/src/client/components/Tabs/Common/Attribute/Inputs.js @@ -20,6 +20,19 @@ import { makeStyles, TextField } from '@material-ui/core' import * as Actions from 'client/components/Tabs/Common/Attribute/Actions' +/** + * @typedef {object} Option + * @property {string|number|React.JSXElementConstructor} text - Options text to show + * @property {string|number} value - Option value + */ + +/** + * @typedef {object} InputProps + * @property {string} name - Attribute name + * @property {string} value - Attribute name + * @property {Option[]} [options] - Options + */ + const useStyles = makeStyles({ select: { textOverflow: 'ellipsis' @@ -28,17 +41,11 @@ const useStyles = makeStyles({ const Select = React.forwardRef( /** - * @param {object} props - Props - * @param {string} props.name - Attribute name - * @param {string} props.value - Attribute value - * @param {{ - * text:string, - * value:string}[] - * } props.options - Options available + * @param {InputProps} props - Props * @param {React.ForwardedRef} ref - Forward reference * @returns {React.JSXElementConstructor} Select field */ - ({ name, value, options }, ref) => { + ({ name = '', value = '', options }, ref) => { const classes = useStyles() const [newValue, setNewValue] = React.useState(() => value) @@ -69,29 +76,13 @@ const Select = React.forwardRef( } ) -Select.displayName = 'Select' - -Select.propTypes = { - name: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, - options: PropTypes.arrayOf( - PropTypes.shape({ - text: PropTypes.string.isRequired, - value: PropTypes.string - }) - ) -} - const Text = React.forwardRef( /** - * @param {object} props - Props - * @param {string} props.name - Attribute name - * @param {string} props.value - Attribute value + * @param {InputProps} props - Props * @param {React.ForwardedRef} ref - Forward reference * @returns {React.JSXElementConstructor} Text field */ ({ name = '', value = '' }, ref) => { - console.log({ name, value }) const [newValue, setNewValue] = React.useState(() => value) const handleChange = event => setNewValue(event.target.value) @@ -112,11 +103,20 @@ const Text = React.forwardRef( } ) -Text.displayName = 'Text' - -Text.propTypes = { +const InputPropTypes = { name: PropTypes.string.isRequired, - value: PropTypes.string.isRequired + value: PropTypes.string.isRequired, + options: PropTypes.arrayOf( + PropTypes.shape({ + text: PropTypes.string.isRequired, + value: PropTypes.string + }) + ) } +Select.displayName = 'Select' +Select.propTypes = InputPropTypes +Text.displayName = 'Text' +Text.propTypes = InputPropTypes + export { Select, Text } diff --git a/src/fireedge/src/client/components/Tabs/Common/Ownership.js b/src/fireedge/src/client/components/Tabs/Common/Ownership.js index 2694922ce1..13fedbb6a7 100644 --- a/src/fireedge/src/client/components/Tabs/Common/Ownership.js +++ b/src/fireedge/src/client/components/Tabs/Common/Ownership.js @@ -16,24 +16,10 @@ import * as React from 'react' import PropTypes from 'prop-types' -import { makeStyles, List, ListItem, Typography, Paper, Divider } from '@material-ui/core' - import { useUserApi, useGroupApi, RESOURCES } from 'client/features/One' -import Attribute from 'client/components/Tabs/Common/Attribute' -import { Tr } from 'client/components/HOC' +import { List } from 'client/components/Tabs/Common' import { T, SERVERADMIN_ID } from 'client/constants' -const useStyles = makeStyles(theme => ({ - item: { - '& > *': { - width: '50%' - } - }, - title: { - fontWeight: theme.typography.fontWeightBold - } -})) - const Ownership = React.memo(({ userId, userName, @@ -41,7 +27,6 @@ const Ownership = React.memo(({ groupName, handleEdit }) => { - const classes = useStyles() const { getUsers } = useUserApi() const { getGroups } = useGroupApi() @@ -66,16 +51,18 @@ const Ownership = React.memo(({ const ownership = [ { - key: T.Owner, + name: T.Owner, value: userName, valueInOptionList: userId, + canEdit: true, handleGetOptionList: getUserOptions, handleEdit: user => handleEdit?.({ user }) }, { - key: T.Group, + name: T.Group, value: groupName, valueInOptionList: groupId, + canEdit: true, handleGetOptionList: getGroupOptions, handleEdit: group => handleEdit?.({ group }) } diff --git a/src/fireedge/src/client/containers/Provisions/Form/ProvisionForm/index.js b/src/fireedge/src/client/containers/Provisions/Form/ProvisionForm/index.js index 2de02e6cb3..76b40e11bd 100644 --- a/src/fireedge/src/client/containers/Provisions/Form/ProvisionForm/index.js +++ b/src/fireedge/src/client/containers/Provisions/Form/ProvisionForm/index.js @@ -14,7 +14,7 @@ * limitations under the License. * * ------------------------------------------------------------------------- */ /* eslint-disable jsdoc/require-jsdoc */ -import React, { useState } from 'react' +import * as React from 'react' import PropTypes from 'prop-types' import { useForm, FormProvider } from 'react-hook-form'