chore(eslint): apply eslint fixes and remove unused codes (#1044)

* chore(eslint): apply eslint fixes and remove unused codes

* fix(notification): fix potential infinite effect

src/app/About/AboutCryostatModal.tsx

@@ -40,11 +40,16 @@ import cryostatLogo from '@app/assets/cryostat_icon_rgb_reverse.svg';
 import build from '@app/build.json';
 import { portalRoot } from '@app/utils/utils';
 import { AboutModal } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AboutDescription } from './AboutDescription';
 
-export const AboutCryostatModal = ({ isOpen, onClose }) => {
+export interface AboutCryostatModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const AboutCryostatModal: React.FC<AboutCryostatModalProps> = ({ isOpen, onClose }) => {
   const { t } = useTranslation();
   return (
     <AboutModal

src/app/About/AboutDescription.tsx

@@ -40,10 +40,10 @@ import build from '@app/build.json';
 import { NotificationsContext } from '@app/Notifications/Notifications';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Text, TextContent, TextList, TextListItem, TextVariants } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const AboutDescription = () => {
+export const AboutDescription: React.FC = () => {
   const serviceContext = React.useContext(ServiceContext);
   const notificationsContext = React.useContext(NotificationsContext);
   const [cryostatVersion, setCryostatVersion] = React.useState(undefined as string | undefined);

src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx

@@ -52,9 +52,7 @@ export interface ClickableAutomatedAnalysisLabelProps {
 
 export const clickableAutomatedAnalysisKey = 'clickable-automated-analysis-label';
 
-export const ClickableAutomatedAnalysisLabel: React.FunctionComponent<ClickableAutomatedAnalysisLabelProps> = ({
-  label,
-}) => {
+export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysisLabelProps> = ({ label }) => {
   const { t } = useTranslation();
 
   const [isHoveredOrFocused, setIsHoveredOrFocused] = React.useState(false);

src/app/Dashboard/DashboardCardActionMenu.tsx

@@ -46,7 +46,7 @@ export interface DashboardCardActionProps {
   onResetSize: () => void;
 }
 
-export const DashboardCardActionMenu: React.FunctionComponent<DashboardCardActionProps> = ({
+export const DashboardCardActionMenu: React.FC<DashboardCardActionProps> = ({
   onRemove,
   onResetSize,
   onView,

src/app/Dashboard/DashboardLayoutToolbar.tsx

@@ -101,7 +101,7 @@ const DefaultSelectedTemplate: SelectedLayoutTemplate = {
   category: 'Suggested',
 };
 
-export const DashboardLayoutToolbar: React.FunctionComponent<DashboardLayoutToolbarProps> = (_props) => {
+export const DashboardLayoutToolbar: React.FC<DashboardLayoutToolbarProps> = (_props) => {
   const dispatch = useDispatch<StateDispatch>();
   const context = React.useContext(ServiceContext);
   const { t } = useTranslation();

src/app/Dashboard/DraggableRef.tsx

@@ -164,11 +164,7 @@ export interface DraggableRefProps {
   dashboardId: number;
 }
 
-export const DraggableRef: React.FunctionComponent<DraggableRefProps> = ({
-  children,
-  dashboardId,
-  ..._props
-}: DraggableRefProps) => {
+export const DraggableRef: React.FC<DraggableRefProps> = ({ children, dashboardId, ..._props }: DraggableRefProps) => {
   const dispatch = useDispatch();
   const wrapperRef = React.useRef<HTMLDivElement>(null);
 

src/app/Dashboard/ResizableRef.tsx

@@ -60,7 +60,7 @@ export function handleDisabledElements(disabled: boolean): void {
   disabledElements.forEach((el) => (el.style['pointer-events'] = disabled ? 'none' : 'auto'));
 }
 
-export const ResizableRef: React.FunctionComponent<ResizableRefProps> = ({
+export const ResizableRef: React.FC<ResizableRefProps> = ({
   cardId: dashboardId,
   cardSizes,
   ..._props

src/app/DateTimePicker/TimezonePicker.tsx

@@ -56,7 +56,7 @@ export interface TimezonePickerProps {
   selected: Timezone;
 }
 
-export const TimezonePicker: React.FunctionComponent<TimezonePickerProps> = ({
+export const TimezonePicker: React.FC<TimezonePickerProps> = ({
   isFlipEnabled = true,
   isCompact,
   menuAppendTo = 'parent',

src/app/Events/EventTemplates.tsx

@@ -439,10 +439,7 @@ export interface EventTemplatesUploadModalProps {
   onClose: () => void;
 }
 
-export const EventTemplatesUploadModal: React.FunctionComponent<EventTemplatesUploadModalProps> = ({
-  onClose,
-  ...props
-}) => {
+export const EventTemplatesUploadModal: React.FC<EventTemplatesUploadModalProps> = ({ onClose, ...props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
   const submitRef = React.useRef<HTMLDivElement>(null); // Use ref to refer to submit trigger div

src/app/Login/OpenShiftPlaceholderAuthForm.tsx

@@ -45,7 +45,7 @@ import * as React from 'react';
 import { combineLatest } from 'rxjs';
 import { FormProps } from './FormProps';
 
-export const OpenShiftPlaceholderAuthForm: React.FunctionComponent<FormProps> = ({ onSubmit }) => {
+export const OpenShiftPlaceholderAuthForm: React.FC<FormProps> = ({ onSubmit }) => {
   const context = React.useContext(ServiceContext);
   const notifications = React.useContext(NotificationsContext);
   const [showPermissionDenied, setShowPermissionDenied] = React.useState(false);

src/app/Modal/CancelUploadModal.tsx

@@ -48,7 +48,7 @@ export interface CancelUploadModalProps {
   message: string;
 }
 
-export const CancelUploadModal: React.FunctionComponent<CancelUploadModalProps> = (props) => {
+export const CancelUploadModal: React.FC<CancelUploadModalProps> = (props) => {
   return (
     <Modal
       appendTo={portalRoot}

src/app/NotFound/NotFound.tsx

@@ -55,7 +55,7 @@ import { NotFoundCard } from './NotFoundCard';
 
 export interface NotFoundProps {}
 
-export const NotFound: React.FunctionComponent<NotFoundProps> = (_) => {
+export const NotFound: React.FC<NotFoundProps> = (_) => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
   const [activeLevel, setActiveLevel] = React.useState(FeatureLevel.PRODUCTION);

src/app/Notifications/NotificationCenter.tsx

@@ -59,6 +59,10 @@ import * as React from 'react';
 import { combineLatest } from 'rxjs';
 import { Notification, NotificationsContext } from './Notifications';
 
+const countUnreadNotifications = (notifications: Notification[]) => {
+  return notifications.filter((n) => !n.read).length;
+};
+
 export interface NotificationCenterProps {
   onClose: () => void;
 }
@@ -70,24 +74,19 @@ export interface NotificationDrawerCategory {
   unreadCount: number;
 }
 
-export const NotificationCenter: React.FunctionComponent<NotificationCenterProps> = (props) => {
+export const NotificationCenter: React.FC<NotificationCenterProps> = (props) => {
   const [dayjs, datetimeContext] = useDayjs();
   const context = React.useContext(NotificationsContext);
   const addSubscription = useSubscriptions();
 
   const [totalUnreadNotificationsCount, setTotalUnreadNotificationsCount] = React.useState(0);
   const [isHeaderDropdownOpen, setHeaderDropdownOpen] = React.useState(false);
-  const PROBLEMS_CATEGORY_IDX = 2;
   const [drawerCategories, setDrawerCategories] = React.useState([
     { title: 'Completed Actions', isExpanded: true, notifications: [] as Notification[], unreadCount: 0 },
     { title: 'Cryostat Status', isExpanded: false, notifications: [] as Notification[], unreadCount: 0 },
-    { title: 'Problems', isExpanded: false, notifications: [] as Notification[], unreadCount: 0 },
+    { title: 'Problems', isExpanded: true, notifications: [] as Notification[], unreadCount: 0 },
   ] as NotificationDrawerCategory[]);
 
-  const countUnreadNotifications = (notifications: Notification[]) => {
-    return notifications.filter((n) => !n.read).length;
-  };
-
   React.useEffect(() => {
     addSubscription(
       combineLatest([
@@ -104,7 +103,7 @@ export const NotificationCenter: React.FunctionComponent<NotificationCenterProps
         });
       })
     );
-  }, [addSubscription, context, context.notifications, setDrawerCategories]);
+  }, [addSubscription, context, setDrawerCategories]);
 
   React.useEffect(() => {
     addSubscription(
@@ -130,20 +129,6 @@ export const NotificationCenter: React.FunctionComponent<NotificationCenterProps
     [setDrawerCategories]
   );
 
-  // Expands the Problems tab when unread errors/warnings are present
-  React.useEffect(() => {
-    if (drawerCategories[PROBLEMS_CATEGORY_IDX].unreadCount === 0) {
-      return;
-    }
-
-    setDrawerCategories((drawerCategories) => {
-      return drawerCategories.map((category: NotificationDrawerCategory, idx) => {
-        category.isExpanded = idx === PROBLEMS_CATEGORY_IDX;
-        return category;
-      });
-    });
-  }, [setDrawerCategories, drawerCategories]);
-
   const handleMarkAllRead = React.useCallback(() => {
     context.markAllRead();
   }, [context]);

src/app/QuickStarts/QuickStartsCatalogPage.tsx

@@ -42,7 +42,7 @@ import { withRouter } from 'react-router-dom';
 
 export interface QuickStartsCatalogPageProps {}
 
-const QuickStartsCatalogPage: React.FunctionComponent<QuickStartsCatalogPageProps> = (_) => {
+const QuickStartsCatalogPage: React.FC<QuickStartsCatalogPageProps> = (_) => {
   const { t } = useTranslation();
 
   // TODO: Quick start categories (patternfly/quickstarts supports this through individual components)

src/app/RecordingMetadata/BulkEditLabels.tsx

@@ -65,7 +65,7 @@ export interface BulkEditLabelsProps {
   directoryRecordings?: ArchivedRecording[];
 }
 
-export const BulkEditLabels: React.FunctionComponent<BulkEditLabelsProps> = (props) => {
+export const BulkEditLabels: React.FC<BulkEditLabelsProps> = (props) => {
   const context = React.useContext(ServiceContext);
   const [recordings, setRecordings] = React.useState([] as Recording[]);
   const [editing, setEditing] = React.useState(false);

src/app/RecordingMetadata/ClickableLabel.tsx

@@ -46,7 +46,7 @@ export interface ClickableLabelCellProps {
   onLabelClick: (label: RecordingLabel) => void;
 }
 
-export const ClickableLabel: React.FunctionComponent<ClickableLabelCellProps> = ({ onLabelClick, ...props }) => {
+export const ClickableLabel: React.FC<ClickableLabelCellProps> = ({ onLabelClick, ...props }) => {
   const [isHoveredOrFocused, setIsHoveredOrFocused] = React.useState(false);
   const labelColor = React.useMemo(() => (props.isSelected ? 'blue' : 'grey'), [props.isSelected]);
 

src/app/RecordingMetadata/LabelCell.tsx

@@ -53,7 +53,7 @@ export interface LabelCellProps {
   };
 }
 
-export const LabelCell: React.FunctionComponent<LabelCellProps> = (props) => {
+export const LabelCell: React.FC<LabelCellProps> = (props) => {
   const isLabelSelected = React.useCallback(
     (label: RecordingLabel) => {
       if (props.clickableOptions) {

src/app/RecordingMetadata/RecordingLabelFields.tsx

@@ -76,11 +76,7 @@ const matchesLabelSyntax = (l: RecordingLabel) => {
   return l && LabelPattern.test(l.key) && LabelPattern.test(l.value);
 };
 
-export const RecordingLabelFields: React.FunctionComponent<RecordingLabelFieldsProps> = ({
-  setLabels,
-  setValid,
-  ...props
-}) => {
+export const RecordingLabelFields: React.FC<RecordingLabelFieldsProps> = ({ setLabels, setValid, ...props }) => {
   const inputRef = React.useRef<HTMLInputElement>(null); // Use ref to refer to child component
   const addSubscription = useSubscriptions();
   const { t } = useTranslation();

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -137,7 +137,7 @@ export interface ActiveRecordingsTableProps {
   toolbarBreakReference?: HTMLElement | (() => HTMLElement);
 }
 
-export const ActiveRecordingsTable: React.FunctionComponent<ActiveRecordingsTableProps> = (props) => {
+export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (props) => {
   const context = React.useContext(ServiceContext);
 
   const routerHistory = useHistory();
@@ -603,7 +603,7 @@ export interface ActiveRecordingsToolbarProps {
   toolbarBreakReference?: HTMLElement | (() => HTMLElement);
 }
 
-const ActiveRecordingsToolbar: React.FunctionComponent<ActiveRecordingsToolbarProps> = (props) => {
+const ActiveRecordingsToolbar: React.FC<ActiveRecordingsToolbarProps> = (props) => {
   const context = React.useContext(ServiceContext);
   const [warningModalOpen, setWarningModalOpen] = React.useState(false);
   const [actionToggleOpen, setActionToggleOpen] = React.useState(false);

src/app/Recordings/Filters/DatetimeFilter.tsx

@@ -108,7 +108,7 @@ const _emptyDatetimeInput: {
   validation: ValidatedOptions.default,
 };
 
-export const DateTimeFilter: React.FunctionComponent<DateTimeFilterProps> = ({ onSubmit }) => {
+export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({ onSubmit }) => {
   const [dayjs, datetimeContext] = useDayjs();
   const [datetimeInput, setDatetimeInput] = React.useState(_emptyDatetimeInput);
   const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);

src/app/Recordings/Filters/LabelFilter.tsx

@@ -49,7 +49,7 @@ export interface LabelFilterProps {
 
 export const getLabelDisplay = (label: RecordingLabel) => `${label.key}:${label.value}`;
 
-export const LabelFilter: React.FunctionComponent<LabelFilterProps> = ({ recordings, filteredLabels, onSubmit }) => {
+export const LabelFilter: React.FC<LabelFilterProps> = ({ recordings, filteredLabels, onSubmit }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   const onSelect = React.useCallback(

src/app/Recordings/Filters/NameFilter.tsx

@@ -46,7 +46,7 @@ export interface NameFilterProps {
   onSubmit: (inputName: string) => void;
 }
 
-export const NameFilter: React.FunctionComponent<NameFilterProps> = ({ recordings, filteredNames, onSubmit }) => {
+export const NameFilter: React.FC<NameFilterProps> = ({ recordings, filteredNames, onSubmit }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   const onSelect = React.useCallback(

src/app/Recordings/Filters/RecordingStateFilter.tsx

@@ -45,10 +45,7 @@ export interface RecordingStateFilterProps {
   onSelectToggle: (state: RecordingState) => void;
 }
 
-export const RecordingStateFilter: React.FunctionComponent<RecordingStateFilterProps> = ({
-  filteredStates,
-  onSelectToggle,
-}) => {
+export const RecordingStateFilter: React.FC<RecordingStateFilterProps> = ({ filteredStates, onSelectToggle }) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onSelect = React.useCallback(

src/app/Recordings/RecordingActions.tsx

@@ -59,7 +59,7 @@ export interface RecordingActionsProps {
   uploadFn: () => Observable<boolean>;
 }
 
-export const RecordingActions: React.FunctionComponent<RecordingActionsProps> = (props) => {
+export const RecordingActions: React.FC<RecordingActionsProps> = (props) => {
   const context = React.useContext(ServiceContext);
   const notifications = React.useContext(NotificationsContext);
   const [grafanaEnabled, setGrafanaEnabled] = React.useState(false);

src/app/Recordings/RecordingLabelsPanel.tsx

@@ -56,7 +56,7 @@ export interface RecordingLabelsPanelProps {
   directoryRecordings?: ArchivedRecording[];
 }
 
-export const RecordingLabelsPanel: React.FunctionComponent<RecordingLabelsPanelProps> = (props) => {
+export const RecordingLabelsPanel: React.FC<RecordingLabelsPanelProps> = (props) => {
   return (
     <DrawerPanelContent isResizable>
       <DrawerHead>

src/app/Recordings/RecordingsTable.tsx

@@ -83,7 +83,7 @@ export interface RecordingsTableProps {
   children: React.ReactNode;
 }
 
-export const RecordingsTable: React.FunctionComponent<RecordingsTableProps> = ({
+export const RecordingsTable: React.FC<RecordingsTableProps> = ({
   toolbar,
   tableColumns,
   tableTitle,

src/app/Recordings/ReportFrame.tsx

@@ -48,7 +48,7 @@ export interface ReportFrameProps extends React.HTMLProps<HTMLIFrameElement> {
   recording: Recording;
 }
 
-export const ReportFrame: React.FunctionComponent<ReportFrameProps> = (props) => {
+export const ReportFrame: React.FC<ReportFrameProps> = (props) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
   const [report, setReport] = React.useState(undefined as string | undefined);

src/app/SecurityPanel/CertificateUploadModal.tsx

@@ -50,7 +50,7 @@ export interface CertificateUploadModalProps {
   onClose: () => void;
 }
 
-export const CertificateUploadModal: React.FunctionComponent<CertificateUploadModalProps> = ({ visible, onClose }) => {
+export const CertificateUploadModal: React.FC<CertificateUploadModalProps> = ({ visible, onClose }) => {
   const addSubscriptions = useSubscriptions();
   const context = React.useContext(ServiceContext);
   const submitRef = React.useRef<HTMLDivElement>(null); // Use ref to refer to submit trigger div

src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx

@@ -72,7 +72,7 @@ export interface CreateCredentialModalProps {
   onPropsSave: () => void;
 }
 
-export const CreateCredentialModal: React.FunctionComponent<CreateCredentialModalProps> = ({
+export const CreateCredentialModal: React.FC<CreateCredentialModalProps> = ({
   visible,
   onDismiss,
   onPropsSave,

src/app/SecurityPanel/Credentials/MatchedTargetsTable.tsx

@@ -76,7 +76,7 @@ const tableColumns: TableColumn[] = [
   },
 ];
 
-export const MatchedTargetsTable: React.FunctionComponent<MatchedTargetsTableProps> = ({ id, matchExpression }) => {
+export const MatchedTargetsTable: React.FC<MatchedTargetsTableProps> = ({ id, matchExpression }) => {
   const context = React.useContext(ServiceContext);
 
   const [targets, setTargets] = React.useState([] as Target[]);

src/app/SecurityPanel/SecurityPanel.tsx

@@ -43,7 +43,7 @@ import { ImportCertificate } from './ImportCertificate';
 
 export interface SecurityPanelProps {}
 
-export const SecurityPanel: React.FunctionComponent<SecurityPanelProps> = (_) => {
+export const SecurityPanel: React.FC<SecurityPanelProps> = (_) => {
   const securityCards = [ImportCertificate, StoreCredentialsCard].map((c) => ({
     title: c.title,
     description: c.description,
@@ -70,5 +70,5 @@ export default SecurityPanel;
 export interface SecurityCard {
   title: string;
   description: JSX.Element | string;
-  content: React.FunctionComponent;
+  content: React.FC;
 }