From b8fa1662e1035b7470a65b43dd6e5226015c2fe0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Tue, 16 Apr 2024 15:08:13 +0200 Subject: [PATCH] Change: Update all filter dialogs for new UI Adjust the filter dialogs of all list pages. --- src/web/pages/certbund/filterdialog.js | 95 ++++-- src/web/pages/certbund/listpage.js | 1 - src/web/pages/cpes/filterdialog.js | 96 +++++-- src/web/pages/cpes/listpage.js | 1 - src/web/pages/credentials/filterdialog.jsx | 73 +++++ src/web/pages/credentials/listpage.js | 124 ++++---- src/web/pages/cves/filterdialog.js | 129 ++++++--- src/web/pages/filters/filterdialog.jsx | 67 +++++ src/web/pages/filters/listpage.js | 124 ++++---- src/web/pages/groups/filterdialog.jsx | 61 ++++ src/web/pages/groups/listpage.js | 122 ++++---- src/web/pages/hosts/filterdialog.js | 113 +++++--- src/web/pages/notes/filterdialog.js | 231 ++++++++------- src/web/pages/nvts/filterdialog.js | 129 ++++++--- .../pages/operatingsystems/filterdialog.js | 129 ++++++--- src/web/pages/overrides/filterdialog.js | 140 +++++---- src/web/pages/permissions/filterdialog.jsx | 81 ++++++ src/web/pages/permissions/listpage.js | 97 ++++--- src/web/pages/policies/listpage.js | 109 +++---- src/web/pages/portlists/filterdialog.js | 88 ++++-- src/web/pages/portlists/listpage.js | 119 ++++---- src/web/pages/reportconfigs/filterdialog.jsx | 65 +++++ src/web/pages/reportconfigs/listpage.js | 117 ++++---- src/web/pages/reportformats/filterdialog.jsx | 76 +++++ src/web/pages/reportformats/listpage.js | 88 +++--- src/web/pages/reports/deltadetailspage.js | 4 +- src/web/pages/reports/detailsfilterdialog.js | 98 ++++--- src/web/pages/reports/detailspage.js | 7 +- src/web/pages/reports/filterdialog.js | 159 ++++++----- src/web/pages/results/filterdialog.js | 167 ++++++----- src/web/pages/roles/filterdialog.jsx | 60 ++++ src/web/pages/roles/listpage.js | 124 ++++---- src/web/pages/scanners/filterdialog.jsx | 76 +++++ src/web/pages/scanners/listpage.js | 175 ++++++------ src/web/pages/schedules/filterdialog.jsx | 75 +++++ src/web/pages/schedules/listpage.js | 104 +++---- src/web/pages/tags/filterdialog.jsx | 75 +++++ src/web/pages/tags/listpage.js | 182 +++++------- src/web/pages/targets/filterdialog.js | 134 +++++---- src/web/pages/targets/listpage.js | 95 +++--- src/web/pages/tasks/filterdialog.js | 154 +++++----- src/web/pages/tasks/listpage.js | 270 +++++++++--------- src/web/pages/tickets/filterdialog.js | 171 +++++++---- src/web/pages/tlscertificates/filterdialog.js | 104 ++++--- src/web/pages/tlscertificates/listpage.js | 118 ++++---- src/web/pages/users/filterdialog.jsx | 75 +++++ src/web/pages/users/listpage.js | 48 ++-- src/web/pages/vulns/filterdialog.js | 229 ++++++++------- 48 files changed, 3236 insertions(+), 1943 deletions(-) create mode 100644 src/web/pages/credentials/filterdialog.jsx create mode 100644 src/web/pages/filters/filterdialog.jsx create mode 100644 src/web/pages/groups/filterdialog.jsx create mode 100644 src/web/pages/permissions/filterdialog.jsx create mode 100644 src/web/pages/reportconfigs/filterdialog.jsx create mode 100644 src/web/pages/reportformats/filterdialog.jsx create mode 100644 src/web/pages/roles/filterdialog.jsx create mode 100644 src/web/pages/scanners/filterdialog.jsx create mode 100644 src/web/pages/schedules/filterdialog.jsx create mode 100644 src/web/pages/tags/filterdialog.jsx create mode 100644 src/web/pages/users/filterdialog.jsx diff --git a/src/web/pages/certbund/filterdialog.js b/src/web/pages/certbund/filterdialog.js index 85f13e1a66..988470bfbb 100644 --- a/src/web/pages/certbund/filterdialog.js +++ b/src/web/pages/certbund/filterdialog.js @@ -15,35 +15,74 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {_l} from 'gmp/locale/lang'; +import PropTypes from 'web/utils/proptypes'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'title', - displayName: _l('Title'), - }, - { - name: 'created', - displayName: _l('Created'), - }, - { - name: 'cves', - displayName: _l('CVEs'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, -]; +import useTranslation from 'web/hooks/useTranslation'; -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); +const CertBundAdvFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'info', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); -// vim: set ts=2 sw=2 tw=80: + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'title', + displayName: _('Title'), + }, + { + name: 'created', + displayName: _('Created'), + }, + { + name: 'cves', + displayName: _('CVEs'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + ]; + return ( + + + + ); +}; + +CertBundAdvFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default CertBundAdvFilterDialog; diff --git a/src/web/pages/certbund/listpage.js b/src/web/pages/certbund/listpage.js index ca09cd2321..8c05e93c51 100644 --- a/src/web/pages/certbund/listpage.js +++ b/src/web/pages/certbund/listpage.js @@ -56,7 +56,6 @@ const Page = ({filter, onFilterChanged, onInteraction, ...props}) => ( ( . */ -import {_l} from 'gmp/locale/lang'; +import PropTypes from 'web/utils/proptypes'; -import {createFilterDialog} from '../../components/powerfilter/dialog.js'; +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'title', - displayName: _l('Title'), - }, - { - name: 'modified', - displayName: _l('Modified'), - }, - { - name: 'cves', - displayName: _l('CVEs'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, -]; +import useTranslation from 'web/hooks/useTranslation'; -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); +const CpesFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'info', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); -// vim: set ts=2 sw=2 tw=80: + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'title', + displayName: _('Title'), + }, + { + name: 'modified', + displayName: _('Modified'), + }, + { + name: 'cves', + displayName: _('CVEs'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + ]; + + return ( + + + + ); +}; + +CpesFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default CpesFilterDialog; diff --git a/src/web/pages/cpes/listpage.js b/src/web/pages/cpes/listpage.js index 4fdd86a64b..84f4192b0c 100644 --- a/src/web/pages/cpes/listpage.js +++ b/src/web/pages/cpes/listpage.js @@ -52,7 +52,6 @@ const Page = ({filter, onFilterChanged, onInteraction, ...props}) => ( ( { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'credential', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'type', + displayName: _('Type'), + }, + { + name: 'allow_insecure', + displayName: _('Allow insecure use'), + }, + { + name: 'login', + displayName: _('Login'), + }, + ]; + + return ( + + + + ); +}; + +CredentialsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default CredentialsFilterDialog; diff --git a/src/web/pages/credentials/listpage.js b/src/web/pages/credentials/listpage.js index 92b3381741..4fa01ccfd3 100644 --- a/src/web/pages/credentials/listpage.js +++ b/src/web/pages/credentials/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {CREDENTIALS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,7 +31,8 @@ import NewIcon from 'web/components/icon/newicon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; import { loadEntities, @@ -42,10 +40,13 @@ import { } from 'web/store/entities/credentials'; import CredentialComponent from './component'; -import CredentialsTable, {SORT_FIELDS} from './table'; +import CredentialsTable from './table'; +import CredentialsFilterDialog from './filterdialog'; -export const ToolBarIcons = withCapabilities( - ({capabilities, onCredentialCreateClick}) => ( +export const ToolBarIcons = ({onCredentialCreateClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( )} - ), -); + ); +}; ToolBarIcons.propTypes = { onCredentialCreateClick: PropTypes.func.isRequired, }; -const CredentialsFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - const CredentialsPage = ({ onChanged, onDownloaded, onError, onInteraction, ...props -}) => ( - - {({ - clone, - create, - delete: delete_func, - download, - downloadinstaller, - edit, - save, - }) => ( - - - } - table={CredentialsTable} - title={_('Credentials')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onCredentialCloneClick={clone} - onCredentialCreateClick={create} - onCredentialDeleteClick={delete_func} - onCredentialDownloadClick={download} - onCredentialEditClick={edit} - onCredentialSaveClick={save} - onCredentialInstallerDownloadClick={downloadinstaller} - onDownloaded={onDownloaded} - onError={onError} - onInteraction={onInteraction} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({ + clone, + create, + delete: delete_func, + download, + downloadinstaller, + edit, + save, + }) => ( + + + } + table={CredentialsTable} + title={_('Credentials')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onCredentialCloneClick={clone} + onCredentialCreateClick={create} + onCredentialDeleteClick={delete_func} + onCredentialDownloadClick={download} + onCredentialEditClick={edit} + onCredentialSaveClick={save} + onCredentialInstallerDownloadClick={downloadinstaller} + onDownloaded={onDownloaded} + onError={onError} + onInteraction={onInteraction} + /> + + )} + + ); +}; CredentialsPage.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/cves/filterdialog.js b/src/web/pages/cves/filterdialog.js index cc88b8e859..e48f8118bd 100644 --- a/src/web/pages/cves/filterdialog.js +++ b/src/web/pages/cves/filterdialog.js @@ -15,51 +15,92 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {_l} from 'gmp/locale/lang'; -import {createFilterDialog} from '../../components/powerfilter/dialog.js'; +import PropTypes from 'web/utils/proptypes'; -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'vector', - displayName: _l('Vector'), - }, - { - name: 'complexity', - displayName: _l('Complexity'), - }, - { - name: 'authentication', - displayName: _l('Authentication'), - }, - { - name: 'confidentiality_impact', - displayName: _l('Confidentiality Impact'), - }, - { - name: 'integrity_impact', - displayName: _l('Integrity Impact'), - }, - { - name: 'availability_impact', - displayName: _l('Availability Impact'), - }, - { - name: 'published', - displayName: _l('Published'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, -]; +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); +import useTranslation from 'web/hooks/useTranslation'; -// vim: set ts=2 sw=2 tw=80: +const CvesFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'info', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'vector', + displayName: _('Vector'), + }, + { + name: 'complexity', + displayName: _('Complexity'), + }, + { + name: 'authentication', + displayName: _('Authentication'), + }, + { + name: 'confidentiality_impact', + displayName: _('Confidentiality Impact'), + }, + { + name: 'integrity_impact', + displayName: _('Integrity Impact'), + }, + { + name: 'availability_impact', + displayName: _('Availability Impact'), + }, + { + name: 'published', + displayName: _('Published'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + ]; + + return ( + + + + ); +}; + +CvesFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default CvesFilterDialog; diff --git a/src/web/pages/filters/filterdialog.jsx b/src/web/pages/filters/filterdialog.jsx new file mode 100644 index 0000000000..1302dc692a --- /dev/null +++ b/src/web/pages/filters/filterdialog.jsx @@ -0,0 +1,67 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const FiltersFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'filter', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'term', + displayName: _('Term'), + }, + { + name: 'type', + displayName: _('Type'), + }, + ]; + return ( + + + + ); +}; + +FiltersFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default FiltersFilterDialog; diff --git a/src/web/pages/filters/listpage.js b/src/web/pages/filters/listpage.js index 071898fda4..24a529e58c 100644 --- a/src/web/pages/filters/listpage.js +++ b/src/web/pages/filters/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {FILTERS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,7 +31,8 @@ import NewIcon from 'web/components/icon/newicon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; import { loadEntities, @@ -42,74 +40,78 @@ import { } from 'web/store/entities/filters'; import FilterComponent from './component'; -import FiltersTable, {SORT_FIELDS} from './table'; - -const ToolBarIcons = withCapabilities(({capabilities, onFilterCreateClick}) => ( - - - {capabilities.mayCreate('filter') && ( - - )} - -)); +import FiltersTable from './table'; +import FiltersFilterDialog from './filterdialog'; + +const ToolBarIcons = ({onFilterCreateClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( + + + {capabilities.mayCreate('filter') && ( + + )} + + ); +}; ToolBarIcons.propTypes = { onFilterCreateClick: PropTypes.func.isRequired, }; -const FiltersFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - const FiltersPage = ({ onChanged, onDownloaded, onError, onInteraction, ...props -}) => ( - - {({clone, create, delete: delete_func, download, edit, save}) => ( - - - - } - table={FiltersTable} - title={_('Filters')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onDownloaded={onDownloaded} - onError={onError} - onFilterCloneClick={clone} - onFilterCreateClick={create} - onFilterDeleteClick={delete_func} - onFilterDownloadClick={download} - onFilterEditClick={edit} - onFilterSaveClick={save} - onInteraction={onInteraction} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({clone, create, delete: delete_func, download, edit, save}) => ( + + + + } + table={FiltersTable} + title={_('Filters')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onDownloaded={onDownloaded} + onError={onError} + onFilterCloneClick={clone} + onFilterCreateClick={create} + onFilterDeleteClick={delete_func} + onFilterDownloadClick={download} + onFilterEditClick={edit} + onFilterSaveClick={save} + onInteraction={onInteraction} + /> + + )} + + ); +}; FiltersPage.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/groups/filterdialog.jsx b/src/web/pages/groups/filterdialog.jsx new file mode 100644 index 0000000000..6ea7bb1bb5 --- /dev/null +++ b/src/web/pages/groups/filterdialog.jsx @@ -0,0 +1,61 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const GroupsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'group', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + ]; + + return ( + + + + ); +}; + +GroupsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default GroupsFilterDialog; diff --git a/src/web/pages/groups/listpage.js b/src/web/pages/groups/listpage.js index 10553c7a1a..d4ae9da0ee 100644 --- a/src/web/pages/groups/listpage.js +++ b/src/web/pages/groups/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {GROUPS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,79 +31,86 @@ import NewIcon from 'web/components/icon/newicon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, selector as entitiesSelector, } from 'web/store/entities/groups'; -import GroupComponent from './component'; -import Table, {SORT_FIELDS} from './table'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; -const ToolBarIcons = withCapabilities(({capabilities, onGroupCreateClick}) => ( - - - {capabilities.mayCreate('group') && ( - - )} - -)); +import GroupComponent from './component'; +import Table from './table'; +import GroupsFilterDialog from './filterdialog'; + +const ToolBarIcons = ({onGroupCreateClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( + + + {capabilities.mayCreate('group') && ( + + )} + + ); +}; ToolBarIcons.propTypes = { onGroupCreateClick: PropTypes.func.isRequired, }; -const GroupsFilterDialog = createFilterDialog({sortFields: SORT_FIELDS}); - const GroupsPage = ({ onChanged, onDownloaded, onError, onInteraction, ...props -}) => ( - - {({clone, create, delete: delete_func, download, edit, save}) => ( - - - } - table={Table} - title={_('Groups')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onDownloaded={onDownloaded} - onError={onError} - onGroupCloneClick={clone} - onGroupCreateClick={create} - onGroupDeleteClick={delete_func} - onGroupDownloadClick={download} - onGroupEditClick={edit} - onGroupSaveClick={save} - onInteraction={onInteraction} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({clone, create, delete: delete_func, download, edit, save}) => ( + + + } + table={Table} + title={_('Groups')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onDownloaded={onDownloaded} + onError={onError} + onGroupCloneClick={clone} + onGroupCreateClick={create} + onGroupDeleteClick={delete_func} + onGroupDownloadClick={download} + onGroupEditClick={edit} + onGroupSaveClick={save} + onInteraction={onInteraction} + /> + + )} + + ); +}; GroupsPage.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/hosts/filterdialog.js b/src/web/pages/hosts/filterdialog.js index 14d685d6dc..5094cbd995 100644 --- a/src/web/pages/hosts/filterdialog.js +++ b/src/web/pages/hosts/filterdialog.js @@ -15,39 +15,80 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {_l} from 'gmp/locale/lang'; - -import {createFilterDialog} from '../../components/powerfilter/dialog.js'; - -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'hostname', - displayName: _l('Hostname'), - }, - { - name: 'ip', - displayName: _l('IP Address'), - }, - { - name: 'os', - displayName: _l('Operating System'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, - { - name: 'modified', - displayName: _l('Modified'), - }, -]; - -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); - -// vim: set ts=2 sw=2 tw=80: + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const GroupsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'host', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'hostname', + displayName: _('Hostname'), + }, + { + name: 'ip', + displayName: _('IP Address'), + }, + { + name: 'os', + displayName: _('Operating System'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + { + name: 'modified', + displayName: _('Modified'), + }, + ]; + + return ( + + + + ); +}; + +GroupsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default GroupsFilterDialog; diff --git a/src/web/pages/notes/filterdialog.js b/src/web/pages/notes/filterdialog.js index 3d87f13663..6402a93d63 100644 --- a/src/web/pages/notes/filterdialog.js +++ b/src/web/pages/notes/filterdialog.js @@ -18,126 +18,145 @@ import React from 'react'; -import {_l, _} from 'gmp/locale/lang'; - -import Layout from 'web/components/layout/layout'; - -import compose from 'web/utils/compose'; -import withCapabilities from 'web/utils/withCapabilities'; - -/* eslint-disable max-len */ +import PropTypes from 'web/utils/proptypes'; import CreateNamedFilterGroup from 'web/components/powerfilter/createnamedfiltergroup'; -import FilterDialogPropTypes from 'web/components/powerfilter/dialogproptypes'; -import withFilterDialog from 'web/components/powerfilter/withFilterDialog'; - import FilterStringGroup from 'web/components/powerfilter/filterstringgroup'; import FirstResultGroup from 'web/components/powerfilter/firstresultgroup'; import ResultsPerPageGroup from 'web/components/powerfilter/resultsperpagegroup'; import SortByGroup from 'web/components/powerfilter/sortbygroup'; import FilterSearchGroup from 'web/components/powerfilter/filtersearchgroup'; import BooleanFilterGroup from 'web/components/powerfilter/booleanfiltergroup'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; + +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -const SORT_FIELDS = [ - { - name: 'text', - displayName: _l('Text'), - }, - { - name: 'nvt', - displayName: _l('Nvt'), - }, - { - name: 'hosts', - displayName: _l('Hosts'), - }, - { - name: 'port', - displayName: _l('Location'), - }, - { - name: 'active', - displayName: _l('Active'), - }, -]; +import useTranslation from 'web/hooks/useTranslation'; +import useCapabilities from 'web/utils/useCapabilities'; const NotesFilterDialogComponent = ({ - capabilities, - filter, - filterName, - filterNameValid, - filterstring, - saveNamedFilter, - onFilterChange, - onFilterStringChange, - onFilterValueChange, - onSearchTermChange, - onSortByChange, - onSortOrderChange, - onValueChange, -}) => ( - - - - - - - - - - - - - - - - - - {capabilities.mayCreate('filter') && ( - { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(initialFilter); + const [handleSave] = useFilterDialogSave( + 'note', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'text', + displayName: _('Text'), + }, + { + name: 'nvt', + displayName: _('Nvt'), + }, + { + name: 'hosts', + displayName: _('Hosts'), + }, + { + name: 'port', + displayName: _('Location'), + }, + { + name: 'active', + displayName: _('Active'), + }, + ]; + + const { + filter, + filterName, + filterString, + saveNamedFilter, + onFilterValueChange, + onFilterStringChange, + onSearchTermChange, + onValueChange, + onSortByChange, + onSortOrderChange, + } = filterDialogProps; + return ( + + + + + + - )} - -); -NotesFilterDialogComponent.propTypes = FilterDialogPropTypes; + + + + + + + + + -export default compose( - withCapabilities, - withFilterDialog(), -)(NotesFilterDialogComponent); + {capabilities.mayCreate('filter') && ( + + )} + + ); +}; + +NotesFilterDialogComponent.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default NotesFilterDialogComponent; // vim: set ts=2 sw=2 tw=80: diff --git a/src/web/pages/nvts/filterdialog.js b/src/web/pages/nvts/filterdialog.js index a4bdf3ec51..8624d4fa6a 100644 --- a/src/web/pages/nvts/filterdialog.js +++ b/src/web/pages/nvts/filterdialog.js @@ -15,51 +15,92 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {_l} from 'gmp/locale/lang'; -import {createFilterDialog} from '../../components/powerfilter/dialog.js'; +import PropTypes from 'web/utils/proptypes'; -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'family', - displayName: _l('Family'), - }, - { - name: 'created', - displayName: _l('Created'), - }, - { - name: 'modified', - displayName: _l('Modified'), - }, - { - name: 'version', - displayName: _l('Version'), - }, - { - name: 'cve', - displayName: _l('CVE'), - }, - { - name: 'solution_type', - displayName: _l('Solution Type'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, - { - name: 'qod', - displayName: _l('QoD'), - }, -]; +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); +import useTranslation from 'web/hooks/useTranslation'; -// vim: set ts=2 sw=2 tw=80: +const NvtsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'info', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'family', + displayName: _('Family'), + }, + { + name: 'created', + displayName: _('Created'), + }, + { + name: 'modified', + displayName: _('Modified'), + }, + { + name: 'version', + displayName: _('Version'), + }, + { + name: 'cve', + displayName: _('CVE'), + }, + { + name: 'solution_type', + displayName: _('Solution Type'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + { + name: 'qod', + displayName: _('QoD'), + }, + ]; + + return ( + + + + ); +}; + +NvtsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default NvtsFilterDialog; diff --git a/src/web/pages/operatingsystems/filterdialog.js b/src/web/pages/operatingsystems/filterdialog.js index b932cbfd86..c21d70632d 100644 --- a/src/web/pages/operatingsystems/filterdialog.js +++ b/src/web/pages/operatingsystems/filterdialog.js @@ -15,47 +15,88 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {_l} from 'gmp/locale/lang'; - -import {createFilterDialog} from '../../components/powerfilter/dialog.js'; - -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'title', - displayName: _l('Title'), - }, - { - name: 'latest_severity', - displayName: _l('Severity: Latest'), - }, - { - name: 'highest_severity', - displayName: _l('Severity: Highest'), - }, - { - name: 'average_severity', - displayName: _l('Severity: Average'), - }, - { - name: 'all_hosts', - displayName: _l('Hosts (All)'), - }, - { - name: 'hosts', - displayName: _l('Hosts (Best OS)'), - }, - { - name: 'modified', - displayName: _l('Modified'), - }, -]; - -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); - -// vim: set ts=2 sw=2 tw=80: + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const CvesFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'os', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'title', + displayName: _('Title'), + }, + { + name: 'latest_severity', + displayName: _('Severity: Latest'), + }, + { + name: 'highest_severity', + displayName: _('Severity: Highest'), + }, + { + name: 'average_severity', + displayName: _('Severity: Average'), + }, + { + name: 'all_hosts', + displayName: _('Hosts (All)'), + }, + { + name: 'hosts', + displayName: _('Hosts (Best OS)'), + }, + { + name: 'modified', + displayName: _('Modified'), + }, + ]; + + return ( + + + + ); +}; + +CvesFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default CvesFilterDialog; diff --git a/src/web/pages/overrides/filterdialog.js b/src/web/pages/overrides/filterdialog.js index 97fdd9ec7e..ba7ae2e83b 100644 --- a/src/web/pages/overrides/filterdialog.js +++ b/src/web/pages/overrides/filterdialog.js @@ -17,77 +17,92 @@ */ import React from 'react'; -import {_l, _} from 'gmp/locale/lang'; -import Layout from 'web/components/layout/layout'; - -import compose from 'web/utils/compose'; -import withCapabilities from 'web/utils/withCapabilities'; - -/* eslint-disable max-len */ +import PropTypes from 'web/utils/proptypes'; import CreateNamedFilterGroup from 'web/components/powerfilter/createnamedfiltergroup'; import FilterStringGroup from 'web/components/powerfilter/filterstringgroup'; import FirstResultGroup from 'web/components/powerfilter/firstresultgroup'; import ResultsPerPageGroup from 'web/components/powerfilter/resultsperpagegroup'; import SortByGroup from 'web/components/powerfilter/sortbygroup'; -import FilterDialogPropTypes from 'web/components/powerfilter/dialogproptypes'; -import withFilterDialog from 'web/components/powerfilter/withFilterDialog'; import FilterSearchGroup from 'web/components/powerfilter/filtersearchgroup'; import BooleanFilterGroup from 'web/components/powerfilter/booleanfiltergroup'; -const SORT_FIELDS = [ - { - name: 'text', - displayName: _l('Text'), - }, - { - name: 'nvt', - displayName: _l('Nvt'), - }, - { - name: 'hosts', - displayName: _l('Hosts'), - }, - { - name: 'port', - displayName: _l('Location'), - }, - { - name: 'severity', - displayName: _l('From'), - }, - { - name: 'newSeverity', - displayName: _l('To'), - }, - { - name: 'active', - displayName: _l('Active'), - }, -]; +import useTranslation from 'web/hooks/useTranslation'; +import useCapabilities from 'web/utils/useCapabilities'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; + +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; const OverridesFilterDialogComponent = ({ - capabilities, - filter, - filterName, - filterstring, - saveNamedFilter, - onFilterStringChange, - onFilterValueChange, - onSearchTermChange, - onSortOrderChange, - onSortByChange, - onValueChange, + filter: initialFilter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, }) => { - if (!filter) { - return null; - } + const [_] = useTranslation(); + const capabilities = useCapabilities(); + const filterDialogProps = useFilterDialog(initialFilter); + const [handleSave] = useFilterDialogSave( + 'override', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'text', + displayName: _('Text'), + }, + { + name: 'nvt', + displayName: _('Nvt'), + }, + { + name: 'hosts', + displayName: _('Hosts'), + }, + { + name: 'port', + displayName: _('Location'), + }, + { + name: 'severity', + displayName: _('From'), + }, + { + name: 'newSeverity', + displayName: _('To'), + }, + { + name: 'active', + displayName: _('Active'), + }, + ]; + + const { + filterString, + filter, + filterName, + saveNamedFilter, + onFilterStringChange, + onFilterValueChange, + onSearchTermChange, + onSortByChange, + onSortOrderChange, + onValueChange, + } = filterDialogProps; return ( - + @@ -131,15 +146,18 @@ const OverridesFilterDialogComponent = ({ onValueChange={onValueChange} /> )} - + ); }; -OverridesFilterDialogComponent.propTypes = FilterDialogPropTypes; +OverridesFilterDialogComponent.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; -export default compose( - withCapabilities, - withFilterDialog(), -)(OverridesFilterDialogComponent); +export default OverridesFilterDialogComponent; // vim: set ts=2 sw=2 tw=80: diff --git a/src/web/pages/permissions/filterdialog.jsx b/src/web/pages/permissions/filterdialog.jsx new file mode 100644 index 0000000000..78fbfe207f --- /dev/null +++ b/src/web/pages/permissions/filterdialog.jsx @@ -0,0 +1,81 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const PermissionsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'permission', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'description', + displayName: _('Description'), + }, + { + name: 'type', + displayName: _('Resource Type'), + }, + { + name: '_resource', + displayName: _('Resource'), + }, + { + name: 'subject_type', + displayName: _('Subject Type'), + }, + { + name: '_subject', + displayName: _('Subject'), + }, + ]; + + return ( + + + + ); +}; + +PermissionsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default PermissionsFilterDialog; diff --git a/src/web/pages/permissions/listpage.js b/src/web/pages/permissions/listpage.js index 2f2a73e11e..2277bfb090 100644 --- a/src/web/pages/permissions/listpage.js +++ b/src/web/pages/permissions/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {PERMISSIONS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,19 +31,22 @@ import PermissionIcon from 'web/components/icon/permissionicon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, selector as entitiesSelector, } from 'web/store/entities/permissions'; -import Table, {SORT_FIELDS} from './table'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; +import Table from './table'; import PermissionComponent from './component'; +import FilterDialog from '../filters/dialog'; -const ToolBarIcons = withCapabilities( - ({capabilities, onPermissionCreateClick}) => ( +const ToolBarIcons = ({onPermissionCreateClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( )} - ), -); + ); +}; ToolBarIcons.propTypes = { onPermissionCreateClick: PropTypes.func, }; -const FilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - -const Page = ({onChanged, onDownloaded, onError, onInteraction, ...props}) => ( - - {({clone, create, delete: delete_func, download, edit}) => ( - - - } - table={Table} - filterEditDialog={FilterDialog} - filtersFilter={PERMISSIONS_FILTER_FILTER} - title={_('Permissions')} - toolBarIcons={ToolBarIcons} - onError={onError} - onInteraction={onInteraction} - onPermissionCloneClick={clone} - onPermissionCreateClick={create} - onPermissionDeleteClick={delete_func} - onPermissionDownloadClick={download} - onPermissionEditClick={edit} - /> - - )} - -); +const Page = ({onChanged, onDownloaded, onError, onInteraction, ...props}) => { + const [_] = useTranslation(); + return ( + + {({clone, create, delete: delete_func, download, edit}) => ( + + + } + table={Table} + filterEditDialog={FilterDialog} + filtersFilter={PERMISSIONS_FILTER_FILTER} + title={_('Permissions')} + toolBarIcons={ToolBarIcons} + onError={onError} + onInteraction={onInteraction} + onPermissionCloneClick={clone} + onPermissionCreateClick={create} + onPermissionDeleteClick={delete_func} + onPermissionDownloadClick={download} + onPermissionEditClick={edit} + /> + + )} + + ); +}; Page.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/policies/listpage.js b/src/web/pages/policies/listpage.js index 71434e9ef5..969c16842b 100644 --- a/src/web/pages/policies/listpage.js +++ b/src/web/pages/policies/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {RESET_FILTER, SCANCONFIGS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -40,11 +37,16 @@ import { selector as entitiesSelector, } from 'web/store/entities/policies'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; + import PoliciesComponent from './component'; import Table from './table'; -export const ToolBarIcons = withCapabilities( - ({capabilities, onPolicyCreateClick, onPolicyImportClick}) => ( +export const ToolBarIcons = ({onPolicyCreateClick, onPolicyImportClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( )} - ), -); + ); +}; ToolBarIcons.propTypes = { onPolicyCreateClick: PropTypes.func.isRequired, @@ -72,51 +74,54 @@ const PoliciesPage = ({ onError, onInteraction, ...props -}) => ( - - {({ - clone, - create, - createAudit, - delete: deleteFunc, - download, - edit, - import: importFunc, - }) => ( - - - } - table={Table} - title={_('Policies')} - toolBarIcons={ToolBarIcons} - onError={onError} - onInteraction={onInteraction} - onPolicyImportClick={importFunc} - onPolicyCloneClick={clone} - onPolicyCreateClick={create} - onCreateAuditClick={createAudit} - onPolicyDeleteClick={deleteFunc} - onPolicyDownloadClick={download} - onPolicyEditClick={edit} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({ + clone, + create, + createAudit, + delete: deleteFunc, + download, + edit, + import: importFunc, + }) => ( + + + } + table={Table} + title={_('Policies')} + toolBarIcons={ToolBarIcons} + onError={onError} + onInteraction={onInteraction} + onPolicyImportClick={importFunc} + onPolicyCloneClick={clone} + onPolicyCreateClick={create} + onCreateAuditClick={createAudit} + onPolicyDeleteClick={deleteFunc} + onPolicyDownloadClick={download} + onPolicyEditClick={edit} + /> + + )} + + ); +}; PoliciesPage.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/portlists/filterdialog.js b/src/web/pages/portlists/filterdialog.js index 1b912265e8..0eb4ed74b5 100644 --- a/src/web/pages/portlists/filterdialog.js +++ b/src/web/pages/portlists/filterdialog.js @@ -15,31 +15,71 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {_l} from 'gmp/locale/lang'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; +import PropTypes from 'web/utils/proptypes'; -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'total', - displayName: _l('Port Counts: Total'), - }, - { - name: 'tcp', - displayName: _l('Port Counts: TCP'), - }, - { - name: 'udp', - displayName: _l('Port Counts: UDP'), - }, -]; +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); +import useTranslation from 'web/hooks/useTranslation'; -// vim: set ts=2 sw=2 tw=80: +const PortListsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'portlist', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'total', + displayName: _('Port Counts: Total'), + }, + { + name: 'tcp', + displayName: _('Port Counts: TCP'), + }, + { + name: 'udp', + displayName: _('Port Counts: UDP'), + }, + ]; + return ( + + + + ); +}; + +PortListsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default PortListsFilterDialog; diff --git a/src/web/pages/portlists/listpage.js b/src/web/pages/portlists/listpage.js index ba6ffdc321..327ae66fa8 100644 --- a/src/web/pages/portlists/listpage.js +++ b/src/web/pages/portlists/listpage.js @@ -17,15 +17,12 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {PORTLISTS_FILTER_FILTER} from 'gmp/models/filter'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -40,12 +37,17 @@ import { selector as entitiesSelector, } from 'web/store/entities/portlists'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; + import PortListComponent from './component'; import PortListsFilterDialog from './filterdialog'; import PortListsTable from './table'; -const ToolBarIcons = withCapabilities( - ({capabilities, onPortListCreateClick, onPortListImportClick}) => ( +const ToolBarIcons = ({onPortListCreateClick, onPortListImportClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( - ), -); + ); +}; ToolBarIcons.propTypes = { onPortListCreateClick: PropTypes.func.isRequired, @@ -74,55 +76,58 @@ const PortListsPage = ({ onError, onInteraction, ...props -}) => ( - - {({ - clone, - create, - delete: delete_func, - download, - edit, - save, - import: import_func, - }) => ( - - - } - table={PortListsTable} - title={_('Portlists')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onDownloaded={onDownloaded} - onError={onError} - onInteraction={onInteraction} - onPortListCloneClick={clone} - onPortListCreateClick={create} - onPortListDeleteClick={delete_func} - onPortListDownloadClick={download} - onPortListEditClick={edit} - onPortListSaveClick={save} - onPortListImportClick={import_func} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({ + clone, + create, + delete: delete_func, + download, + edit, + save, + import: import_func, + }) => ( + + + } + table={PortListsTable} + title={_('Portlists')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onDownloaded={onDownloaded} + onError={onError} + onInteraction={onInteraction} + onPortListCloneClick={clone} + onPortListCreateClick={create} + onPortListDeleteClick={delete_func} + onPortListDownloadClick={download} + onPortListEditClick={edit} + onPortListSaveClick={save} + onPortListImportClick={import_func} + /> + + )} + + ); +}; PortListsPage.propTypes = { onChanged: PropTypes.func.isRequired, @@ -135,5 +140,3 @@ export default withEntitiesContainer('portlist', { entitiesSelector, loadEntities, })(PortListsPage); - -// vim: set ts=2 sw=2 tw=80: diff --git a/src/web/pages/reportconfigs/filterdialog.jsx b/src/web/pages/reportconfigs/filterdialog.jsx new file mode 100644 index 0000000000..5e8b7a85ef --- /dev/null +++ b/src/web/pages/reportconfigs/filterdialog.jsx @@ -0,0 +1,65 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const ReportConfigsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'report_config', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'report_format', + displayName: _('Report Format'), + }, + ]; + + return ( + + + + ); +}; + +ReportConfigsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default ReportConfigsFilterDialog; diff --git a/src/web/pages/reportconfigs/listpage.js b/src/web/pages/reportconfigs/listpage.js index fdf71e5607..8958d4b335 100644 --- a/src/web/pages/reportconfigs/listpage.js +++ b/src/web/pages/reportconfigs/listpage.js @@ -17,35 +17,36 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {REPORT_CONFIGS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; import ManualIcon from 'web/components/icon/manualicon'; import ReportConfigIcon from 'web/components/icon/reportconfigicon'; +import NewIcon from 'web/components/icon/newicon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, selector as entitiesSelector, } from 'web/store/entities/reportconfigs'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; + import ReportConfigComponent from './component'; -import ReportConfigsTable, {SORT_FIELDS} from './table'; -import NewIcon from 'web/components/icon/newicon'; +import ReportConfigsTable from './table'; +import ReportConfigsFilterDialog from './filterdialog'; -const ToolBarIcons = withCapabilities( - ({capabilities, onReportConfigCreateClick}) => ( +const ToolBarIcons = ({onReportConfigCreateClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( )} - ), -); + ); +}; ToolBarIcons.propTypes = { onReportConfigCreateClick: PropTypes.func.isRequired, }; -const ReportConfigsFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - const ReportConfigsPage = ({ onChanged, onDownloaded, @@ -77,53 +74,49 @@ const ReportConfigsPage = ({ onInteraction, showSuccess, ...props -}) => ( - - {({ - clone, - delete: delete_func, - download, - edit, - create: create_func, - save, - }) => { - return ( - - - } - table={ReportConfigsTable} - title={_('Report Configs')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onError={onError} - onInteraction={onInteraction} - onReportConfigCreateClick={create_func} - onReportConfigDeleteClick={delete_func} - onReportConfigCloneClick={clone} - onReportConfigDownloadClick={download} - onReportConfigEditClick={edit} - /> - - ); - }} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({clone, delete: delete_func, download, edit, create: create_func}) => { + return ( + + + } + table={ReportConfigsTable} + title={_('Report Configs')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onError={onError} + onInteraction={onInteraction} + onReportConfigCreateClick={create_func} + onReportConfigDeleteClick={delete_func} + onReportConfigCloneClick={clone} + onReportConfigDownloadClick={download} + onReportConfigEditClick={edit} + /> + + ); + }} + + ); +}; ReportConfigsPage.propTypes = { showSuccess: PropTypes.func.isRequired, diff --git a/src/web/pages/reportformats/filterdialog.jsx b/src/web/pages/reportformats/filterdialog.jsx new file mode 100644 index 0000000000..2579857139 --- /dev/null +++ b/src/web/pages/reportformats/filterdialog.jsx @@ -0,0 +1,76 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const ReportFormatsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'report_format', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'extension', + displayName: _('Extension'), + }, + { + name: 'content_type', + displayName: _('Content Type'), + }, + { + name: 'trust', + displayName: _('Trust (Last Verified)'), + }, + { + name: 'active', + displayName: _('Active'), + }, + ]; + return ( + + + + ); +}; + +ReportFormatsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default ReportFormatsFilterDialog; diff --git a/src/web/pages/reportformats/listpage.js b/src/web/pages/reportformats/listpage.js index fab7d1b57c..b2bcd51f25 100644 --- a/src/web/pages/reportformats/listpage.js +++ b/src/web/pages/reportformats/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {REPORT_FORMATS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,18 +31,22 @@ import ReportFormatIcon from 'web/components/icon/reportformaticon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, selector as entitiesSelector, } from 'web/store/entities/reportformats'; +import useTranslation from 'web/hooks/useTranslation'; +import useCapabilities from 'web/utils/useCapabilities'; + import ReportFormatComponent from './component'; -import ReportFormatsTable, {SORT_FIELDS} from './table'; +import ReportFormatsTable from './table'; +import ReportFormatsFilterDialog from './filterdialog'; -const ToolBarIcons = withCapabilities( - ({capabilities, onReportFormatImportClick}) => ( +const ToolBarIcons = ({onReportFormatImportClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( )} - ), -); + ); +}; ToolBarIcons.propTypes = { onReportFormatImportClick: PropTypes.func.isRequired, }; -const ReportFormatsFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - const ReportFormatsPage = ({ onChanged, onError, onInteraction, showSuccess, ...props -}) => ( - - {({delete: delete_func, edit, import: import_func, save}) => ( - - - } - table={ReportFormatsTable} - title={_('Report Formats')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onError={onError} - onInteraction={onInteraction} - onReportFormatImportClick={import_func} - onReportFormatDeleteClick={delete_func} - onReportFormatEditClick={edit} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({delete: delete_func, edit, import: import_func}) => ( + + + } + table={ReportFormatsTable} + title={_('Report Formats')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onError={onError} + onInteraction={onInteraction} + onReportFormatImportClick={import_func} + onReportFormatDeleteClick={delete_func} + onReportFormatEditClick={edit} + /> + + )} + + ); +}; ReportFormatsPage.propTypes = { showSuccess: PropTypes.func.isRequired, diff --git a/src/web/pages/reports/deltadetailspage.js b/src/web/pages/reports/deltadetailspage.js index f7f96e73ad..ed381a7be6 100644 --- a/src/web/pages/reports/deltadetailspage.js +++ b/src/web/pages/reports/deltadetailspage.js @@ -80,7 +80,7 @@ import withGmp from 'web/utils/withGmp'; import TargetComponent from '../targets/component'; import Page from './deltadetailscontent'; -import FilterDialog from './detailsfilterdialog'; +import ReportDetailsFilterDialog from './detailsfilterdialog'; const log = logger.getLogger('web.pages.report.deltadetailspage'); @@ -531,7 +531,7 @@ class DeltaReportDetails extends React.Component { )} {showFilterDialog && ( - { - const result_hosts_only = filter.get('result_hosts_only'); - const handleRemoveLevels = () => onFilterChange(filter.delete('levels')); + const [_] = useTranslation(); + const capabilities = useCapabilities(); + const filterDialogProps = useFilterDialog(initialFilter); + const [handleSave] = useFilterDialogSave( + 'result', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const { + filter, + filterName, + filterString, + saveNamedFilter, + onFilterChange, + onFilterValueChange, + onFilterStringChange, + onSearchTermChange, + onValueChange, + } = filterDialogProps; + const resultHostsOnly = filter.get('result_hosts_only'); + const handleRemoveLevels = () => + onFilterChange(filter.copy().delete('levels')); return ( - + @@ -84,15 +98,14 @@ const FilterDialog = ({ onChange={onFilterValueChange} /> - - - + )} - + ); }; -FilterDialog.propTypes = FilterDialogPropTypes; +ReportDetailsFilterDialog.propTypes = { + delta: PropTypes.bool, + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; -export default compose(withCapabilities, withFilterDialog())(FilterDialog); +export default ReportDetailsFilterDialog; // vim: set ts=2 sw=2 tw=80: diff --git a/src/web/pages/reports/detailspage.js b/src/web/pages/reports/detailspage.js index fa3846794e..45ca84f83a 100644 --- a/src/web/pages/reports/detailspage.js +++ b/src/web/pages/reports/detailspage.js @@ -90,7 +90,7 @@ import TargetComponent from '../targets/component'; import PageTitle from 'web/components/layout/pagetitle'; import Page from './detailscontent'; -import FilterDialog from './detailsfilterdialog'; +import ReportDetailsFilterDialog from './detailsfilterdialog'; import {pageFilter as setPageFilter} from 'web/store/pages/actions'; import getPage from 'web/store/pages/selectors'; @@ -653,12 +653,11 @@ class ReportDetails extends React.Component { )} {showFilterDialog && ( - )} diff --git a/src/web/pages/reports/filterdialog.js b/src/web/pages/reports/filterdialog.js index cf6ff73f1c..afa14c820f 100644 --- a/src/web/pages/reports/filterdialog.js +++ b/src/web/pages/reports/filterdialog.js @@ -17,14 +17,7 @@ */ import React from 'react'; -import {_l, _} from 'gmp/locale/lang'; - -import Layout from 'web/components/layout/layout'; - -import compose from 'web/utils/compose'; -import withCapabilities from 'web/utils/withCapabilities'; - -/* eslint-disable max-len */ +import PropTypes from 'web/utils/proptypes'; import BooleanFilterGroup from 'web/components/powerfilter/booleanfiltergroup'; import CreateNamedFilterGroup from 'web/components/powerfilter/createnamedfiltergroup'; @@ -33,75 +26,92 @@ import FirstResultGroup from 'web/components/powerfilter/firstresultgroup'; import MinQodGroup from 'web/components/powerfilter/minqodgroup'; import ResultsPerPageGroup from 'web/components/powerfilter/resultsperpagegroup'; import SortByGroup from 'web/components/powerfilter/sortbygroup'; -import withFilterDialog from 'web/components/powerfilter/withFilterDialog'; -import FilterDialogPropTypes from 'web/components/powerfilter/dialogproptypes'; import SeverityValuesGroup from 'web/components/powerfilter/severityvaluesgroup'; import FilterSearchGroup from 'web/components/powerfilter/filtersearchgroup'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; -/* eslint-enable */ - -const SORT_FIELDS = [ - { - name: 'date', - displayName: _l('Date'), - }, - { - name: 'status', - displayName: _l('Status'), - }, - { - name: 'task', - displayName: _l('Task'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, - { - name: 'high', - displayName: _l('Scan Results: High'), - }, - { - name: 'medium', - displayName: _l('Scan Results: Medium'), - }, - { - name: 'low', - displayName: _l('Scan Results: Low'), - }, - { - name: 'log', - displayName: _l('Scan Results: Log'), - }, - { - name: 'false_positive', - displayName: _l('Scan Results: False Positive'), - }, -]; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; const ReportFilterDialogComponent = ({ - capabilities, - filter, - filterName, - filterNameValid, - filterstring, - saveNamedFilter, - onFilterStringChange, - onFilterValueChange, - onSearchTermChange, - onSortByChange, - onSortOrderChange, - onValueChange, + filter: initialFilter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, }) => { - if (!filter) { - return null; - } + const capabilities = useCapabilities(); + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(initialFilter); + const [handleSave] = useFilterDialogSave( + 'report', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const SORT_FIELDS = [ + { + name: 'date', + displayName: _('Date'), + }, + { + name: 'status', + displayName: _('Status'), + }, + { + name: 'task', + displayName: _('Task'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + { + name: 'high', + displayName: _('Scan Results: High'), + }, + { + name: 'medium', + displayName: _('Scan Results: Medium'), + }, + { + name: 'low', + displayName: _('Scan Results: Low'), + }, + { + name: 'log', + displayName: _('Scan Results: Log'), + }, + { + name: 'false_positive', + displayName: _('Scan Results: False Positive'), + }, + ]; + + const { + filter, + filterName, + filterString, + saveNamedFilter, + onFilterStringChange, + onFilterValueChange, + onSearchTermChange, + onSortByChange, + onSortOrderChange, + onValueChange, + } = filterDialogProps; return ( - + @@ -151,15 +161,18 @@ const ReportFilterDialogComponent = ({ onValueChange={onValueChange} /> )} - + ); }; -ReportFilterDialogComponent.propTypes = FilterDialogPropTypes; +ReportFilterDialogComponent.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; -export default compose( - withCapabilities, - withFilterDialog(), -)(ReportFilterDialogComponent); +export default ReportFilterDialogComponent; // vim: set ts=2 sw=2 tw=80: diff --git a/src/web/pages/results/filterdialog.js b/src/web/pages/results/filterdialog.js index c8f30da98a..bbcfff0dfb 100644 --- a/src/web/pages/results/filterdialog.js +++ b/src/web/pages/results/filterdialog.js @@ -17,14 +17,7 @@ */ import React from 'react'; -import {_, _l} from 'gmp/locale/lang'; - -import Layout from 'web/components/layout/layout'; - -import compose from 'web/utils/compose'; -import withCapabilities from 'web/utils/withCapabilities'; - -/* eslint-disable max-len */ +import PropTypes from 'web/utils/proptypes'; import BooleanFilterGroup from 'web/components/powerfilter/booleanfiltergroup'; import CreateNamedFilterGroup from 'web/components/powerfilter/createnamedfiltergroup'; @@ -35,73 +28,96 @@ import ResultsPerPageGroup from 'web/components/powerfilter/resultsperpagegroup' import SortByGroup from 'web/components/powerfilter/sortbygroup'; import SeverityLevelsGroup from 'web/components/powerfilter/severitylevelsgroup'; import SolutionTypeGroup from 'web/components/powerfilter/solutiontypegroup'; -import withFilterDialog from 'web/components/powerfilter/withFilterDialog'; -import FilterDialogPropTypes from 'web/components/powerfilter/dialogproptypes'; import SeverityValuesGroup from 'web/components/powerfilter/severityvaluesgroup'; import FilterSearchGroup from 'web/components/powerfilter/filtersearchgroup'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; + +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -/* eslint-enable */ - -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Vulnerability'), - }, - { - name: 'solution_type', - displayName: _l('Solution type'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, - { - name: 'qod', - displayName: _l('QoD'), - }, - { - name: 'host', - displayName: _l('Host (IP)'), - }, - { - name: 'hostname', - displayName: _l('Host (Name)'), - }, - { - name: 'location', - displayName: _l('Location'), - }, - { - name: 'created', - displayName: _l('Created'), - }, - { - name: 'modified', - displayName: _l('Modified'), - }, -]; - -const ResultsFilterDialogComponent = ({ - capabilities, - filter, - filterName, - filterNameValid, - filterstring, - saveNamedFilter, - onFilterChange, - onFilterStringChange, - onFilterValueChange, - onSearchTermChange, - onSortByChange, - onSortOrderChange, - onValueChange, +import useTranslation from 'web/hooks/useTranslation'; +import useCapabilities from 'web/utils/useCapabilities'; + +const ResultsFilterDialog = ({ + filter: initialFilter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, }) => { - const handleRemoveLevels = () => onFilterChange(filter.delete('levels')); + const [_] = useTranslation(); + const capabilities = useCapabilities(); + const filterDialogProps = useFilterDialog(initialFilter); + const [handleSave] = useFilterDialogSave( + 'result', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Vulnerability'), + }, + { + name: 'solution_type', + displayName: _('Solution type'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + { + name: 'qod', + displayName: _('QoD'), + }, + { + name: 'host', + displayName: _('Host (IP)'), + }, + { + name: 'hostname', + displayName: _('Host (Name)'), + }, + { + name: 'location', + displayName: _('Location'), + }, + { + name: 'created', + displayName: _('Created'), + }, + { + name: 'modified', + displayName: _('Modified'), + }, + ]; + + const { + filter, + filterName, + filterString, + saveNamedFilter, + onFilterChange, + onFilterValueChange, + onFilterStringChange, + onSearchTermChange, + onSortByChange, + onSortOrderChange, + onValueChange, + } = filterDialogProps; + + const handleRemoveLevels = () => + onFilterChange(filter.copy().delete('levels')); return ( - + @@ -180,15 +196,18 @@ const ResultsFilterDialogComponent = ({ onValueChange={onValueChange} /> )} - + ); }; -ResultsFilterDialogComponent.propTypes = FilterDialogPropTypes; +ResultsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; -export default compose( - withCapabilities, - withFilterDialog(), -)(ResultsFilterDialogComponent); +export default ResultsFilterDialog; // vim: set ts=2 sw=2 tw=80: diff --git a/src/web/pages/roles/filterdialog.jsx b/src/web/pages/roles/filterdialog.jsx new file mode 100644 index 0000000000..158792d303 --- /dev/null +++ b/src/web/pages/roles/filterdialog.jsx @@ -0,0 +1,60 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const RolesFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'role', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + ]; + return ( + + + + ); +}; + +RolesFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default RolesFilterDialog; diff --git a/src/web/pages/roles/listpage.js b/src/web/pages/roles/listpage.js index 72888223f5..2bea23bbb0 100644 --- a/src/web/pages/roles/listpage.js +++ b/src/web/pages/roles/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {ROLES_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,81 +31,86 @@ import RoleIcon from 'web/components/icon/roleicon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, selector as entitiesSelector, } from 'web/store/entities/roles'; -import RoleComponent from './component'; -import Table, {SORT_FIELDS} from './table'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; -const ToolBarIcons = withCapabilities(({capabilities, onRoleCreateClick}) => ( - - - {capabilities.mayCreate('role') && ( - - )} - -)); +import RoleComponent from './component'; +import Table from './table'; +import RolesFilterDialog from './filterdialog'; + +const ToolBarIcons = ({onRoleCreateClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( + + + {capabilities.mayCreate('role') && ( + + )} + + ); +}; ToolBarIcons.propTypes = { onRoleCreateClick: PropTypes.func.isRequired, }; -const RolesFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - const RolesPage = ({ onChanged, onDownloaded, onError, onInteraction, ...props -}) => ( - - {({clone, create, delete: delete_func, download, edit, save}) => ( - - - } - table={Table} - title={_('Roles')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onDownloaded={onDownloaded} - onError={onError} - onInteraction={onInteraction} - onRoleCloneClick={clone} - onRoleCreateClick={create} - onRoleDeleteClick={delete_func} - onRoleDownloadClick={download} - onRoleEditClick={edit} - onRoleSaveClick={save} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({clone, create, delete: delete_func, download, edit, save}) => ( + + + } + table={Table} + title={_('Roles')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onDownloaded={onDownloaded} + onError={onError} + onInteraction={onInteraction} + onRoleCloneClick={clone} + onRoleCreateClick={create} + onRoleDeleteClick={delete_func} + onRoleDownloadClick={download} + onRoleEditClick={edit} + onRoleSaveClick={save} + /> + + )} + + ); +}; RolesPage.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/scanners/filterdialog.jsx b/src/web/pages/scanners/filterdialog.jsx new file mode 100644 index 0000000000..cf985fd785 --- /dev/null +++ b/src/web/pages/scanners/filterdialog.jsx @@ -0,0 +1,76 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const ScannersFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'scanner', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'host', + displayName: _('Host'), + }, + { + name: 'port', + displayName: _('Port'), + width: '20%', + }, + { + name: 'type', + displayName: _('Type'), + }, + { + name: 'credential', + displayName: _('Credential'), + }, + ]; + return ( + + + + ); +}; + +ScannersFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default ScannersFilterDialog; diff --git a/src/web/pages/scanners/listpage.js b/src/web/pages/scanners/listpage.js index f696bcf115..41476e9519 100644 --- a/src/web/pages/scanners/listpage.js +++ b/src/web/pages/scanners/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {SCANNERS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page.js'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,45 +31,42 @@ import ScannerIcon from 'web/components/icon/scannericon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, selector as entitiesSelector, } from 'web/store/entities/scanners'; import useGmp from 'web/utils/useGmp'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; import ScannerComponent from './component'; -import ScannersTable, {SORT_FIELDS} from './table'; - -const ToolBarIcons = withCapabilities( - ({capabilities, onScannerCreateClick}) => { - const gmp = useGmp(); - return ( - - - {capabilities.mayCreate('scanner') && - gmp.settings.enableGreenboneSensor && ( - - )} - - ); - }, -); +import ScannersTable from './table'; +import ScannersFilterDialog from './filterdialog'; + +const ToolBarIcons = ({onScannerCreateClick}) => { + const gmp = useGmp(); + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( + + + {capabilities.mayCreate('scanner') && + gmp.settings.enableGreenboneSensor && ( + + )} + + ); +}; ToolBarIcons.propTypes = { onScannerCreateClick: PropTypes.func.isRequired, }; -const ScannersFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - const ScannersPage = ({ onChanged, onDownloaded, @@ -80,66 +74,69 @@ const ScannersPage = ({ onInteraction, showSuccess, ...props -}) => ( - { - onChanged(); - showSuccess(_('Scanner Verified')); - }} - onVerifyError={onError} - > - {({ - clone, - create, - delete: delete_func, - download, - downloadcertificate, - downloadcredential, - edit, - save, - verify, - }) => ( - - - } - table={ScannersTable} - title={_('Scanners')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onDownloaded={onDownloaded} - onError={onError} - onInteraction={onInteraction} - onScannerCertificateDownloadClick={downloadcertificate} - onScannerCloneClick={clone} - onScannerCreateClick={create} - onScannerCredentialDownloadClick={downloadcredential} - onScannerDeleteClick={delete_func} - onScannerDownloadClick={download} - onScannerEditClick={edit} - onScannerSaveClick={save} - onScannerVerifyClick={verify} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + { + onChanged(); + showSuccess(_('Scanner Verified')); + }} + onVerifyError={onError} + > + {({ + clone, + create, + delete: delete_func, + download, + downloadcertificate, + downloadcredential, + edit, + save, + verify, + }) => ( + + + } + table={ScannersTable} + title={_('Scanners')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onDownloaded={onDownloaded} + onError={onError} + onInteraction={onInteraction} + onScannerCertificateDownloadClick={downloadcertificate} + onScannerCloneClick={clone} + onScannerCreateClick={create} + onScannerCredentialDownloadClick={downloadcredential} + onScannerDeleteClick={delete_func} + onScannerDownloadClick={download} + onScannerEditClick={edit} + onScannerSaveClick={save} + onScannerVerifyClick={verify} + /> + + )} + + ); +}; ScannersPage.propTypes = { showSuccess: PropTypes.func.isRequired, diff --git a/src/web/pages/schedules/filterdialog.jsx b/src/web/pages/schedules/filterdialog.jsx new file mode 100644 index 0000000000..f6afcfab03 --- /dev/null +++ b/src/web/pages/schedules/filterdialog.jsx @@ -0,0 +1,75 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const SchedulesFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'schedule', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'first_run', + displayName: _('First Run'), + }, + { + name: 'next_run', + displayName: _('Next Run'), + }, + { + name: 'period', + displayName: _('Recurrence'), + }, + { + name: 'duration', + displayName: _('Duration'), + }, + ]; + return ( + + + + ); +}; + +SchedulesFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default SchedulesFilterDialog; diff --git a/src/web/pages/schedules/listpage.js b/src/web/pages/schedules/listpage.js index 887988e56e..169b711f86 100644 --- a/src/web/pages/schedules/listpage.js +++ b/src/web/pages/schedules/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {SCHEDULES_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,18 +31,22 @@ import ScheduleIcon from 'web/components/icon/scheduleicon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, selector as entitiesSelector, } from 'web/store/entities/schedules'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; + import ScheduleComponent from './component'; -import SchedulesTable, {SORT_FIELDS} from './table'; +import SchedulesTable from './table'; +import SchedulesFilterDialog from './filterdialog'; -export const ToolBarIcons = withCapabilities( - ({capabilities, onScheduleCreateClick}) => ( +export const ToolBarIcons = ({onScheduleCreateClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + return ( )} - ), -); + ); +}; ToolBarIcons.propTypes = { onScheduleCreateClick: PropTypes.func.isRequired, }; -const ScheduleFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - const SchedulesPage = ({ onChanged, onDownloaded, onError, onInteraction, ...props -}) => ( - - {({clone, create, delete: delete_func, download, edit, save}) => ( - - - } - table={SchedulesTable} - title={_('Schedules')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onDownloaded={onDownloaded} - onError={onError} - onInteraction={onInteraction} - onScheduleCloneClick={clone} - onScheduleCreateClick={create} - onScheduleDeleteClick={delete_func} - onScheduleDownloadClick={download} - onScheduleEditClick={edit} - onScheduleSaveClick={save} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({clone, create, delete: delete_func, download, edit, save}) => ( + + + } + table={SchedulesTable} + title={_('Schedules')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onDownloaded={onDownloaded} + onError={onError} + onInteraction={onInteraction} + onScheduleCloneClick={clone} + onScheduleCreateClick={create} + onScheduleDeleteClick={delete_func} + onScheduleDownloadClick={download} + onScheduleEditClick={edit} + onScheduleSaveClick={save} + /> + + )} + + ); +}; SchedulesPage.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/tags/filterdialog.jsx b/src/web/pages/tags/filterdialog.jsx new file mode 100644 index 0000000000..0c4b96e6f9 --- /dev/null +++ b/src/web/pages/tags/filterdialog.jsx @@ -0,0 +1,75 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const TagsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'tag', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'value', + displayName: _('Value'), + }, + { + name: 'active', + displayName: _('Active'), + }, + { + name: 'resource_type', + displayName: _('Resource Type'), + }, + { + name: 'modified', + displayName: _('Modified'), + }, + ]; + return ( + + + + ); +}; + +TagsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default TagsFilterDialog; diff --git a/src/web/pages/tags/listpage.js b/src/web/pages/tags/listpage.js index 04ccf6fb08..5b0449175b 100644 --- a/src/web/pages/tags/listpage.js +++ b/src/web/pages/tags/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import {_, _l} from 'gmp/locale/lang'; - import {TAGS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import EntitiesPage from 'web/entities/page'; import withEntitiesContainer from 'web/entities/withEntitiesContainer'; @@ -34,125 +31,102 @@ import TagIcon from 'web/components/icon/tagicon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, selector as entitiesSelector, } from 'web/store/entities/tags'; +import useTranslation from 'web/hooks/useTranslation'; +import useCapabilities from 'web/utils/useCapabilities'; + import TagComponent from './component'; import TagsTable from './table'; - -export const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - width: '30%', - }, - { - name: 'value', - displayName: _l('Value'), - width: '30%', - }, - { - name: 'active', - displayName: _l('Active'), - width: '8%', - }, - { - name: 'resource_type', - displayName: _l('Resource Type'), - width: '8%', - }, - { - name: 'modified', - displayName: _l('Modified'), - width: '8%', - }, -]; - -const ToolBarIcons = withCapabilities(({capabilities, onTagCreateClick}) => ( - - - {capabilities.mayCreate('tag') && ( - - )} - -)); +import TagsFilterDialog from './filterdialog'; + +const ToolBarIcons = ({onTagCreateClick}) => { + const [_] = useTranslation(); + const capabilities = useCapabilities(); + return ( + + + {capabilities.mayCreate('tag') && ( + + )} + + ); +}; ToolBarIcons.propTypes = { onTagCreateClick: PropTypes.func.isRequired, }; -const TagsFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - const TagsPage = ({ onChanged, onDownloaded, onError, onInteraction, ...props -}) => ( - - {({ - clone, - create, - delete: delete_func, - download, - edit, - save, - enable, - disable, - }) => ( - - - } - table={TagsTable} - tags={false} - title={_('Tags')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onDownloaded={onDownloaded} - onError={onError} - onInteraction={onInteraction} - onTagCloneClick={clone} - onTagCreateClick={create} - onTagDeleteClick={delete_func} - onTagDownloadClick={download} - onTagEditClick={edit} - onTagSaveClick={save} - onTagEnableClick={enable} - onTagDisableClick={disable} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({ + clone, + create, + delete: delete_func, + download, + edit, + save, + enable, + disable, + }) => ( + + + } + table={TagsTable} + tags={false} + title={_('Tags')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onDownloaded={onDownloaded} + onError={onError} + onInteraction={onInteraction} + onTagCloneClick={clone} + onTagCreateClick={create} + onTagDeleteClick={delete_func} + onTagDownloadClick={download} + onTagEditClick={edit} + onTagSaveClick={save} + onTagEnableClick={enable} + onTagDisableClick={disable} + /> + + )} + + ); +}; TagsPage.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/targets/filterdialog.js b/src/web/pages/targets/filterdialog.js index 4cdb074412..2812b5b990 100644 --- a/src/web/pages/targets/filterdialog.js +++ b/src/web/pages/targets/filterdialog.js @@ -1,61 +1,87 @@ -/* Copyright (C) 2017-2022 Greenbone AG +/* SPDX-FileCopyrightText: 2024 Greenbone AG * * SPDX-License-Identifier: AGPL-3.0-or-later - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Affero General Public License - * as published by the Free Software Foundation, either version 3 - * of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . */ -import {_l} from 'gmp/locale/lang'; -import {createFilterDialog} from '../../components/powerfilter/dialog.js'; +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'hosts', - displayName: _l('Hosts'), - }, - { - name: 'ips', - displayName: _l('IPs'), - }, - { - name: 'port_list', - displayName: _l('Port List'), - }, - { - name: 'ssh_credential', - displayName: _l('SSH Credential'), - }, - { - name: 'smb_credential', - displayName: _l('SMB Credential'), - }, - { - name: 'esxi_credential', - displayName: _l('ESXi Credential'), - }, - { - name: 'snmp_credential', - displayName: _l('SNMP Credential'), - }, -]; +const TargetsFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'target', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'hosts', + displayName: _('Hosts'), + }, + { + name: 'ips', + displayName: _('IPs'), + }, + { + name: 'port_list', + displayName: _('Port List'), + }, + { + name: 'ssh_credential', + displayName: _('SSH Credential'), + }, + { + name: 'smb_credential', + displayName: _('SMB Credential'), + }, + { + name: 'esxi_credential', + displayName: _('ESXi Credential'), + }, + { + name: 'snmp_credential', + displayName: _('SNMP Credential'), + }, + ]; + return ( + + + + ); +}; -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); +TargetsFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; -// vim: set ts=2 sw=2 tw=80: +export default TargetsFilterDialog; diff --git a/src/web/pages/targets/listpage.js b/src/web/pages/targets/listpage.js index 4db01dd9ab..562fc354e7 100644 --- a/src/web/pages/targets/listpage.js +++ b/src/web/pages/targets/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {TARGETS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import ManualIcon from 'web/components/icon/manualicon'; import NewIcon from 'web/components/icon/newicon'; @@ -39,12 +36,17 @@ import { selector as entitiesSelector, } from 'web/store/entities/targets'; +import useTranslation from 'web/hooks/useTranslation'; +import useCapabilities from 'web/utils/useCapabilities'; + import TargetsFilterDialog from './filterdialog'; import TargetsTable from './table'; import TargetComponent from './component'; -export const ToolBarIcons = withCapabilities( - ({capabilities, onTargetCreateClick}) => ( +export const ToolBarIcons = ({onTargetCreateClick}) => { + const [_] = useTranslation(); + const capabilities = useCapabilities(); + return ( )} - ), -); + ); +}; ToolBarIcons.propTypes = { onTargetCreateClick: PropTypes.func.isRequired, @@ -68,44 +70,47 @@ const TargetsPage = ({ onError, onInteraction, ...props -}) => ( - - {({clone, create, delete: delete_func, download, edit, save}) => ( - - - } - table={TargetsTable} - title={_('Targets')} - toolBarIcons={ToolBarIcons} - onChanged={onChanged} - onDownloaded={onDownloaded} - onError={onError} - onInteraction={onInteraction} - onTargetCloneClick={clone} - onTargetCreateClick={create} - onTargetDeleteClick={delete_func} - onTargetDownloadClick={download} - onTargetEditClick={edit} - onTargetSaveClick={save} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({clone, create, delete: delete_func, download, edit, save}) => ( + + + } + table={TargetsTable} + title={_('Targets')} + toolBarIcons={ToolBarIcons} + onChanged={onChanged} + onDownloaded={onDownloaded} + onError={onError} + onInteraction={onInteraction} + onTargetCloneClick={clone} + onTargetCreateClick={create} + onTargetDeleteClick={delete_func} + onTargetDownloadClick={download} + onTargetEditClick={edit} + onTargetSaveClick={save} + /> + + )} + + ); +}; TargetsPage.propTypes = { onChanged: PropTypes.func.isRequired, diff --git a/src/web/pages/tasks/filterdialog.js b/src/web/pages/tasks/filterdialog.js index ea540b66d1..cec0105def 100644 --- a/src/web/pages/tasks/filterdialog.js +++ b/src/web/pages/tasks/filterdialog.js @@ -17,14 +17,7 @@ */ import React from 'react'; -import {_l, _} from 'gmp/locale/lang'; - -import Layout from 'web/components/layout/layout'; - -import compose from 'web/utils/compose'; -import withCapabilities from 'web/utils/withCapabilities'; - -/* eslint-disable max-len */ +import PropTypes from 'web/utils/proptypes'; import BooleanFilterGroup from 'web/components/powerfilter/booleanfiltergroup'; import CreateNamedFilterGroup from 'web/components/powerfilter/createnamedfiltergroup'; @@ -33,71 +26,89 @@ import FirstResultGroup from 'web/components/powerfilter/firstresultgroup'; import MinQodGroup from 'web/components/powerfilter/minqodgroup'; import ResultsPerPageGroup from 'web/components/powerfilter/resultsperpagegroup'; import SortByGroup from 'web/components/powerfilter/sortbygroup'; -import FilterDialogPropTypes from 'web/components/powerfilter/dialogproptypes'; -import withFilterDialog from 'web/components/powerfilter/withFilterDialog'; import TaskTrendGroup from 'web/components/powerfilter/tasktrendgroup'; import SeverityValuesGroup from 'web/components/powerfilter/severityvaluesgroup'; import FilterSearchGroup from 'web/components/powerfilter/filtersearchgroup'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; + +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -/* eslint-enable */ - -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'status', - displayName: _l('Status'), - }, - { - name: 'total', - displayName: _l('Reports: Total'), - }, - { - name: 'last', - displayName: _l('Reports: Last'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, - { - name: 'trend', - displayName: _l('Trend'), - }, - { - name: 'false_positive', - displayName: _l('False Positive'), - }, - { - name: 'hosts', - displayName: _l('Number of Hosts'), - }, -]; - -const TaskFilterDialogComponent = ({ - capabilities, - filter, - filterName, - filterstring, - saveNamedFilter, - onFilterStringChange, - onFilterValueChange, - onSearchTermChange, - onSortOrderChange, - onSortByChange, - onValueChange, +import useTranslation from 'web/hooks/useTranslation'; +import useCapabilities from 'web/utils/useCapabilities'; + +const TaskFilterDialog = ({ + filter: initialFilter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, }) => { - if (!filter) { - return null; - } + const [_] = useTranslation(); + const capabilities = useCapabilities(); + const filterDialogProps = useFilterDialog(initialFilter); + const [handleSave] = useFilterDialogSave( + 'task', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'status', + displayName: _('Status'), + }, + { + name: 'total', + displayName: _('Reports: Total'), + }, + { + name: 'last', + displayName: _('Reports: Last'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + { + name: 'trend', + displayName: _('Trend'), + }, + { + name: 'false_positive', + displayName: _('False Positive'), + }, + { + name: 'hosts', + displayName: _('Number of Hosts'), + }, + ]; + + const { + filter, + filterString, + filterName, + saveNamedFilter, + onFilterStringChange, + onFilterValueChange, + onSearchTermChange, + onSortByChange, + onSortOrderChange, + onValueChange, + } = filterDialogProps; return ( - + @@ -163,15 +174,18 @@ const TaskFilterDialogComponent = ({ onValueChange={onValueChange} /> )} - + ); }; -TaskFilterDialogComponent.propTypes = FilterDialogPropTypes; +TaskFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; -export default compose( - withCapabilities, - withFilterDialog(), -)(TaskFilterDialogComponent); +export default TaskFilterDialog; // vim: set ts=2 sw=2 tw=80: diff --git a/src/web/pages/tasks/listpage.js b/src/web/pages/tasks/listpage.js index bbed3a639f..b3123042d0 100644 --- a/src/web/pages/tasks/listpage.js +++ b/src/web/pages/tasks/listpage.js @@ -17,12 +17,9 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {TASKS_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; -import withCapabilities from 'web/utils/withCapabilities'; import { loadEntities, @@ -49,6 +46,9 @@ import { import IconMenu from 'web/components/menu/iconmenu'; import MenuEntry from 'web/components/menu/menuentry'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; + import NewIconMenu from './icons/newiconmenu'; import TaskComponent from './component'; @@ -56,53 +56,52 @@ import TaskDashboard, {TASK_DASHBOARD_ID} from './dashboard'; import TaskFilterDialog from './filterdialog'; import Table from './table'; -export const ToolBarIcons = withCapabilities( - ({ - capabilities, - onAdvancedTaskWizardClick, - onModifyTaskWizardClick, - onContainerTaskCreateClick, - onTaskCreateClick, - onTaskWizardClick, - }) => { - const mayUseModifyTaskWizard = - capabilities.mayEdit('task') && - (capabilities.mayCreate('alert') || capabilities.mayCreate('schedule')); - return ( - - - {capabilities.mayOp('run_wizard') && ( - } onClick={onTaskWizardClick}> - {capabilities.mayCreate('task') && ( - - )} - {capabilities.mayCreate('task') && ( - - )} - {mayUseModifyTaskWizard && ( - - )} - - )} - - - - ); - }, -); +export const ToolBarIcons = ({ + onAdvancedTaskWizardClick, + onModifyTaskWizardClick, + onContainerTaskCreateClick, + onTaskCreateClick, + onTaskWizardClick, +}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + const mayUseModifyTaskWizard = + capabilities.mayEdit('task') && + (capabilities.mayCreate('alert') || capabilities.mayCreate('schedule')); + return ( + + + {capabilities.mayOp('run_wizard') && ( + } onClick={onTaskWizardClick}> + {capabilities.mayCreate('task') && ( + + )} + {capabilities.mayCreate('task') && ( + + )} + {mayUseModifyTaskWizard && ( + + )} + + )} + + + + ); +}; ToolBarIcons.propTypes = { onAdvancedTaskWizardClick: PropTypes.func.isRequired, @@ -120,90 +119,93 @@ const Page = ({ onDownloaded, onError, ...props -}) => ( - - {({ - clone, - create, - createcontainer, - delete: delete_func, - download, - edit, - start, - stop, - resume, - reportimport, - advancedtaskwizard, - modifytaskwizard, - taskwizard, - }) => ( - - - ( - - )} - dashboardControls={() => ( - - )} - filter={filter} - filterEditDialog={TaskFilterDialog} - filtersFilter={TASKS_FILTER_FILTER} - sectionIcon={} - table={Table} - title={_('Tasks')} - toolBarIcons={ToolBarIcons} - onAdvancedTaskWizardClick={advancedtaskwizard} - onContainerTaskCreateClick={createcontainer} - onError={onError} - onFilterChanged={onFilterChanged} - onInteraction={onInteraction} - onModifyTaskWizardClick={modifytaskwizard} - onReportImportClick={reportimport} - onTaskCloneClick={clone} - onTaskCreateClick={create} - onTaskDeleteClick={delete_func} - onTaskDownloadClick={download} - onTaskEditClick={edit} - onTaskResumeClick={resume} - onTaskStartClick={start} - onTaskStopClick={stop} - onTaskWizardClick={taskwizard} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({ + clone, + create, + createcontainer, + delete: delete_func, + download, + edit, + start, + stop, + resume, + reportimport, + advancedtaskwizard, + modifytaskwizard, + taskwizard, + }) => ( + + + ( + + )} + dashboardControls={() => ( + + )} + filter={filter} + filterEditDialog={TaskFilterDialog} + filtersFilter={TASKS_FILTER_FILTER} + sectionIcon={} + table={Table} + title={_('Tasks')} + toolBarIcons={ToolBarIcons} + onAdvancedTaskWizardClick={advancedtaskwizard} + onContainerTaskCreateClick={createcontainer} + onError={onError} + onFilterChanged={onFilterChanged} + onInteraction={onInteraction} + onModifyTaskWizardClick={modifytaskwizard} + onReportImportClick={reportimport} + onTaskCloneClick={clone} + onTaskCreateClick={create} + onTaskDeleteClick={delete_func} + onTaskDownloadClick={download} + onTaskEditClick={edit} + onTaskResumeClick={resume} + onTaskStartClick={start} + onTaskStopClick={stop} + onTaskWizardClick={taskwizard} + /> + + )} + + ); +}; Page.propTypes = { filter: PropTypes.filter, diff --git a/src/web/pages/tickets/filterdialog.js b/src/web/pages/tickets/filterdialog.js index b2af524832..1e428d2e5f 100644 --- a/src/web/pages/tickets/filterdialog.js +++ b/src/web/pages/tickets/filterdialog.js @@ -17,85 +17,134 @@ */ import React from 'react'; -import {_} from 'gmp/locale/lang'; - -import Layout from 'web/components/layout/layout'; - -import compose from 'web/utils/compose'; -import withCapabilities from 'web/utils/withCapabilities'; - -/* eslint-disable max-len */ +import PropTypes from 'web/utils/proptypes'; import CreateNamedFilterGroup from 'web/components/powerfilter/createnamedfiltergroup'; import FilterStringGroup from 'web/components/powerfilter/filterstringgroup'; import FirstResultGroup from 'web/components/powerfilter/firstresultgroup'; import ResultsPerPageGroup from 'web/components/powerfilter/resultsperpagegroup'; import SortByGroup from 'web/components/powerfilter/sortbygroup'; -import FilterDialogPropTypes from 'web/components/powerfilter/dialogproptypes'; -import withFilterDialog from 'web/components/powerfilter/withFilterDialog'; import TicketStatusFilterGroup from 'web/components/powerfilter/ticketstatusgroup'; import SeverityValuesGroup from 'web/components/powerfilter/severityvaluesgroup'; import SolutionTypeGroup from 'web/components/powerfilter/solutiontypegroup'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; -import {FIELDS} from './table'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -const TicketsFilterDialogComponent = ({ - capabilities, - filter, - filterName, - filterNameValid, - filterstring, - saveNamedFilter, - onFilterChange, - onFilterStringChange, - onFilterValueChange, - onSortByChange, - onSortOrderChange, - onValueChange, -}) => ( - - +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; - +const TicketsFilterDialogComponent = ({ + filter: initialFilter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, +}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(initialFilter); + const [handleSave] = useFilterDialogSave( + 'ticket', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Vulnerability'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + { + name: 'host', + displayName: _('Host'), + }, + { + name: 'solution_type', + displayName: _('Solution Type'), + }, + { + name: 'username', + displayName: _('Assigned User'), + }, + { + name: 'modified', + displayName: _('Modification Time'), + }, + { + name: 'status', + displayName: _('Status'), + }, + ]; + + const { + filter, + filterString, + filterName, + saveNamedFilter, + onFilterStringChange, + onFilterValueChange, + onFilterChange, + onSortByChange, + onSortOrderChange, + onValueChange, + } = filterDialogProps; + return ( + + - + - + - + - + - + - {capabilities.mayCreate('filter') && ( - - )} - -); - -TicketsFilterDialogComponent.propTypes = FilterDialogPropTypes; -export default compose( - withCapabilities, - withFilterDialog(), -)(TicketsFilterDialogComponent); + {capabilities.mayCreate('filter') && ( + + )} + + ); +}; + +TicketsFilterDialogComponent.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default TicketsFilterDialogComponent; diff --git a/src/web/pages/tlscertificates/filterdialog.js b/src/web/pages/tlscertificates/filterdialog.js index 84e66b3870..f12cce66ac 100644 --- a/src/web/pages/tlscertificates/filterdialog.js +++ b/src/web/pages/tlscertificates/filterdialog.js @@ -15,39 +15,79 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {_l} from 'gmp/locale/lang'; -import {createFilterDialog} from '../../components/powerfilter/dialog.js'; +import PropTypes from 'web/utils/proptypes'; -const SORT_FIELDS = [ - { - name: 'subject_dn', - displayName: _l('Subject DN'), - }, - { - name: 'issuer_dn', - displayName: _l('Issuer DN'), - }, - { - name: 'serial', - displayName: _l('Serial'), - }, - { - name: 'activates', - displayName: _l('Activates'), - }, - { - name: 'expires', - displayName: _l('Expires'), - }, - { - name: 'lastSeen', - displayName: _l('Last Seen'), - }, -]; +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -export default createFilterDialog({ - sortFields: SORT_FIELDS, -}); +import useTranslation from 'web/hooks/useTranslation'; -// vim: set ts=2 sw=2 tw=80: +const TlsCertificatesFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'tlscertificate', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + const SORT_FIELDS = [ + { + name: 'subject_dn', + displayName: _('Subject DN'), + }, + { + name: 'issuer_dn', + displayName: _('Issuer DN'), + }, + { + name: 'serial', + displayName: _('Serial'), + }, + { + name: 'activates', + displayName: _('Activates'), + }, + { + name: 'expires', + displayName: _('Expires'), + }, + { + name: 'lastSeen', + displayName: _('Last Seen'), + }, + ]; + + return ( + + + + ); +}; + +TlsCertificatesFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default TlsCertificatesFilterDialog; diff --git a/src/web/pages/tlscertificates/listpage.js b/src/web/pages/tlscertificates/listpage.js index aeecd86003..093a65e17f 100644 --- a/src/web/pages/tlscertificates/listpage.js +++ b/src/web/pages/tlscertificates/listpage.js @@ -17,8 +17,6 @@ */ import React from 'react'; -import _ from 'gmp/locale'; - import {TLS_CERTIFICATES_FILTER_FILTER} from 'gmp/models/filter'; import PropTypes from 'web/utils/proptypes'; @@ -39,22 +37,27 @@ import { selector as entitiesSelector, } from 'web/store/entities/tlscertificates'; +import useTranslation from 'web/hooks/useTranslation'; + import TlsCertificatesDashboard, { TLS_CERTIFICATES_DASHBOARD_ID, } from './dashboard'; -import TlsCertificateFilterDialog from './filterdialog'; +import TlsCertificatesFilterDialog from './filterdialog'; import TlsCertificateTable from './table'; import TlsCertificateComponent from './component'; -const ToolBarIcons = () => ( - - - -); +const ToolBarIcons = () => { + const [_] = useTranslation(); + return ( + + + + ); +}; const Page = ({ filter, @@ -64,50 +67,53 @@ const Page = ({ onFilterChanged, onInteraction, ...props -}) => ( - - {({clone, create, delete: delete_func, download, edit, exportFunc}) => ( - - - ( - - )} - dashboardControls={() => ( - - )} - filter={filter} - filtersFilter={TLS_CERTIFICATES_FILTER_FILTER} - filterEditDialog={TlsCertificateFilterDialog} - sectionIcon={} - table={TlsCertificateTable} - title={_('TLS Certificates')} - toolBarIcons={ToolBarIcons} - onError={onError} - onFilterChanged={onFilterChanged} - onInteraction={onInteraction} - onTlsCertificateDeleteClick={delete_func} - onTlsCertificateDownloadClick={download} - onTlsCertificateExportClick={exportFunc} - /> - - )} - -); +}) => { + const [_] = useTranslation(); + return ( + + {({delete: delete_func, download, exportFunc}) => ( + + + ( + + )} + dashboardControls={() => ( + + )} + filter={filter} + filtersFilter={TLS_CERTIFICATES_FILTER_FILTER} + filterEditDialog={TlsCertificatesFilterDialog} + sectionIcon={} + table={TlsCertificateTable} + title={_('TLS Certificates')} + toolBarIcons={ToolBarIcons} + onError={onError} + onFilterChanged={onFilterChanged} + onInteraction={onInteraction} + onTlsCertificateDeleteClick={delete_func} + onTlsCertificateDownloadClick={download} + onTlsCertificateExportClick={exportFunc} + /> + + )} + + ); +}; Page.propTypes = { filter: PropTypes.filter, diff --git a/src/web/pages/users/filterdialog.jsx b/src/web/pages/users/filterdialog.jsx new file mode 100644 index 0000000000..c1e7886bc6 --- /dev/null +++ b/src/web/pages/users/filterdialog.jsx @@ -0,0 +1,75 @@ +/* SPDX-FileCopyrightText: 2024 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import PropTypes from 'web/utils/proptypes'; + +import DefaultFilterDialog from 'web/components/powerfilter/dialog'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; + +import useTranslation from 'web/hooks/useTranslation'; + +const UsersFilterDialog = ({ + filter, + onCloseClick, + onClose = onCloseClick, + onFilterChanged, + onFilterCreated, + ...props +}) => { + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(filter); + const [handleSave] = useFilterDialogSave( + 'user', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'roles', + displayName: _('Roles'), + }, + { + name: 'groups', + displayName: _('Groups'), + }, + { + name: 'host_access', + displayName: _('Host Access'), + }, + { + name: 'ldap', + displayName: _('Authentication Type'), + }, + ]; + return ( + + + + ); +}; + +UsersFilterDialog.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default UsersFilterDialog; diff --git a/src/web/pages/users/listpage.js b/src/web/pages/users/listpage.js index cfdb544bf6..53209566bc 100644 --- a/src/web/pages/users/listpage.js +++ b/src/web/pages/users/listpage.js @@ -28,7 +28,6 @@ import {isDefined} from 'gmp/utils/identity'; import PropTypes from 'web/utils/proptypes'; import compose from 'web/utils/compose'; -import withCapabilities from 'web/utils/withCapabilities'; import withGmp from 'web/utils/withGmp'; import SelectionType from 'web/utils/selectiontype'; @@ -43,39 +42,41 @@ import UserIcon from 'web/components/icon/usericon'; import IconDivider from 'web/components/layout/icondivider'; import PageTitle from 'web/components/layout/pagetitle'; -import {createFilterDialog} from 'web/components/powerfilter/dialog'; - import { loadEntities, loadAllEntities, selector as entitiesSelector, } from 'web/store/entities/users'; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; + import ConfirmDeleteDialog from './confirmdeletedialog'; import UserComponent from './component'; -import UsersTable, {SORT_FIELDS} from './table'; - -const ToolBarIcons = withCapabilities(({capabilities, onUserCreateClick}) => ( - - - {capabilities.mayCreate('user') && ( - - )} - -)); +import UsersTable from './table'; +import UsersFilterDialog from './filterdialog'; + +const ToolBarIcons = ({onUserCreateClick}) => { + const capabilities = useCapabilities(); + const [_] = useTranslation(); // eslint-disable-line no-shadow + return ( + + + {capabilities.mayCreate('user') && ( + + )} + + ); +}; ToolBarIcons.propTypes = { onUserCreateClick: PropTypes.func.isRequired, }; -const UsersFilterDialog = createFilterDialog({ - sortFields: SORT_FIELDS, -}); - class UsersPage extends React.Component { constructor(...args) { super(...args); @@ -84,9 +85,8 @@ class UsersPage extends React.Component { this.handleDeleteUser = this.handleDeleteUser.bind(this); - this.handleCloseConfirmDeleteDialog = this.handleCloseConfirmDeleteDialog.bind( - this, - ); + this.handleCloseConfirmDeleteDialog = + this.handleCloseConfirmDeleteDialog.bind(this); this.openConfirmDeleteDialog = this.openConfirmDeleteDialog.bind(this); } diff --git a/src/web/pages/vulns/filterdialog.js b/src/web/pages/vulns/filterdialog.js index e5e38787cd..c6da4ad19c 100644 --- a/src/web/pages/vulns/filterdialog.js +++ b/src/web/pages/vulns/filterdialog.js @@ -17,18 +17,9 @@ */ import React from 'react'; -import {_l, _} from 'gmp/locale/lang'; - -import Layout from 'web/components/layout/layout'; - -import compose from 'web/utils/compose'; -import withCapabilities from 'web/utils/withCapabilities'; - -/* eslint-disable max-len */ +import PropTypes from 'web/utils/proptypes'; import CreateNamedFilterGroup from 'web/components/powerfilter/createnamedfiltergroup'; -import FilterDialogPropTypes from 'web/components/powerfilter/dialogproptypes'; -import withFilterDialog from 'web/components/powerfilter/withFilterDialog'; import FilterStringGroup from 'web/components/powerfilter/filterstringgroup'; import FirstResultGroup from 'web/components/powerfilter/firstresultgroup'; @@ -37,107 +28,135 @@ import SortByGroup from 'web/components/powerfilter/sortbygroup'; import FilterSearchGroup from 'web/components/powerfilter/filtersearchgroup'; import SeverityValuesGroup from 'web/components/powerfilter/severityvaluesgroup'; import MinQodGroup from 'web/components/powerfilter/minqodgroup'; +import FilterDialog from 'web/components/powerfilter/filterdialog'; + +import useFilterDialog from 'web/components/powerfilter/useFilterDialog'; +import useFilterDialogSave from 'web/components/powerfilter/useFilterDialogSave'; -const SORT_FIELDS = [ - { - name: 'name', - displayName: _l('Name'), - }, - { - name: 'oldest', - displayName: _l('Oldest Result'), - }, - { - name: 'newest', - displayName: _l('Newest Result'), - }, - { - name: 'severity', - displayName: _l('Severity'), - }, - { - name: 'qod', - displayName: _l('QoD'), - }, - { - name: 'results', - displayName: _l('Results'), - }, - { - name: 'hosts', - displayName: _l('Hosts'), - }, -]; +import useCapabilities from 'web/utils/useCapabilities'; +import useTranslation from 'web/hooks/useTranslation'; const VulnsFilterDialogComponent = ({ - capabilities, - filter, - filterName, - filterNameValid, - filterstring, - saveNamedFilter, - onFilterChange, - onFilterStringChange, - onFilterValueChange, - onSearchTermChange, - onSortByChange, - onSortOrderChange, - onValueChange, -}) => ( - - - - - - - - - - - - - - - - {capabilities.mayCreate('filter') && ( - { + const capabilities = useCapabilities(); + const [_] = useTranslation(); + const filterDialogProps = useFilterDialog(initialFilter); + const [handleSave] = useFilterDialogSave( + 'vulnerability', + { + onClose, + onFilterChanged, + onFilterCreated, + }, + filterDialogProps, + ); + + const SORT_FIELDS = [ + { + name: 'name', + displayName: _('Name'), + }, + { + name: 'oldest', + displayName: _('Oldest Result'), + }, + { + name: 'newest', + displayName: _('Newest Result'), + }, + { + name: 'severity', + displayName: _('Severity'), + }, + { + name: 'qod', + displayName: _('QoD'), + }, + { + name: 'results', + displayName: _('Results'), + }, + { + name: 'hosts', + displayName: _('Hosts'), + }, + ]; + const { + filter, + filterName, + filterString, + saveNamedFilter, + onFilterValueChange, + onFilterStringChange, + onSearchTermChange, + onSortByChange, + onSortOrderChange, + onValueChange, + } = filterDialogProps; + return ( + + + + + + + + - )} - -); -VulnsFilterDialogComponent.propTypes = FilterDialogPropTypes; + + + + + -export default compose( - withCapabilities, - withFilterDialog(), -)(VulnsFilterDialogComponent); + {capabilities.mayCreate('filter') && ( + + )} + + ); +}; + +VulnsFilterDialogComponent.propTypes = { + filter: PropTypes.filter, + onClose: PropTypes.func, + onCloseClick: PropTypes.func, // should be removed in future + onFilterChanged: PropTypes.func, + onFilterCreated: PropTypes.func, +}; + +export default VulnsFilterDialogComponent; // vim: set ts=2 sw=2 tw=80: