Refactor report panels to typescript

src/gmp/models/filter.ts

@@ -477,7 +477,7 @@ class Filter extends EntityModel {
    */
   get(
     key: string,
-    def: string | undefined = undefined,
+    def: string | number | undefined = undefined,
   ): string | number | undefined {
     const term = this.getTerm(key);
     return isDefined(term) ? term.value : def;

src/web/components/layout/updating-style.ts

@@ -5,7 +5,11 @@
 
 import {css} from 'styled-components';
 
-const updatingStyle = css<{$isUpdating?: boolean}>`
+export interface UpdatingStyleProps {
+  $isUpdating?: boolean;
+}
+
+const updatingStyle = css<UpdatingStyleProps>`
   opacity: ${props => (props.$isUpdating ? '0.1' : '1.0')};
   transition: opacity 0.3s ease;
 `;

src/web/pages/reports/details/EmptyReport.tsx

@@ -47,15 +47,20 @@ const EmptyReport = ({
         {!isActiveReport && (
           <>
             <ReportPanel
-              icon={props => <TaskIcon {...props} />}
+              icon={<TaskIcon size="large" />}
               title={_('The scan did not collect any results')}
             >
               {_(
                 'If the scan got interrupted you can try to re-start the task.',
               )}
             </ReportPanel>
             <ReportPanel
-              icon={props => <TargetIcon {...props} />}
+              icon={
+                <TargetIcon
+                  size="large"
+                  onClick={mayEditTarget ? onTargetEditClick : undefined}
+                />
+              }
               title={_('The target hosts could be regarded dead')}
               onClick={mayEditTarget ? onTargetEditClick : undefined}
             >
@@ -70,15 +75,15 @@ const EmptyReport = ({
         )}
         {isActiveReport && progress === 1 && (
           <ReportPanel
-            icon={props => <RefreshIcon {...props} />}
+            icon={<RefreshIcon size="large" />}
             title={_('The scan just started and no results have arrived yet')}
           >
             {_('Just wait for results to arrive.')}
           </ReportPanel>
         )}
         {isActiveReport && progress > 1 && (
           <ReportPanel
-            icon={props => <RefreshIcon {...props} />}
+            icon={<RefreshIcon size="large" />}
             title={_(
               'The scan is still running and no results have arrived yet',
             )}
@@ -88,7 +93,12 @@ const EmptyReport = ({
         )}
         {progress < 1 && hasTarget && status !== TASK_STATUS.interrupted && (
           <ReportPanel
-            icon={props => <TargetIcon {...props} />}
+            icon={
+              <TargetIcon
+                size="large"
+                onClick={mayEditTarget ? onTargetEditClick : undefined}
+              />
+            }
             title={_('The target hosts could be regarded dead')}
             onClick={mayEditTarget ? onTargetEditClick : undefined}
           >

src/web/pages/reports/details/EmptyResultsReport.tsx

@@ -63,7 +63,9 @@ const EmptyResultsReport = ({
           !levels.includes('g') &&
           isDefined(onFilterAddLogLevelClick) && (
             <ReportPanel
-              icon={props => <FilterIcon {...props} />}
+              icon={
+                <FilterIcon size="large" onClick={onFilterAddLogLevelClick} />
+              }
               title={_('Log messages are currently excluded.')}
               onClick={onFilterAddLogLevelClick}
             >
@@ -73,7 +75,9 @@ const EmptyResultsReport = ({
 
         {hasSeverityFilter && isDefined(onFilterRemoveSeverityClick) && (
           <ReportPanel
-            icon={props => <FilterIcon {...props} />}
+            icon={
+              <FilterIcon size="large" onClick={onFilterRemoveSeverityClick} />
+            }
             title={_(
               'You are using keywords setting a minimum limit on severity.',
             )}
@@ -85,7 +89,9 @@ const EmptyResultsReport = ({
 
         {isDefined(minQod) && minQod > 30 && (
           <ReportPanel
-            icon={props => <FilterIcon {...props} />}
+            icon={
+              <FilterIcon size="large" onClick={onFilterDecreaseMinQoDClick} />
+            }
             title={_(
               'There may be results below the currently selected Quality ' +
                 'of Detection (QoD).',
@@ -100,15 +106,17 @@ const EmptyResultsReport = ({
         )}
 
         <ReportPanel
-          icon={props => <EditIcon {...props} />}
+          icon={<EditIcon size="large" onClick={onFilterEditClick} />}
           title={_('Your filter settings may be too refined.')}
           onClick={onFilterEditClick}
         >
           {_('Adjust and update your filter settings.')}
         </ReportPanel>
 
         <ReportPanel
-          icon={props => <CircleXDeleteIcon {...props} />}
+          icon={
+            <CircleXDeleteIcon size="large" onClick={onFilterRemoveClick} />
+          }
           title={_('Your last filter change may be too restrictive.')}
           onClick={onFilterRemoveClick}
         >

src/web/pages/reports/details/ReportPanel.jsx → src/web/pages/reports/details/ReportPanel.tsx

@@ -8,9 +8,15 @@ import styled from 'styled-components';
 import {isDefined} from 'gmp/utils/identity';
 import Divider from 'web/components/layout/Divider';
 import InfoPanel from 'web/components/panel/InfoPanel';
-import PropTypes from 'web/utils/PropTypes';
 
-const Content = styled.span`
+interface ReportPanelProps {
+  children: React.ReactNode;
+  icon: React.ReactNode;
+  title: string;
+  onClick?: () => void;
+}
+
+const Content = styled.span<{onClick?: () => void}>`
   ${props => {
     if (!isDefined(props.onClick)) {
       return undefined;
@@ -25,21 +31,15 @@ const Content = styled.span`
   }}
 `;
 
-const ReportPanel = ({children, icon, title, onClick}) => {
+const ReportPanel = ({children, icon, title, onClick}: ReportPanelProps) => {
   return (
     <InfoPanel heading={title}>
       <Divider align={['start', 'center']} margin="1em">
-        {icon({size: 'large', onClick})}
+        {icon}
         <Content onClick={onClick}>{children}</Content>
       </Divider>
     </InfoPanel>
   );
 };
 
-ReportPanel.propTypes = {
-  icon: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-};
-
 export default ReportPanel;

src/web/pages/reports/details/ReportTabDefinitions.tsx

@@ -19,10 +19,10 @@ import ErrorsTab from 'web/pages/reports/details/error/ErrorsTab';
 import HostsTabContent from 'web/pages/reports/details/host/HostsTabContent';
 import OperatingSystemsTab from 'web/pages/reports/details/operating-system/OperatingSystemsTab';
 import PortsTab from 'web/pages/reports/details/port/PortsTab';
+import ReportThresholdPanel from 'web/pages/reports/details/ReportThresholdPanel';
 import ResultsTabContent from 'web/pages/reports/details/result/ResultsTabContent';
 import Summary from 'web/pages/reports/details/Summary';
 import TabTitle from 'web/pages/reports/details/TabTitle';
-import ThresholdPanel from 'web/pages/reports/details/ThresholdPanel';
 import TLSCertificatesTab from 'web/pages/reports/details/tls-certificate/TlsCertificatesTab';
 
 export interface ThresholdConfig {
@@ -104,7 +104,7 @@ export const renderWithThreshold = (
 
   if (config.showThresholdMessage) {
     return (
-      <ThresholdPanel
+      <ReportThresholdPanel
         entityType={entityType}
         filter={activeFilter}
         isUpdating={config.isUpdating}

src/web/pages/reports/details/ThresholdPanel.jsx → src/web/pages/reports/details/ReportThresholdPanel.tsx

@@ -4,16 +4,29 @@
  */
 
 import styled from 'styled-components';
+import type Filter from 'gmp/models/filter';
+import {isDefined} from 'gmp/utils/identity';
 import FootNote from 'web/components/footnote/Footnote';
 import {EditIcon, FilterIcon} from 'web/components/icon';
 import Divider from 'web/components/layout/Divider';
 import Layout from 'web/components/layout/Layout';
-import updatingStyle from 'web/components/layout/updating-style';
+import updatingStyle, {
+  type UpdatingStyleProps,
+} from 'web/components/layout/updating-style';
 import InfoPanel from 'web/components/panel/InfoPanel';
 import useTranslation from 'web/hooks/useTranslation';
 import ReportPanel from 'web/pages/reports/details/ReportPanel';
-import PropTypes from 'web/utils/PropTypes';
-const UpdatingDivider = styled(Divider)`
+
+interface ThresholdPanelProps {
+  entityType: string;
+  filter: Filter;
+  isUpdating?: boolean;
+  threshold: number;
+  onFilterChanged?: (filter: Filter) => void;
+  onFilterEditClick?: () => void;
+}
+
+const UpdatingDivider = styled(Divider)<UpdatingStyleProps>`
   ${updatingStyle}
 `;
 
