Change: Update all filter dialogs for new UI

Adjust the filter dialogs of all list pages.
greenbone · Apr 17, 2024 · b8fa166 · b8fa166
1 parent 466d96a
commit b8fa166
Show file tree

Hide file tree

Showing 48 changed files with 3,236 additions and 1,943 deletions.
diff --git 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 <http://www.gnu.org/licenses/>.
  */
-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 (
+    <FilterDialog onClose={onClose} onSave={handleSave}>
+      <DefaultFilterDialog
+        {...props}
+        {...filterDialogProps}
+        sortFields={SORT_FIELDS}
+      />
+    </FilterDialog>
+  );
+};
+
+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
@@ -56,7 +56,6 @@ const Page = ({filter, onFilterChanged, onInteraction, ...props}) => (
     <PageTitle title={_('CERT-Bund Advisories')} />
     <EntitiesPage
       {...props}
-      createFilterType="info"
       dashboard={() => (
         <CertBundDashboard
           filter={filter}

diff --git a/src/web/pages/cpes/filterdialog.js b/src/web/pages/cpes/filterdialog.js
@@ -15,35 +15,75 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-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 (
+    <FilterDialog onClose={onClose} onSave={handleSave}>
+      <DefaultFilterDialog
+        {...props}
+        {...filterDialogProps}
+        sortFields={SORT_FIELDS}
+      />
+    </FilterDialog>
+  );
+};
+
+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
@@ -52,7 +52,6 @@ const Page = ({filter, onFilterChanged, onInteraction, ...props}) => (
     <PageTitle title={_('CPEs')} />
     <EntitiesPage
       {...props}
-      createFilterType="info"
       dashboard={() => (
         <CpesDashboard
           filter={filter}

diff --git a/src/web/pages/credentials/filterdialog.jsx b/src/web/pages/credentials/filterdialog.jsx
@@ -0,0 +1,73 @@
+/* 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 CredentialsFilterDialog = ({
+  filter,
+  onCloseClick,
+  onClose = onCloseClick,
+  onFilterChanged,
+  onFilterCreated,
+  ...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 (
+    <FilterDialog onClose={onClose} onSave={handleSave}>
+      <DefaultFilterDialog
+        {...props}
+        {...filterDialogProps}
+        sortFields={SORT_FIELDS}
+      />
+    </FilterDialog>
+  );
+};
+
+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;