Change: Replace withCapabilities with useCapabilities in task icons

Get rid of the withCapabilities hoc.
greenbone · Mar 7, 2025 · 87ee23a · 87ee23a
1 parent 00eefde
commit 87ee23a
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 73 deletions.
diff --git a/src/web/pages/audits/ListPage.jsx b/src/web/pages/audits/ListPage.jsx
@@ -13,6 +13,7 @@ import IconDivider from 'web/components/layout/IconDivider';
 import PageTitle from 'web/components/layout/PageTitle';
 import EntitiesPage from 'web/entities/Page';
 import withEntitiesContainer from 'web/entities/withEntitiesContainer';
+import useCapabilities from 'web/hooks/useCapabilities';
 import AuditComponent from 'web/pages/audits/Component';
 import Table from 'web/pages/audits/Table';
 import {taskReloadInterval} from 'web/pages/tasks/ListPage';
@@ -21,11 +22,10 @@ import {
   selector as entitiesSelector,
 } from 'web/store/entities/audits';
 import PropTypes from 'web/utils/PropTypes';
-import withCapabilities from 'web/utils/withCapabilities';
 
-
-export const ToolBarIcons = withCapabilities(
-  ({capabilities, onAuditCreateClick}) => (
+export const ToolBarIcons = ({onAuditCreateClick}) => {
+  const capabilities = useCapabilities();
+  return (
     <IconDivider>
       <ManualIcon
         anchor="configuring-and-managing-audits"
@@ -36,8 +36,8 @@ export const ToolBarIcons = withCapabilities(
         <NewIcon title={_('New Audit')} onClick={onAuditCreateClick} />
       )}
     </IconDivider>
-  ),
-);
+  );
+};
 
 ToolBarIcons.propTypes = {
   onAuditCreateClick: PropTypes.func.isRequired,

diff --git a/src/web/pages/hosts/ListPage.jsx b/src/web/pages/hosts/ListPage.jsx
@@ -15,6 +15,7 @@ import PageTitle from 'web/components/layout/PageTitle';
 import EntitiesPage from 'web/entities/Page';
 import withEntitiesContainer from 'web/entities/withEntitiesContainer';
 import {goToDetails} from 'web/entity/navigation';
+import useCapabilities from 'web/hooks/useCapabilities';
 import HostComponent from 'web/pages/hosts/Component';
 import HostsDashboard, {HOSTS_DASHBOARD_ID} from 'web/pages/hosts/dashboard';
 import HostsFilterDialog from 'web/pages/hosts/FilterDialog';
@@ -24,10 +25,10 @@ import {
   selector as entitiesSelector,
 } from 'web/store/entities/hosts';
 import PropTypes from 'web/utils/PropTypes';
-import withCapabilities from 'web/utils/withCapabilities';
 
-export const ToolBarIcons = withCapabilities(
-  ({capabilities, onHostCreateClick}) => (
+export const ToolBarIcons = ({onHostCreateClick}) => {
+  const capabilities = useCapabilities();
+  return (
     <IconDivider>
       <ManualIcon
         anchor="managing-hosts"
@@ -38,11 +39,10 @@ export const ToolBarIcons = withCapabilities(
         <NewIcon title={_('New Host')} onClick={onHostCreateClick} />
       )}
     </IconDivider>
-  ),
-);
+  );
+};
 
 ToolBarIcons.propTypes = {
-  capabilities: PropTypes.capabilities.isRequired,
   onHostCreateClick: PropTypes.func.isRequired,
 };
 

diff --git a/src/web/pages/scanconfigs/DetailsPage.jsx b/src/web/pages/scanconfigs/DetailsPage.jsx
@@ -41,6 +41,7 @@ import EntityTags from 'web/entity/Tags';
 import withEntityContainer, {
   permissionsResourceFilter,
 } from 'web/entity/withEntityContainer';
