chore(ts): refactor types into separate modules

Signed-off-by: Thuan Vo <[email protected]>

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx

@@ -624,7 +624,7 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
                 key={topic}
               >
                 {evaluations.map((evaluation) => {
-                  return <ClickableAutomatedAnalysisLabel label={evaluation} key={clickableAutomatedAnalysisKey} />;
+                  return <ClickableAutomatedAnalysisLabel result={evaluation} key={clickableAutomatedAnalysisKey} />;
                 })}
               </LabelGroup>
             </GridItem>

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.tsx

@@ -43,7 +43,7 @@ export interface AutomatedAnalysisCardListProps {
   evaluations: CategorizedRuleEvaluations[];
 }
 
-export const AutomatedAnalysisCardList: React.FC<AutomatedAnalysisCardListProps> = (props) => {
+export const AutomatedAnalysisCardList: React.FC<AutomatedAnalysisCardListProps> = ({ evaluations }) => {
   const { t } = useTranslation();
 
   const [sortBy, setSortBy] = React.useState<ISortBy>({});
@@ -80,7 +80,7 @@ export const AutomatedAnalysisCardList: React.FC<AutomatedAnalysisCardListProps>
   );
 
   const flatFiltered = React.useMemo(() => {
-    return props.evaluations
+    return evaluations
       .flatMap(([_, evaluations]) => {
         return evaluations.map((evaluation) => evaluation);
       })
@@ -108,7 +108,7 @@ export const AutomatedAnalysisCardList: React.FC<AutomatedAnalysisCardListProps>
         }
         return 0;
       });
