fix: edit filter Alerts, Scan Config, Permission

greenbone · Nov 28, 2024 · 6d797aa · 6d797aa
1 parent 164d87c
commit 6d797aa
Show file tree

Hide file tree

Showing 7 changed files with 288 additions and 153 deletions.
diff --git a/src/web/components/powerfilter/dialog.jsx b/src/web/components/powerfilter/dialog.jsx
@@ -3,10 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
-import withFilterDialog from 'web/components/powerfilter/withFilterDialog';
 import useCapabilities from 'web/hooks/useCapabilities';
 
 import CreateNamedFilterGroup from './createnamedfiltergroup';
@@ -58,9 +56,6 @@ export const DefaultFilterDialog = ({
 
 DefaultFilterDialog.propTypes = DefaultFilterDialogPropTypes;
 
-export const createFilterDialog = options =>
-  withFilterDialog(options)(DefaultFilterDialog);
-
 export {DefaultFilterDialogPropTypes};
 
 export default DefaultFilterDialog;

diff --git a/src/web/pages/alerts/filterdialog.jsx b/src/web/pages/alerts/filterdialog.jsx
@@ -0,0 +1,86 @@
+/* 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 AlertsFilterDialog = ({
+  filter,
+  onCloseClick,
+  onClose = onCloseClick,
+  onFilterChanged,
+  onFilterCreated,
+  ...props
+}) => {
+  const [_] = useTranslation();
+  const filterDialogProps = useFilterDialog(filter);
+  const [handleSave] = useFilterDialogSave(
+    'alert',
+    {
+      onClose,
+      onFilterChanged,
+      onFilterCreated,
+    },
+    filterDialogProps,
+  );
+
+  const SORT_FIELDS = [
+    {
+      name: 'name',
+      displayName: _('Name'),
+      width: '25%',
+    },
+    {
+      name: 'event',
+      displayName: _('Event'),
+      width: '21%',
+    },
+    {
+      name: 'condition',
+      displayName: _('Condition'),
+      width: '21%',
+    },
+    {
+      name: 'method',
+      displayName: _('Method'),
+      width: '10%',
+    },
+    {
+      name: 'filter',
+      displayName: _('Filter'),
+      width: '10%',
+    },
+    {
+      name: 'active',
+      displayName: _('Active'),
+      width: '5%',
+    },
+  ];
+  return (
+    <FilterDialog onClose={onClose} onSave={handleSave}>
+      <DefaultFilterDialog
+        {...props}
+        {...filterDialogProps}
+        sortFields={SORT_FIELDS}
+      />
+    </FilterDialog>
+  );
+};
+
+AlertsFilterDialog.propTypes = {
+  filter: PropTypes.filter,
+  onClose: PropTypes.func,
+  onCloseClick: PropTypes.func, // should be removed in future
+  onFilterChanged: PropTypes.func,
+  onFilterCreated: PropTypes.func,
+};
+
+export default AlertsFilterDialog;
diff --git a/src/web/pages/alerts/listpage.jsx b/src/web/pages/alerts/listpage.jsx
@@ -23,15 +23,16 @@ import PageTitle from 'web/components/layout/pagetitle';
 
 import AlertIcon from 'web/components/icon/alerticon';
 
-import {createFilterDialog} from 'web/components/powerfilter/dialog';
-
 import {
   loadEntities,
   selector as entitiesSelector,
 } from 'web/store/entities/alerts';
 
 import AlertComponent from './component';
-import AlertTable, {SORT_FIELDS} from './table';
+import AlertTable from './table';
+
+import {useTranslation} from 'react-i18next';
+import AlertsFilterDialog from 'web/pages/alerts/filterdialog';
 
 export const ToolBarIcons = withCapabilities(
   ({capabilities, onAlertCreateClick}) => (
@@ -52,10 +53,6 @@ ToolBarIcons.propTypes = {
   onAlertCreateClick: PropTypes.func.isRequired,
 };
 
-const AlertFilterDialog = createFilterDialog({
-  sortFields: SORT_FIELDS,
-});
-
 const AlertsPage = ({
   showError,
   showSuccess,
@@ -64,48 +61,52 @@ const AlertsPage = ({
   onError,
   onInteraction,
   ...props
-}) => (
-  <AlertComponent
-    onCreated={onChanged}
-    onSaved={onChanged}
-    onCloned={onChanged}
-    onCloneError={onError}
-    onDeleted={onChanged}
-    onDeleteError={onError}
-    onDownloaded={onDownloaded}
-    onDownloadError={onError}
-    onInteraction={onInteraction}
-    onTestSuccess={showSuccess}
-    onTestError={showError}
-  >
-    {({clone, create, delete: delete_func, download, edit, save, test}) => (
-      <React.Fragment>
-        <PageTitle title={_('Alerts')} />
-        <EntitiesPage
-          {...props}
-          filterEditDialog={AlertFilterDialog}
-          filtersFilter={ALERTS_FILTER_FILTER}
-          sectionIcon={<AlertIcon size="large" />}
-          table={AlertTable}
-          title={_('Alerts')}
-          toolBarIcons={ToolBarIcons}
-          onAlertCloneClick={clone}
-          onAlertCreateClick={create}
-          onAlertDeleteClick={delete_func}
-          onAlertDownloadClick={download}
-          onAlertEditClick={edit}
-          onAlertTestClick={test}
-          onAlertSaveClick={save}
-          onError={onError}
-          onInteraction={onInteraction}
-          onPermissionChanged={onChanged}
-          onPermissionDownloaded={onDownloaded}
-          onPermissionDownloadError={onError}
-        />
-      </React.Fragment>
-    )}
-  </AlertComponent>
-);
+}) => {
+  const [_] = useTranslation();
+
+  return (
+    <AlertComponent
+      onCreated={onChanged}
+      onSaved={onChanged}
+      onCloned={onChanged}
+      onCloneError={onError}
+      onDeleted={onChanged}
+      onDeleteError={onError}
+      onDownloaded={onDownloaded}
+      onDownloadError={onError}
+      onInteraction={onInteraction}
+      onTestSuccess={showSuccess}
+      onTestError={showError}
+    >
+      {({clone, create, delete: delete_func, download, edit, save, test}) => (
+        <>
+          <PageTitle title={_('Alerts')} />
+          <EntitiesPage
+            {...props}
+            filterEditDialog={AlertsFilterDialog}
+            filtersFilter={ALERTS_FILTER_FILTER}
+            sectionIcon={<AlertIcon size="large" />}
+            table={AlertTable}
+            title={_('Alerts')}
+            toolBarIcons={ToolBarIcons}
+            onAlertCloneClick={clone}
+            onAlertCreateClick={create}
+            onAlertDeleteClick={delete_func}
+            onAlertDownloadClick={download}
+            onAlertEditClick={edit}
+            onAlertTestClick={test}
+            onAlertSaveClick={save}
+            onError={onError}
+            onInteraction={onInteraction}
+            onPermissionChanged={onChanged}
+            onPermissionDownloaded={onDownloaded}
+            onPermissionDownloadError={onError}
+          />
+        </>
+      )}
+    </AlertComponent>
+  );
+};
 
 AlertsPage.propTypes = {
   showError: PropTypes.func.isRequired,

diff --git a/src/web/pages/permissions/listpage.jsx b/src/web/pages/permissions/listpage.jsx
@@ -29,7 +29,7 @@ import useTranslation from 'web/hooks/useTranslation';
 
 import Table from './table';
 import PermissionComponent from './component';
-import FilterDialog from '../filters/dialog';
+import FilterDialog from 'web/pages/permissions/filterdialog';
 
 const ToolBarIcons = ({onPermissionCreateClick}) => {
   const capabilities = useCapabilities();

diff --git a/src/web/pages/scanconfigs/filterdialog.jsx b/src/web/pages/scanconfigs/filterdialog.jsx
@@ -0,0 +1,77 @@
+/* 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 ScanConfigFilterDialog = ({
+  filter,
+  onCloseClick,
+  onClose = onCloseClick,
+  onFilterChanged,
+  onFilterCreated,
+  ...props
+}) => {
+  const [_] = useTranslation();
+  const filterDialogProps = useFilterDialog(filter);
+  const [handleSave] = useFilterDialogSave(
+    'config',
+    {
+      onClose,
+      onFilterChanged,
+      onFilterCreated,
+    },
+    filterDialogProps,
+  );
+
+  const SORT_FIELDS = [
+    {
+      name: 'name',
+      displayName: _('Name'),
+    },
+    {
+      name: 'families_total',
+      displayName: _('Families: Total'),
+    },
+    {
+      name: 'families_trend',
+      displayName: _('Families: Trend'),
+    },
+    {
+      name: 'nvts_total',
+      displayName: _('NVTs: Total'),
+    },
+    {
+      name: 'nvts_trend',
+      displayName: _('NVTs: Trend'),
+    },
+  ];
+
+  return (
+    <FilterDialog onClose={onClose} onSave={handleSave}>
+      <DefaultFilterDialog
+        {...props}
+        {...filterDialogProps}
+        sortFields={SORT_FIELDS}
+      />
+    </FilterDialog>
+  );
+};
+
+ScanConfigFilterDialog.propTypes = {
+  filter: PropTypes.filter,
+  onClose: PropTypes.func,
+  onCloseClick: PropTypes.func, // should be removed in future
+  onFilterChanged: PropTypes.func,
+  onFilterCreated: PropTypes.func,
+};
+
+export default ScanConfigFilterDialog;