chore(ts): refactor types into separate modules

README.md

@@ -135,3 +135,16 @@ The extraction tool is [`i18next-parser`](https://www.npmjs.com/package/i18next-
 To workaround this, specify static values in `i18n.ts` file under any top-level directory below `src/app`. For example, `src/app/Settings/i18n.ts`.
 
 Refer to [LOCALIZATION.md](LOCALIZATION.md) for more details about our localization framework.
+
+## CONTRIBUTING
+
+### Code consistency
+
+- `[*].types.ts(x)`: Define type definitions, including types and enums.
+- `[*].utils.ts(x)`: Define utility functions. These might contain constants (usually tightly coupled with the utility functions).
+- `[*].const.ts`: Define constants. These constants are purely for UI rendering.
+- `[*].context.tsx`: Define React contexts. These can be defined in util files.
+
+### Code contribution
+
+See [CONTRIBUTING.md](https://github.com/cryostatio/cryostat/blob/main/CONTRIBUTING.md).

src/app/About/About.tsx

@@ -18,8 +18,8 @@ import cryostatLogo from '@app/assets/cryostat_logo_hori_rgb_default.svg';
 import cryostatLogoDark from '@app/assets/cryostat_logo_hori_rgb_reverse.svg';
 import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 import build from '@app/build.json';
-import { ThemeSetting } from '@app/Settings/SettingsUtils';
-import { useTheme } from '@app/utils/useTheme';
+import { ThemeSetting } from '@app/Settings/types';
+import { useTheme } from '@app/utils/hooks/useTheme';
 import { Brand, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

src/app/About/AboutDescription.tsx

@@ -15,7 +15,7 @@
  */
 
 import build from '@app/build.json';
-import { NotificationsContext } from '@app/Notifications/Notifications';
+import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Text, TextContent, TextList, TextListItem, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';

src/app/Agent/AgentLiveProbes.tsx

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { authFailMessage, ErrorView, isAuthFail } from '@app/ErrorView/ErrorView';
-import { LoadingView } from '@app/LoadingView/LoadingView';
+import { ErrorView } from '@app/ErrorView/ErrorView';
+import { authFailMessage, isAuthFail } from '@app/ErrorView/types';
 import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
-import { DeleteOrDisableWarningType } from '@app/Modal/DeleteWarningUtils';
-import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
-import { EventProbe } from '@app/Shared/Services/Api.service';
-import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
+import { DeleteOrDisableWarningType } from '@app/Modal/types';
+import { LoadingView } from '@app/Shared/Components/LoadingView';
+import { LoadingProps } from '@app/Shared/Components/types';
+import { EventProbe, NotificationCategory } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { useSubscriptions } from '@app/utils/useSubscriptions';
+import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { sortResources, TableColumn } from '@app/utils/utils';
 import {
   Button,
@@ -89,10 +89,10 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
 
-  const [probes, setProbes] = React.useState([] as EventProbe[]);
-  const [filteredProbes, setFilteredProbes] = React.useState([] as EventProbe[]);
+  const [probes, setProbes] = React.useState<EventProbe[]>([]);
+  const [filteredProbes, setFilteredProbes] = React.useState<EventProbe[]>([]);
   const [filterText, setFilterText] = React.useState('');
-  const [sortBy, setSortBy] = React.useState({} as ISortBy);
+  const [sortBy, setSortBy] = React.useState<ISortBy>({});
   const [isLoading, setIsLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
   const [warningModalOpen, setWarningModalOpen] = React.useState(false);
@@ -210,7 +210,7 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
         context.target.target(),
         context.notificationChannel.messages(NotificationCategory.ProbeTemplateApplied),
       ]).subscribe(([currentTarget, e]) => {
-        if (currentTarget.connectUrl != e.message.targetId) {
+        if (currentTarget?.connectUrl != e.message.targetId) {
           return;
         }
         setProbes((old) => {
@@ -283,13 +283,13 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
     [filteredProbes],
   );
 
-  const actionLoadingProps = React.useMemo<Record<LiveProbeActions, LoadingPropsType>>(
+  const actionLoadingProps = React.useMemo<Record<LiveProbeActions, LoadingProps>>(
     () => ({
       REMOVE: {
         spinnerAriaValueText: 'Removing',
         spinnerAriaLabel: 'removing-all-probes',
         isLoading: actionLoadings['REMOVE'],
-      } as LoadingPropsType,
+      } as LoadingProps,
     }),
     [actionLoadings],
   );

src/app/Agent/AgentProbeTemplates.tsx

@@ -14,15 +14,14 @@
  * limitations under the License.
  */
 import { ErrorView } from '@app/ErrorView/ErrorView';
-import { LoadingView } from '@app/LoadingView/LoadingView';
 import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
-import { DeleteOrDisableWarningType } from '@app/Modal/DeleteWarningUtils';
-import { FUpload, MultiFileUpload, UploadCallbacks } from '@app/Shared/FileUploads';
-import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
-import { ProbeTemplate } from '@app/Shared/Services/Api.service';
-import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
+import { DeleteOrDisableWarningType } from '@app/Modal/types';
+import { FUpload, MultiFileUpload, UploadCallbacks } from '@app/Shared/Components/FileUploads';
+import { LoadingView } from '@app/Shared/Components/LoadingView';
+import { LoadingProps } from '@app/Shared/Components/types';
+import { ProbeTemplate, NotificationCategory } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { useSubscriptions } from '@app/utils/useSubscriptions';
+import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { TableColumn, portalRoot, sortResources } from '@app/utils/utils';
 import {
   ActionGroup,
@@ -81,18 +80,18 @@ export interface AgentProbeTemplatesProps {
   agentDetected: boolean;
 }
 
-export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = (props) => {
+export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentDetected }) => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
 
-  const [templates, setTemplates] = React.useState([] as ProbeTemplate[]);
-  const [filteredTemplates, setFilteredTemplates] = React.useState([] as ProbeTemplate[]);
+  const [templates, setTemplates] = React.useState<ProbeTemplate[]>([]);
+  const [filteredTemplates, setFilteredTemplates] = React.useState<ProbeTemplate[]>([]);
   const [filterText, setFilterText] = React.useState('');
   const [uploadModalOpen, setUploadModalOpen] = React.useState(false);
-  const [sortBy, setSortBy] = React.useState({} as ISortBy);
+  const [sortBy, setSortBy] = React.useState<ISortBy>({});
   const [isLoading, setIsLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
-  const [templateToDelete, setTemplateToDelete] = React.useState(undefined as ProbeTemplate | undefined);
+  const [templateToDelete, setTemplateToDelete] = React.useState<ProbeTemplate | undefined>(undefined);
   const [warningModalOpen, setWarningModalOpen] = React.useState(false);
 
   const getSortParams = React.useCallback(
@@ -110,7 +109,7 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = (props) =
   );
 
   const handleTemplates = React.useCallback(
-    (templates) => {
+    (templates: ProbeTemplate[]) => {
       setTemplates(templates);
       setIsLoading(false);
       setErrorMessage('');
@@ -267,13 +266,13 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = (props) =
               <AgentTemplateAction
                 template={t}
                 onDelete={handleDeleteAction}
-                onInsert={props.agentDetected ? handleInsertAction : undefined}
+                onInsert={agentDetected ? handleInsertAction : undefined}
               />
             </Td>
           </Tr>
         );
       }),
-    [filteredTemplates, props.agentDetected, handleInsertAction, handleDeleteAction],
+    [filteredTemplates, agentDetected, handleInsertAction, handleDeleteAction],
   );
 
   if (errorMessage != '') {
@@ -357,7 +356,7 @@ export interface AgentProbeTemplateUploadModalProps {
   onClose: () => void;
 }
 
-export const AgentProbeTemplateUploadModal: React.FC<AgentProbeTemplateUploadModalProps> = ({ onClose, ...props }) => {
+export const AgentProbeTemplateUploadModal: React.FC<AgentProbeTemplateUploadModalProps> = ({ onClose, isOpen }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
   const submitRef = React.useRef<HTMLDivElement>(null); // Use ref to refer to submit trigger div
@@ -439,14 +438,14 @@ export const AgentProbeTemplateUploadModal: React.FC<AgentProbeTemplateUploadMod
         spinnerAriaValueText: 'Submitting',
         spinnerAriaLabel: 'submitting-probe-template',
         isLoading: uploading,
-      }) as LoadingPropsType,
+      }) as LoadingProps,
     [uploading],
   );
 
   return (
     <Modal
       appendTo={portalRoot}
-      isOpen={props.isOpen}
+      isOpen={isOpen}
       variant={ModalVariant.large}
       showClose={true}
       onClose={handleClose}
@@ -496,24 +495,24 @@ export interface AgentTemplateActionProps {
   onDelete: (template: ProbeTemplate) => void;
 }
 
-export const AgentTemplateAction: React.FC<AgentTemplateActionProps> = ({ onInsert, onDelete, ...props }) => {
+export const AgentTemplateAction: React.FC<AgentTemplateActionProps> = ({ onInsert, onDelete, template }) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const actionItems = React.useMemo(() => {
     return [
       {
         key: 'insert-template',
         title: 'Insert Probes...',
-        onClick: () => onInsert && onInsert(props.template),
+        onClick: () => onInsert && onInsert(template),
         isDisabled: !onInsert,
       },
       {
         key: 'delete-template',
         title: 'Delete',
-        onClick: () => onDelete(props.template),
+        onClick: () => onDelete(template),
       },
     ];
-  }, [onInsert, onDelete, props.template]);
+  }, [onInsert, onDelete, template]);
 
   return (
     <Dropdown

src/app/AppLayout/AppLayout.tsx

@@ -14,21 +14,26 @@
  * limitations under the License.
  */
 import { AboutCryostatModal } from '@app/About/AboutCryostatModal';
+import { AuthModal } from '@app/AppLayout/AuthModal';
+import { NotificationCenter } from '@app/AppLayout/NotificationCenter';
+import { SslErrorModal } from '@app/AppLayout/SslErrorModal';
 import cryostatLogo from '@app/assets/cryostat_logo_hori_rgb_reverse.svg';
 import build from '@app/build.json';
+import CryostatJoyride from '@app/Joyride/CryostatJoyride';
 import { useJoyride } from '@app/Joyride/JoyrideProvider';
-import { NotificationCenter } from '@app/Notifications/NotificationCenter';
-import { Notification, NotificationsContext } from '@app/Notifications/Notifications';
+import { GlobalQuickStartDrawer } from '@app/QuickStarts/QuickStartDrawer';
 import { IAppRoute, navGroups, routes } from '@app/routes';
-import { selectTab, SettingTab, tabAsParam, ThemeSetting } from '@app/Settings/SettingsUtils';
-import { DynamicFeatureFlag, FeatureFlag } from '@app/Shared/FeatureFlag/FeatureFlag';
-import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
+import { ThemeSetting, SettingTab } from '@app/Settings/types';
+import { selectTab, tabAsParam } from '@app/Settings/utils';
+import { DynamicFeatureFlag, FeatureFlag } from '@app/Shared/Components/FeatureFlag';
+import { NotificationCategory, Notification } from '@app/Shared/Services/api.types';
+import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
+import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { FeatureLevel } from '@app/Shared/Services/Settings.service';
+import { useLogin } from '@app/utils/hooks/useLogin';
+import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
+import { useTheme } from '@app/utils/hooks/useTheme';
 import { saveToLocalStorage } from '@app/utils/LocalStorage';
-import { useLogin } from '@app/utils/useLogin';
-import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { useTheme } from '@app/utils/useTheme';
 import { cleanDataId, isAssetNew, openTabForUrl, portalRoot } from '@app/utils/utils';
 import {
   Alert,
@@ -78,15 +83,12 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, matchPath, NavLink, useHistory, useLocation } from 'react-router-dom';
 import { map } from 'rxjs/operators';
-import CryostatJoyride from '../Joyride/CryostatJoyride';
-import { GlobalQuickStartDrawer } from '../QuickStarts/QuickStartDrawer';
-import { AuthModal } from './AuthModal';
-import { SslErrorModal } from './SslErrorModal';
-interface AppLayoutProps {
-  children: React.ReactNode;
+
+export interface AppLayoutProps {
+  children?: React.ReactNode;
 }
 
-const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
+export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const serviceContext = React.useContext(ServiceContext);
   const notificationsContext = React.useContext(NotificationsContext);
   const addSubscription = useSubscriptions();
@@ -608,5 +610,3 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     </GlobalQuickStartDrawer>
   );
 };
-
-export { AppLayout };

src/app/AppLayout/AuthModal.tsx

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { NullableTarget, Target } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { NO_TARGET, Target } from '@app/Shared/Services/Target.service';
-import { useSubscriptions } from '@app/utils/useSubscriptions';
+import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { Modal, ModalVariant, Text } from '@patternfly/react-core';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
@@ -26,10 +26,10 @@ export interface AuthModalProps {
   visible: boolean;
   onDismiss: () => void;
   onSave: () => void;
-  targetObs: Observable<Target>;
+  targetObs: Observable<NullableTarget>;
 }
 
-export const AuthModal: React.FC<AuthModalProps> = ({ onDismiss, onSave: onPropsSave, targetObs, ...props }) => {
+export const AuthModal: React.FC<AuthModalProps> = ({ onDismiss, onSave: onPropsSave, targetObs, visible }) => {
   const context = React.useContext(ServiceContext);
   const [loading, setLoading] = React.useState(false);
   const addSubscription = useSubscriptions();
@@ -40,9 +40,9 @@ export const AuthModal: React.FC<AuthModalProps> = ({ onDismiss, onSave: onProps
       addSubscription(
         targetObs
           .pipe(
-            filter((target) => target !== NO_TARGET),
+            filter((target) => !!target),
             first(),
-            map((target) => target.connectUrl),
+            map((target: Target) => target.connectUrl),
             mergeMap((connectUrl) => context.authCredentials.setCredential(connectUrl, username, password)),
           )
           .subscribe((ok) => {
@@ -58,7 +58,7 @@ export const AuthModal: React.FC<AuthModalProps> = ({ onDismiss, onSave: onProps
 
   return (
     <Modal
-      isOpen={props.visible}
+      isOpen={visible}
       variant={ModalVariant.large}
       showClose={!loading}
       onClose={onDismiss}

src/app/AppLayout/CredentialAuthForm.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
+import { LoadingProps } from '@app/Shared/Components/types';
 import { ActionGroup, Button, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import * as React from 'react';
 
@@ -69,7 +69,7 @@ export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({
         spinnerAriaValueText: 'Saving',
         spinnerAriaLabel: 'saving-credentials',
         isLoading: loading,
-      }) as LoadingPropsType,
+      }) as LoadingProps,
     [loading],
   );