-  }, [sortBy, props.evaluations]);
+  }, [sortBy, evaluations]);
 
   return (
     <OuterScrollContainer className="automated-analysis-datalist-outerscroll">

src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx

@@ -25,12 +25,12 @@ import { useTranslation } from 'react-i18next';
 import { transformAADescription } from './utils';
 
 export interface ClickableAutomatedAnalysisLabelProps {
-  label: AnalysisResult;
+  result: AnalysisResult;
 }
 
 export const clickableAutomatedAnalysisKey = 'clickable-automated-analysis-label';
 
-export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysisLabelProps> = ({ label: result }) => {
+export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysisLabelProps> = ({ result }) => {
   const { t } = useTranslation();
 
   const [isHoveredOrFocused, setIsHoveredOrFocused] = React.useState(false);
@@ -83,7 +83,7 @@ export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysi
 
   return (
     <Popover
-      aria-label={t('ClickableAutomatedAnalysisLabel.ARIA_LABELS.POPOVER')}
+      aria-label={t('ClickableAutomatedAnalysisresult.ARIA_LABELS.POPOVER')}
       isVisible={isDescriptionVisible}
       headerContent={<div className={`${clickableAutomatedAnalysisKey}-popover-header`}>{result.name}</div>}
       alertSeverityVariant={alertPopoverVariant}

src/app/Dashboard/AutomatedAnalysis/utils.tsx

@@ -13,13 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AnalysisResult } from '@app/Shared/Services/api.types';
-import { Stack, StackItem, Title, Label, Text } from '@patternfly/react-core';
+import { AnalysisResult, Evaluation } from '@app/Shared/Services/api.types';
+import { Stack, StackItem, Label, Title, Text } from '@patternfly/react-core';
 import _ from 'lodash';
 import * as React from 'react';
 
 export const transformAADescription = (result: AnalysisResult): JSX.Element => {
-  const format = (s): JSX.Element => {
+  const format = (s: Evaluation): JSX.Element => {
     if (typeof s === 'string') {
       return <Text>{s}</Text>;
     }

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -15,8 +15,8 @@
  */
 
 import {
-  clickableAutomatedAnalysisKey,
   ClickableAutomatedAnalysisLabel,
+  clickableAutomatedAnalysisKey,
 } from '@app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel';
 import { authFailMessage } from '@app/ErrorView/types';
 import { DeleteOrDisableWarningType } from '@app/Modal/types';
@@ -33,8 +33,14 @@ import {
   RootState,
   StateDispatch,
 } from '@app/Shared/Redux/ReduxStore';
-import { ActiveRecording, NotificationCategory, RecordingState, Target } from '@app/Shared/Services/api.types';
-import { AnalysisResult, CategorizedRuleEvaluations } from '@app/Shared/Services/Report.service';
+import {
+  ActiveRecording,
+  AnalysisResult,
+  CategorizedRuleEvaluations,
+  NotificationCategory,
+  RecordingState,
+  Target,
+} from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useDayjs } from '@app/utils/hooks/useDayjs';
 import { useSort } from '@app/utils/hooks/useSort';
@@ -555,8 +561,8 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
           >
             {filteredRecordings.map((r) => (
               <ActiveRecordingRow
-                targetConnectUrl={targetConnectURL}
                 key={r.name}
+                targetConnectUrl={targetConnectURL}
                 recording={r}
                 labelFilters={targetRecordingFilters.Label}
                 index={r.id}
@@ -845,6 +851,8 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
 }) => {
   const [dayjs, datetimeContext] = useDayjs();
   const context = React.useContext(ServiceContext);
+  const [loadingAnalysis, setLoadingAnalysis] = React.useState(false);
+  const [analyses, setAnalyses] = React.useState<CategorizedRuleEvaluations[]>([]);
 
   const expandedRowId = React.useMemo(
     () => `active-table-row-${recording.name}-${recording.startTime}-exp`,
@@ -868,9 +876,6 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
     [index, handleRowCheck],
   );
 
-  const [loadingAnalysis, setLoadingAnalysis] = React.useState(false);
-  const [analyses, setAnalyses] = React.useState<CategorizedRuleEvaluations[]>([]);
-
   const handleLoadAnalysis = React.useCallback(() => {
     setLoadingAnalysis(true);
     context.reports
@@ -1031,7 +1036,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
                       >
                         {evaluations.map((evaluation) => {
                           return (
-                            <ClickableAutomatedAnalysisLabel label={evaluation} key={clickableAutomatedAnalysisKey} />
+                            <ClickableAutomatedAnalysisLabel result={evaluation} key={clickableAutomatedAnalysisKey} />
                           );
                         })}
                       </LabelGroup>

src/app/Recordings/ArchivedRecordingsTable.tsx

@@ -16,8 +16,8 @@
 
 import { ArchiveUploadModal } from '@app/Archives/ArchiveUploadModal';
 import {
-  clickableAutomatedAnalysisKey,
   ClickableAutomatedAnalysisLabel,
+  clickableAutomatedAnalysisKey,
 } from '@app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel';
 import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
 import { DeleteOrDisableWarningType } from '@app/Modal/types';
@@ -41,8 +41,9 @@ import {
   UPLOADS_SUBDIRECTORY,
   NotificationCategory,
   NullableTarget,
+  CategorizedRuleEvaluations,
+  AnalysisResult,
 } from '@app/Shared/Services/api.types';
-import { AnalysisResult, CategorizedRuleEvaluations } from '@app/Shared/Services/Report.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSort } from '@app/utils/hooks/useSort';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
@@ -768,6 +769,8 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
   updateFilters,
 }) => {
   const context = React.useContext(ServiceContext);
+  const [loadingAnalysis, setLoadingAnalysis] = React.useState(false);
+  const [analyses, setAnalyses] = React.useState<CategorizedRuleEvaluations[]>([]);
 
   const parsedLabels = React.useMemo(() => {
     return parseLabels(recording.metadata.labels);
@@ -790,9 +793,6 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
     [index, handleRowCheck],
   );
 
-  const [loadingAnalysis, setLoadingAnalysis] = React.useState(false);
-  const [analyses, setAnalyses] = React.useState<CategorizedRuleEvaluations[]>([]);
-
   React.useEffect(() => {
     if (!isExpanded) {
       return;
@@ -911,7 +911,7 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
                       >
                         {evaluations.map((evaluation) => {
                           return (
-                            <ClickableAutomatedAnalysisLabel label={evaluation} key={clickableAutomatedAnalysisKey} />
+                            <ClickableAutomatedAnalysisLabel result={evaluation} key={clickableAutomatedAnalysisKey} />
                           );
                         })}
                       </LabelGroup>
@@ -924,7 +924,7 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
         </Td>
       </Tr>
     );
-  }, [index, isExpanded, loadingAnalysis, analyses]);
+  }, [index, isExpanded, analyses, loadingAnalysis]);
 
   return (
     <Tbody key={index} isExpanded={isExpanded}>

src/app/utils/fakeData.ts

@@ -33,8 +33,8 @@ import {
   NullableTarget,
   EventType,
   CachedReportValue,
-  SimpleResponse,
   AnalysisResult,
+  SimpleResponse,
 } from '@app/Shared/Services/api.types';
 import { LoginService } from '@app/Shared/Services/Login.service';
 import { NotificationService, NotificationsInstance } from '@app/Shared/Services/Notifications.service';
@@ -107,9 +107,9 @@ export const fakeEvaluations: AnalysisResult[] = [
     },
   },
   {
-    topic: 'classloading',
     name: 'Class Leak',
     score: 0,
+    topic: 'classloading',
     evaluation: {
       summary: 'leaked classes',
       explanation: 'classes were loaded and leaked',
@@ -124,9 +124,9 @@ export const fakeEvaluations: AnalysisResult[] = [
     },
   },
   {
-    topic: 'classloading',
     name: 'Class Loading Pressure',
     score: 0,
+    topic: 'classloading',
     evaluation: {
       summary: 'too much loading pressure',
       explanation: 'lots of classloading slowing things down',
@@ -141,9 +141,9 @@ export const fakeEvaluations: AnalysisResult[] = [
     },
   },
   {
-    topic: 'jvm_information',
     name: 'Discouraged Management Agent Settings',
     score: 50,
+    topic: 'jvm_information',
     evaluation: {
       summary: 'bad settings set',
       explanation: 'these settings can cause problems',
@@ -158,9 +158,9 @@ export const fakeEvaluations: AnalysisResult[] = [
     },
   },
   {
-    topic: 'exceptions',
     name: 'Thrown Exceptions',
     score: 0.2,
+    topic: 'exceptions',
     evaluation: {
       summary: 'many exceptions thrown which is slow',
       explanation: 'exception processing is slower than normal code execution',

src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.test.tsx

@@ -17,10 +17,10 @@ import { AutomatedAnalysisCard } from '@app/Dashboard/AutomatedAnalysis/Automate
 import { RootState } from '@app/Shared/Redux/ReduxStore';
 import {
   CachedReportValue,
+  AnalysisResult,
   ArchivedRecording,
   FAILED_REPORT_MESSAGE,
   NO_RECORDINGS_MESSAGE,
-  AnalysisResult,
   automatedAnalysisRecordingName,
 } from '@app/Shared/Services/api.types';
 import { defaultAutomatedAnalysisRecordingConfig } from '@app/Shared/Services/service.types';
@@ -49,9 +49,9 @@ const mockEmptyCachedReport: CachedReportValue = {
 };
 
 const mockRuleEvaluation1: AnalysisResult = {
-  topic: 'myTopic',
   name: 'rule1',
   score: 100,
+  topic: 'myTopic',
   evaluation: {
     summary: 'rule1 summary',
     explanation: 'rule1 explanation',
@@ -67,9 +67,9 @@ const mockRuleEvaluation1: AnalysisResult = {
 };
 
 const mockRuleEvaluation2: AnalysisResult = {
-  topic: 'fakeTopic',
   name: 'rule2',
   score: 0,
+  topic: 'fakeTopic',
   evaluation: {
     summary: 'rule2 summary',
     explanation: 'rule2 explanation',
@@ -85,9 +85,9 @@ const mockRuleEvaluation2: AnalysisResult = {
 };
 
 const mockRuleEvaluation3: AnalysisResult = {
-  topic: 'fakeTopic',
   name: 'rule3',
   score: 55,
+  topic: 'fakeTopic',
   evaluation: {
     summary: 'rule3 summary',
     explanation: 'rule3 explanation',
@@ -103,9 +103,9 @@ const mockRuleEvaluation3: AnalysisResult = {
 };
 
 const mockNaRuleEvaluation: AnalysisResult = {
-  topic: 'fakeTopic',
   name: 'N/A rule',
   score: -1,
+  topic: 'fakeTopic',
   evaluation: {
     summary: 'NArule summary',
     explanation: 'NArule explanation',

src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.test.tsx

@@ -23,9 +23,9 @@ import { Provider } from 'react-redux';
 import renderer, { act } from 'react-test-renderer';
 
 const mockRuleEvaluation1: AnalysisResult = {
-  topic: 'myTopic',
   name: 'rule1',
   score: 100,
+  topic: 'myTopic',
   evaluation: {
     summary: 'first thing happened',
     explanation: 'first reason',
@@ -41,9 +41,9 @@ const mockRuleEvaluation1: AnalysisResult = {
 };
 
 const mockRuleEvaluation2: AnalysisResult = {
-  topic: 'fakeTopic',
   name: 'rule2',
   score: 0,
+  topic: 'fakeTopic',
   evaluation: {
     summary: 'second thing happened',
     explanation: 'second reason',
@@ -53,9 +53,9 @@ const mockRuleEvaluation2: AnalysisResult = {
 };
 
 const mockRuleEvaluation3: AnalysisResult = {
-  topic: 'fakeTopic',
   name: 'rule3',
   score: 55,
+  topic: 'fakeTopic',
   evaluation: {
     summary: 'third thing happened',
     explanation: 'third reason',
@@ -65,9 +65,9 @@ const mockRuleEvaluation3: AnalysisResult = {
 };
 
 const mockNaRuleEvaluation: AnalysisResult = {
-  topic: 'fakeTopic',
   name: 'N/A rule',
   score: -1,
+  topic: 'fakeTopic',
   evaluation: {
     summary: 'fourth thing happened',
     explanation: 'fourth reason',