+import useCapabilities from 'web/hooks/useCapabilities';
 import ScanConfigComponent from 'web/pages/scanconfigs/Component';
 import ScanConfigDetails from 'web/pages/scanconfigs/Details';
 import Trend from 'web/pages/scanconfigs/Trend';
@@ -50,19 +51,18 @@ import {
 } from 'web/store/entities/permissions';
 import {selector, loadEntity} from 'web/store/entities/scanconfigs';
 import PropTypes from 'web/utils/PropTypes';
-import withCapabilities from 'web/utils/withCapabilities';
 
-export const ToolBarIcons = withCapabilities(
-  ({
-    capabilities,
-    entity,
-    onScanConfigCloneClick,
-    onScanConfigCreateClick,
-    onScanConfigDeleteClick,
-    onScanConfigDownloadClick,
-    onScanConfigEditClick,
-    onScanConfigImportClick,
-  }) => (
+export const ToolBarIcons = ({
+  entity,
+  onScanConfigCloneClick,
+  onScanConfigCreateClick,
+  onScanConfigDeleteClick,
+  onScanConfigDownloadClick,
+  onScanConfigEditClick,
+  onScanConfigImportClick,
+}) => {
+  const capabilities = useCapabilities();
+  return (
     <Divider margin="10px">
       <IconDivider>
         <ManualIcon
@@ -94,8 +94,8 @@ export const ToolBarIcons = withCapabilities(
         )}
       </IconDivider>
     </Divider>
-  ),
-);
+  );
+};
 
 ToolBarIcons.propTypes = {
   entity: PropTypes.model.isRequired,

diff --git a/src/web/pages/scanconfigs/ListPage.jsx b/src/web/pages/scanconfigs/ListPage.jsx
@@ -13,6 +13,7 @@ import IconDivider from 'web/components/layout/IconDivider';
 import PageTitle from 'web/components/layout/PageTitle';
 import EntitiesPage from 'web/entities/Page';
 import withEntitiesContainer from 'web/entities/withEntitiesContainer';
+import useCapabilities from 'web/hooks/useCapabilities';
 import useTranslation from 'web/hooks/useTranslation';
 import ScanConfigComponent from 'web/pages/scanconfigs/Component';
 import ScanConfigFilterDialog from 'web/pages/scanconfigs/FilterDialog';
@@ -22,35 +23,35 @@ import {
   selector as entitiesSelector,
 } from 'web/store/entities/scanconfigs';
 import PropTypes from 'web/utils/PropTypes';
-import withCapabilities from 'web/utils/withCapabilities';
 
-
-export const ToolBarIcons = withCapabilities(
-  ({capabilities, onScanConfigCreateClick, onScanConfigImportClick}) => {
-    const [_] = useTranslation();
-    return (
-      <IconDivider>
-        <ManualIcon
-          anchor="managing-scan-configurations"
-          page="scanning"
-          title={_('Help: Scan Configs')}
+export const ToolBarIcons = ({
+  onScanConfigCreateClick,
+  onScanConfigImportClick,
+}) => {
+  const [_] = useTranslation();
+  const capabilities = useCapabilities();
+  return (
+    <IconDivider>
+      <ManualIcon
+        anchor="managing-scan-configurations"
+        page="scanning"
+        title={_('Help: Scan Configs')}
+      />
+      {capabilities.mayCreate('config') && (
+        <NewIcon
+          title={_('New Scan Config')}
+          onClick={onScanConfigCreateClick}
         />
-        {capabilities.mayCreate('config') && (
-          <NewIcon
-            title={_('New Scan Config')}
-            onClick={onScanConfigCreateClick}
-          />
-        )}
-        {capabilities.mayCreate('config') && (
-          <UploadIcon
-            title={_('Import Scan Config')}
-            onClick={onScanConfigImportClick}
-          />
-        )}
-      </IconDivider>
-    );
-  },
-);
+      )}
+      {capabilities.mayCreate('config') && (
+        <UploadIcon
+          title={_('Import Scan Config')}
+          onClick={onScanConfigImportClick}
+        />
+      )}
+    </IconDivider>
+  );
+};
 
 ToolBarIcons.propTypes = {
   onScanConfigCreateClick: PropTypes.func.isRequired,

diff --git a/src/web/pages/tasks/icons/NewIconMenu.jsx b/src/web/pages/tasks/icons/NewIconMenu.jsx
@@ -8,10 +8,12 @@ import React from 'react';
 import NewIcon from 'web/components/icon/NewIcon';
 import IconMenu from 'web/components/menu/IconMenu';
 import MenuEntry from 'web/components/menu/MenuEntry';
+import useCapabilities from 'web/hooks/useCapabilities';
 import PropTypes from 'web/utils/PropTypes';
 import withCapabilities from 'web/utils/withCapabilities';
 
-const NewIconMenu = ({capabilities, onNewClick, onNewContainerClick}) => {
+const NewIconMenu = ({onNewClick, onNewContainerClick}) => {
+  const capabilities = useCapabilities();
   if (capabilities.mayCreate('task')) {
     return (
       <IconMenu icon={<NewIcon />} onClick={onNewClick}>
@@ -27,7 +29,6 @@ const NewIconMenu = ({capabilities, onNewClick, onNewContainerClick}) => {
 };
 
 NewIconMenu.propTypes = {
-  capabilities: PropTypes.capabilities.isRequired,
   onNewClick: PropTypes.func,
   onNewContainerClick: PropTypes.func,
 };

diff --git a/src/web/pages/tasks/icons/ResumeIcon.jsx b/src/web/pages/tasks/icons/ResumeIcon.jsx
@@ -8,15 +8,11 @@ import {isDefined} from 'gmp/utils/identity';
 import {capitalizeFirstLetter} from 'gmp/utils/string';
 import React from 'react';
 import ResumeIcon from 'web/components/icon/ResumeIcon';
+import useCapabilities from 'web/hooks/useCapabilities';
 import PropTypes from 'web/utils/PropTypes';
-import withCapabilities from 'web/utils/withCapabilities';
 
-const TaskResumeIcon = ({
-  capabilities,
-  task,
-  usageType = _('task'),
-  onClick,
-}) => {
+const TaskResumeIcon = ({task, usageType = _('task'), onClick}) => {
+  const capabilities = useCapabilities();
   if (task.isQueued()) {
     return null;
   }
@@ -73,10 +69,9 @@ const TaskResumeIcon = ({
 };
 
 TaskResumeIcon.propTypes = {
-  capabilities: PropTypes.capabilities.isRequired,
   task: PropTypes.model.isRequired,
   usageType: PropTypes.string,
   onClick: PropTypes.func,
 };
 
-export default withCapabilities(TaskResumeIcon);
+export default TaskResumeIcon;
diff --git a/src/web/pages/tasks/icons/StartIcon.jsx b/src/web/pages/tasks/icons/StartIcon.jsx
@@ -8,15 +8,12 @@ import {isDefined} from 'gmp/utils/identity';
 import {capitalizeFirstLetter} from 'gmp/utils/string';
 import React from 'react';
 import StartIcon from 'web/components/icon/StartIcon';
+import useCapabilities from 'web/hooks/useCapabilities';
 import PropTypes from 'web/utils/PropTypes';
-import withCapabilities from 'web/utils/withCapabilities';
 
-const TaskStartIcon = ({
-  capabilities,
-  task,
-  usageType = _('task'),
-  onClick,
-}) => {
+const TaskStartIcon = ({task, usageType = _('task'), onClick}) => {
+  const capabilities = useCapabilities();
+
   if (task.isRunning() || task.isContainer()) {
     return null;
   }
@@ -65,10 +62,9 @@ const TaskStartIcon = ({
 };
 
 TaskStartIcon.propTypes = {
-  capabilities: PropTypes.capabilities.isRequired,
   task: PropTypes.model.isRequired,
   usageType: PropTypes.string,
   onClick: PropTypes.func,
 };
 
-export default withCapabilities(TaskStartIcon);
+export default TaskStartIcon;