From c0af2fb21d44b0140d85d8e8369175eb9fae5e7a Mon Sep 17 00:00:00 2001 From: Pavel Jankoski Date: Tue, 28 Nov 2023 15:11:09 +0100 Subject: [PATCH] console: Fix e2e issues --- .../containers/collaborators-table/index.js | 47 ++++++++++------ .../console/components/pubsub-form/index.js | 1 + .../containers/applications-table/index.js | 53 +++++++++++-------- 3 files changed, 65 insertions(+), 36 deletions(-) diff --git a/pkg/webui/account/containers/collaborators-table/index.js b/pkg/webui/account/containers/collaborators-table/index.js index 093ec545534..2d28c12b5d5 100644 --- a/pkg/webui/account/containers/collaborators-table/index.js +++ b/pkg/webui/account/containers/collaborators-table/index.js @@ -13,8 +13,9 @@ // limitations under the License. import React from 'react' -import { useDispatch, useSelector } from 'react-redux' +import { connect, useDispatch } from 'react-redux' import { defineMessages, useIntl } from 'react-intl' +import { bindActionCreators } from 'redux' import { createSelector } from 'reselect' import Icon from '@ttn-lw/components/icon' @@ -28,12 +29,10 @@ import FetchTable from '@ttn-lw/containers/fetch-table' import Message from '@ttn-lw/lib/components/message' import { getCollaboratorId } from '@ttn-lw/lib/selectors/id' +import PropTypes from '@ttn-lw/lib/prop-types' import sharedMessages from '@ttn-lw/lib/shared-messages' import attachPromise from '@ttn-lw/lib/store/actions/attach-promise' -import { - getCollaboratorsList, - deleteCollaborator as deleteCollaboratorAction, -} from '@ttn-lw/lib/store/actions/collaborators' +import { getCollaboratorsList, deleteCollaborator } from '@ttn-lw/lib/store/actions/collaborators' import { selectCollaborators, selectCollaboratorsTotalCount, @@ -53,17 +52,9 @@ const m = defineMessages({ }) const CollaboratorsTable = props => { - const { ...rest } = props + const { clientId, currentUserId, handleDeleteCollaborator, ...rest } = props const dispatch = useDispatch() const intl = useIntl() - const clientId = useSelector(selectSelectedClientId) - const currentUserId = useSelector(selectUserId) - - const handleDeleteCollaborator = React.useCallback( - (collaboratorID, isUsr) => - dispatch(attachPromise(deleteCollaboratorAction('client', clientId, collaboratorID, isUsr))), - [clientId, dispatch], - ) const deleteCollaborator = React.useCallback( async ids => { @@ -203,4 +194,30 @@ const CollaboratorsTable = props => { ) } -export default CollaboratorsTable +CollaboratorsTable.propTypes = { + clientId: PropTypes.string.isRequired, + currentUserId: PropTypes.string.isRequired, + handleDeleteCollaborator: PropTypes.func.isRequired, +} + +export default connect( + state => ({ + clientId: selectSelectedClientId(state), + currentUserId: selectUserId(state), + }), + dispatch => ({ + ...bindActionCreators( + { + handleDeleteCollaborator: attachPromise(deleteCollaborator), + }, + dispatch, + ), + }), + (stateProps, dispatchProps, ownProps) => ({ + ...stateProps, + ...dispatchProps, + ...ownProps, + handleDeleteCollaborator: (collaboratorID, isUsr) => + dispatchProps.handleDeleteCollaborator('client', stateProps.clientId, collaboratorID, isUsr), + }), +)(CollaboratorsTable) diff --git a/pkg/webui/console/components/pubsub-form/index.js b/pkg/webui/console/components/pubsub-form/index.js index 3d62c6961d5..081214a6fb7 100644 --- a/pkg/webui/console/components/pubsub-form/index.js +++ b/pkg/webui/console/components/pubsub-form/index.js @@ -475,6 +475,7 @@ const PubsubForm = props => { title={sharedMessages.provider} name="_provider" component={Radio.Group} + description={natsDisabled || mqttDisabled ? m.providerDescription : undefined} disabled={natsDisabled || mqttDisabled} > diff --git a/pkg/webui/console/containers/applications-table/index.js b/pkg/webui/console/containers/applications-table/index.js index e86aeafaf66..8f6edcdb8bf 100644 --- a/pkg/webui/console/containers/applications-table/index.js +++ b/pkg/webui/console/containers/applications-table/index.js @@ -13,8 +13,9 @@ // limitations under the License. import React from 'react' -import { useDispatch, useSelector } from 'react-redux' +import { connect } from 'react-redux' import { defineMessages, FormattedNumber } from 'react-intl' +import { bindActionCreators } from 'redux' import { createSelector } from 'reselect' import Icon from '@ttn-lw/components/icon' @@ -31,6 +32,7 @@ import FetchTable from '@ttn-lw/containers/fetch-table' import Message from '@ttn-lw/lib/components/message' import DateTime from '@ttn-lw/lib/components/date-time' +import PropTypes from '@ttn-lw/lib/prop-types' import sharedMessages from '@ttn-lw/lib/shared-messages' import attachPromise from '@ttn-lw/lib/store/actions/attach-promise' @@ -39,7 +41,7 @@ import { isOtherClusterApp } from '@console/lib/application-utils' import { deleteApplication, - restoreApplication as restoreApplicationAction, + restoreApplication, getApplicationsList, } from '@console/store/actions/applications' @@ -75,28 +77,11 @@ const tabs = [ ] const ApplicationsTable = props => { - const { ...rest } = props - const isAdmin = useSelector(selectUserIsAdmin) - - const dispatch = useDispatch() + const { isAdmin, restoreApplication, purgeApplication, ...rest } = props const [tab, setTab] = React.useState(OWNED_TAB) const isDeletedTab = tab === DELETED_TAB - const purgeApplication = React.useCallback( - id => { - dispatch(attachPromise(deleteApplication(id, { purge: true }))) - }, - [dispatch], - ) - - const restoreApplication = React.useCallback( - id => { - dispatch(attachPromise(restoreApplicationAction(id))) - }, - [dispatch], - ) - const handleRestore = React.useCallback( async id => { try { @@ -305,4 +290,30 @@ const ApplicationsTable = props => { ) } -export default ApplicationsTable +ApplicationsTable.propTypes = { + isAdmin: PropTypes.bool.isRequired, + purgeApplication: PropTypes.func.isRequired, + restoreApplication: PropTypes.func.isRequired, +} + +export default connect( + state => ({ + isAdmin: selectUserIsAdmin(state), + }), + dispatch => ({ + ...bindActionCreators( + { + purgeApplication: attachPromise(deleteApplication), + restoreApplication: attachPromise(restoreApplication), + }, + dispatch, + ), + }), + (stateProps, dispatchProps, ownProps) => ({ + ...stateProps, + ...dispatchProps, + ...ownProps, + purgeApplication: id => dispatchProps.purgeApplication(id, { purge: true }), + restoreApplication: id => dispatchProps.restoreApplication(id), + }), +)(ApplicationsTable)