@@ -24,41 +37,41 @@ const ThresholdPanel = ({
   threshold,
   onFilterChanged,
   onFilterEditClick,
-}) => {
+}: ThresholdPanelProps) => {
   const [_] = useTranslation();
-  const levels = filter.get('levels', '');
-  const severity = filter.get('severity', 0);
+  const levels = filter.get('levels', '') as string | undefined;
+  const severity = filter.get('severity', 0) as number;
 
   const handleRemoveLogLevel = () => {
-    if (levels.includes('g')) {
+    if (isDefined(levels) && levels.includes('g')) {
       const newLevels = levels.replace('g', '');
       const levelsFilter = filter.set('levels', newLevels);
 
-      onFilterChanged(levelsFilter);
+      onFilterChanged?.(levelsFilter);
     }
   };
 
   const handleRemoveLowLevel = () => {
-    if (levels.includes('l')) {
+    if (isDefined(levels) && levels.includes('l')) {
       const newLevels = levels.replace('l', '');
       const levelsFilter = filter.set('levels', newLevels);
 
-      onFilterChanged(levelsFilter);
+      onFilterChanged?.(levelsFilter);
     }
   };
 
   const handleRemoveMediumLevel = () => {
-    if (levels.includes('m')) {
+    if (isDefined(levels) && levels.includes('m')) {
       const newLevels = levels.replace('m', '');
       const levelsFilter = filter.set('levels', newLevels);
 
-      onFilterChanged(levelsFilter);
+      onFilterChanged?.(levelsFilter);
     }
   };
   const handleSetMinimumSeverity = () => {
     const severityFilter = filter.set('severity', 7.0, '>');
 
-    onFilterChanged(severityFilter);
+    onFilterChanged?.(severityFilter);
   };
   return (
     <UpdatingDivider
@@ -78,27 +91,27 @@ const ThresholdPanel = ({
         )}
       />
       <Divider wrap>
-        {levels.includes('g') && (
+        {isDefined(levels) && levels.includes('g') && (
           <ReportPanel
-            icon={props => <FilterIcon {...props} />}
+            icon={<FilterIcon size="large" onClick={handleRemoveLogLevel} />}
             title={_('Results with log messages are currently included.')}
             onClick={handleRemoveLogLevel}
           >
             {_('Filter out log message results.')}
           </ReportPanel>
         )}
-        {levels.includes('l') && (
+        {isDefined(levels) && levels.includes('l') && (
           <ReportPanel
-            icon={props => <FilterIcon {...props} />}
+            icon={<FilterIcon size="large" onClick={handleRemoveLowLevel} />}
             title={_('Results with the severity "Low" are currently included.')}
             onClick={handleRemoveLowLevel}
           >
             {_('Filter out results with the severity "Low".')}
           </ReportPanel>
         )}
-        {levels.includes('m') && (
+        {isDefined(levels) && levels.includes('m') && (
           <ReportPanel
-            icon={props => <FilterIcon {...props} />}
+            icon={<FilterIcon size="large" onClick={handleRemoveMediumLevel} />}
             title={_(
               'Results with the severity "Medium" are currently included.',
             )}
@@ -109,15 +122,17 @@ const ThresholdPanel = ({
         )}
         {!filter.has('levels') && severity < 7 && (
           <ReportPanel
-            icon={props => <FilterIcon {...props} />}
+            icon={
+              <FilterIcon size="large" onClick={handleSetMinimumSeverity} />
+            }
             title={_("Results aren't filtered by severity.")}
             onClick={handleSetMinimumSeverity}
           >
             {_('Apply a minimum severity of 7.0.')}
           </ReportPanel>
         )}
         <ReportPanel
-          icon={props => <EditIcon {...props} />}
+          icon={<EditIcon size="large" onClick={onFilterEditClick} />}
           title={_('Your filter settings may be too unrefined.')}
           onClick={onFilterEditClick}
         >
@@ -135,13 +150,4 @@ const ThresholdPanel = ({
   );
 };
 
-ThresholdPanel.propTypes = {
-  entityType: PropTypes.string.isRequired,
-  filter: PropTypes.filter.isRequired,
-  isUpdating: PropTypes.bool,
-  threshold: PropTypes.number.isRequired,
-  onFilterChanged: PropTypes.func.isRequired,
-  onFilterEditClick: PropTypes.func.isRequired,
-};
-
 export default ThresholdPanel;