Add strich type check to web-awesome (#72)

packages/core-api/src/model.ts

@@ -139,6 +139,5 @@ export type AttachmentLink = AttachmentLinkFile | AttachmentLinkExpected | Attac
 
 export interface AttachmentTestStepResult {
   link: AttachmentLinkExpected | AttachmentLinkLinked | AttachmentLinkInvalid;
-
   type: "attachment";
 }

packages/core-api/src/utils/time.ts

@@ -26,15 +26,17 @@ const times: DurationField[] = [
   },
 ];
 
-export const formatDuration = (duration: number | undefined): string => {
+export const formatDuration = (duration?: number): string => {
   if (duration === undefined) {
     return "unknown";
   }
+
   if (duration < 0.5) {
     return "0s";
   }
 
   const res: string[] = [];
+
   for (const { accessor, suffix } of times) {
     const value = accessor(duration);
     if (res.length === 0 && !value) {

packages/web-awesome/package.json

@@ -80,6 +80,7 @@
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "filesize": "^10.1.6",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "globals": "^15.9.0",
     "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^2.9.1",

packages/web-awesome/src/components/BaseLayout/index.tsx

@@ -12,7 +12,11 @@ import { fetchTestResult, fetchTestResultNav, testResultStore } from "@/stores/t
 import { fetchTreeData, treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
 
-export const BaseLayout = ({ testResultId }) => {
+export type BaseLayoutProps = {
+  testResultId?: string;
+};
+
+export const BaseLayout = ({ testResultId }: BaseLayoutProps) => {
   useEffect(() => {
     getTheme();
     getLocale();
@@ -23,7 +27,11 @@ export const BaseLayout = ({ testResultId }) => {
       fetchTestResult(testResultId);
       fetchTestResultNav();
     } else {
-      Promise.all([ensureReportDataReady(), fetchStats(), fetchPieChartData(), fetchTreeData(), fetchEnvInfo()]);
+      ensureReportDataReady();
+      fetchStats();
+      fetchPieChartData();
+      fetchTreeData();
+      fetchEnvInfo();
     }
   }, [testResultId]);
 

packages/web-awesome/src/components/LanguagePicker/index.tsx

@@ -1,17 +1,16 @@
-import { DropdownButton } from "@allurereport/web-components";
-import { Menu } from "@allurereport/web-components";
+import { DropdownButton, Menu } from "@allurereport/web-components";
 import { LANG_LOCALE, type LangLocale } from "@/i18n/constants";
 import { currentLocale } from "@/stores";
 import { setLocale } from "@/stores/locale";
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => ({
   key: key as LangLocale,
   value: full,
 }));
 
 export const LanguagePicker = () => {
   const locale = currentLocale.value;
-
   const handleSelect = (selectedOption: LangLocale) => {
     setLocale(selectedOption);
   };

packages/web-awesome/src/components/Metadata/index.tsx

@@ -8,7 +8,6 @@ import { useI18n } from "@/stores/locale";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
-const { t } = useI18n("ui");
 export const MetadataList: FunctionalComponent<MetadataProps & { columns?: number }> = ({
   envInfo,
   size = "m",
@@ -19,8 +18,8 @@ export const MetadataList: FunctionalComponent<MetadataProps & { columns?: numbe
       class={styles["report-metadata-list"]}
       style={{ gridTemplateColumns: `repeat(${columns}, ${100 / columns - 5}%)` }}
     >
-      {envInfo?.map((envInfo) => (
-        <MetadataKeyValue size={size} title={envInfo.name} value={envInfo.value} values={envInfo.values} />
+      {envInfo?.map(({ name, values, value }) => (
+        <MetadataKeyValue key={name} size={size} title={name} value={value} values={values} />
       ))}
     </div>
   );
@@ -30,23 +29,30 @@ export const TestResultMetadataList: FunctionalComponent<MetadataProps> = ({ gro
   return (
     <div class={styles["report-metadata-list"]}>
       {groupedLabels &&
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         Object.entries(groupedLabels)?.map(([name, values]) => (
-          <MetadataKeyValue size={size} title={name} values={values} />
+          <MetadataKeyValue key={name} size={size} title={name} values={values} />
         ))}
     </div>
   );
 };
+
 export const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
+  const { t } = useI18n("ui");
   const [isOpened, setIsOpen] = useState(true);
+
   return (
     <div class={styles["report-metadata"]}>
       <MetadataButton isOpened={isOpened} setIsOpen={setIsOpen} counter={envInfo.length} title={t("metadata")} />
       {isOpened && <MetadataList envInfo={envInfo} />}
     </div>
   );
 };
-const MetadataTooltip = ({ value }) => {
+
+const MetadataTooltip = (props: { value: string }) => {
+  const { value } = props;
   const { t } = useI18n("ui");
+
   return (
     <div className={styles["metadata-tooltip"]}>
       <div className={styles["metadata-tooltip-value"]}>
@@ -61,6 +67,7 @@ const MetadataTooltip = ({ value }) => {
     </div>
   );
 };
+
 const MetaDataKeyLabel: FunctionalComponent<{
   size?: "s" | "m";
   value: string;
@@ -101,7 +108,7 @@ const MetadataKeyValue: FunctionalComponent<{
       {values?.length ? (
         <div className={styles["report-metadata-values"]}>
           {values.map((item) => (
-            <MetaDataKeyLabel value={item} />
+            <MetaDataKeyLabel key={item} value={item} />
           ))}
         </div>
       ) : (

packages/web-awesome/src/components/Modal/index.tsx

@@ -36,7 +36,7 @@ const closeModal = () => {
   isModalOpen.value = false;
 };
 
-const ModalThumb = ({ item, children }) => {
+const ModalThumb: FunctionalComponent<{ item: AttachmentTestStepResult }> = ({ item, children }) => {
   const isActiveThumb = modalData.value.data?.link?.id === item.link?.id;
 
   const showAttach = (showedItem: AttachmentTestStepResult) => {
@@ -47,10 +47,7 @@ const ModalThumb = ({ item, children }) => {
   };
 
   return (
-    <div
-      className={`${styles["modal-thumb"]} ${isActiveThumb ? styles.active : ""}`}
-      onClick={() => showAttach(item as AttachmentTestStepResult)}
-    >
+    <div className={`${styles["modal-thumb"]} ${isActiveThumb ? styles.active : ""}`} onClick={() => showAttach(item)}>
       {children}
     </div>
   );
@@ -129,7 +126,7 @@ const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {
                 <Button
                   style={"outline"}
                   onClick={openInNewWindow}
-                  icon={allureIcons.LineGeneralLinkExternal}
+                  icon={allureIcons.lineGeneralLinkExternal}
                   text={"Open in new tab"}
                 />
               )}

packages/web-awesome/src/components/ReportMetadata/MetadataSummary.tsx

@@ -1,10 +1,8 @@
-import type { Statistic } from "@allurereport/core-api";
-import { statusesList } from "@allurereport/core-api";
+import { type Statistic, statusesList } from "@allurereport/core-api";
 import { Loadable } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 import type { FunctionComponent } from "preact";
-import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
-import MetadataItem from "@/components/ReportMetadata/MetadataItem";
+import MetadataItem, { type MetadataProps } from "@/components/ReportMetadata/MetadataItem";
 import { MetadataTestType } from "@/components/ReportMetadata/MetadataTestType";
 import { MetadataWithIcon } from "@/components/ReportMetadata/MetadataWithIcon";
 import * as styles from "@/components/ReportMetadata/styles.scss";
@@ -28,11 +26,11 @@ export const MetadataSummary: FunctionComponent = () => {
         }));
         const metaDataTests = ["flaky", "retry"]
           .map((key) => {
-            if (!stats[key]) {
+            if (!stats[key as keyof Statistic]) {
               return;
             }
             const title = testSummary(key);
-            const props = { title, count: stats[key] || 0, type: key };
+            const props = { title, count: stats[key as keyof Statistic] || 0, type: key };
 
             return (
               <div key={key}>

packages/web-awesome/src/components/ReportMetadata/MetadataWithIcon.tsx

@@ -1,11 +1,9 @@
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
-import { h } from "preact";
 import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
 import * as styles from "./styles.scss";
 
-const icons = {
+const icons: Record<string, string> = {
   flaky: allureIcons.lineGeneralZap,
   retry: allureIcons.lineArrowsRefreshCcw1,
   new: allureIcons.lineAlertsNotificationBox,

packages/web-awesome/src/components/TestResult/TestResultDropdown/index.tsx

@@ -1,10 +1,15 @@
-import { Counter, allureIcons } from "@allurereport/web-components";
-import { SvgIcon } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+import { Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
 import { ArrowButton } from "@/components/ArrowButton";
 import * as styles from "./styles.scss";
 
-export const TestResultDropdown = ({ isOpened, setIsOpen, title, icon, counter }) => {
+export const TestResultDropdown: FunctionalComponent<{
+  isOpened: boolean;
+  setIsOpen: (isOpened: boolean) => void;
+  title: string;
+  icon: string;
+  counter: number;
+}> = ({ isOpened, setIsOpen, title, icon, counter }) => {
   return (
     <div className={styles["test-result-dropdown"]} onClick={() => setIsOpen(!isOpened)}>
       <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />

packages/web-awesome/src/components/TestResult/TestResultError/index.tsx

@@ -1,4 +1,5 @@
 import { Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { useI18n } from "@/stores/locale";
 import { copyToClipboard } from "@/utils/copyToClipboard";
@@ -14,7 +15,7 @@ const TestResultErrorTrace = ({ trace }: { trace: string }) => {
   );
 };
 
-export const TestResultError = ({ message, trace }) => {
+export const TestResultError: FunctionalComponent<{ message: string; trace: string }> = ({ message, trace }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useI18n("ui");
   const { t: tooltip } = useI18n("controls");

packages/web-awesome/src/components/TestResult/TestResultHistory/TestResultHistoryItem.tsx

@@ -1,7 +1,6 @@
-import { formatDuration } from "@allurereport/core-api";
-import { IconButton, allureIcons } from "@allurereport/web-components";
-import { TooltipWrapper } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
+import { IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { ArrowButton } from "@/components/ArrowButton";
 import { TestResultError } from "@/components/TestResult/TestResultError";
@@ -11,7 +10,9 @@ import { navigateTo, openInNewTab } from "@/index";
 import { useI18n } from "@/stores";
 import { timestampToDate } from "@/utils/time";
 
-export const TestResultHistoryItem = ({ testResultItem }) => {
+export const TestResultHistoryItem: FunctionalComponent<{
+  testResultItem: HistoryTestResult;
+}> = ({ testResultItem }) => {
   const { status, message, trace, stop, duration, id } = testResultItem;
   const [isOpened, setIsOpen] = useState(false);
   const convertedStop = timestampToDate(stop);

packages/web-awesome/src/components/TestResult/TestResultHistory/index.tsx

@@ -1,7 +1,7 @@
 import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
 import { TestResultHistoryItem } from "@/components/TestResult/TestResultHistory/TestResultHistoryItem";
 import { useI18n } from "@/stores";
+import { type AllureAwesomeTestResult } from "../../../../types";
 import * as styles from "./styles.scss";
 
 export type TestResultHistoryViewProps = {

packages/web-awesome/src/components/TestResult/TestResultInfo/TestResultInfoStatuses.tsx

@@ -1,16 +1,18 @@
 import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
 import { useI18n } from "@/stores";
 import { capitalize } from "@/utils/capitalize";
 import * as styles from "./styles.scss";
 
-const icons = {
+const icons: Record<string, string> = {
   flaky: allureIcons.lineIconBomb2,
   known: allureIcons.lineAlertsAlertCircle,
   muted: allureIcons.lineGeneralEye,
 };
 
-export const TestResultInfoStatuses = ({ statuses }) => {
+export const TestResultInfoStatuses: FunctionalComponent<{ statuses: [string, boolean][] }> = ({ statuses }) => {
   const { t } = useI18n("filters");
+
   return (
     <div className={styles["test-result-info-statuses"]}>
       {statuses.map(([status], key: number) => {

packages/web-awesome/src/components/TestResult/TestResultInfo/index.tsx

@@ -18,7 +18,7 @@ export type TestResultInfoProps = {
 
 export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testResult }) => {
   const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop } = testResult ?? {};
-  const formattedDuration = formatDuration(duration);
+  const formattedDuration = formatDuration(duration as number);
   const fullDate = stop && timestampToDate(stop);
   const severity = labels?.find((label) => label.name === "severity")?.value ?? "normal";
   const { t } = useI18n("ui");

packages/web-awesome/src/components/TestResult/TestResultLinks/index.tsx

@@ -1,5 +1,4 @@
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AllureAwesomeTestResult } from "types";
@@ -13,20 +12,21 @@ interface TestResultLinkProps {
   type: string;
 }
 
+const linksIconMap: Record<string, string> = {
+  issue: allureIcons.lineDevBug2,
+  link: allureIcons.lineGeneralLink1,
+  tms: allureIcons.lineGeneralChecklist3,
+  github: allureIcons.github,
+};
+
 const TestResultLink: FunctionalComponent<{
   link: TestResultLinkProps;
 }> = ({ link }) => {
   const { url, type } = link;
-  const iconMap = {
-    issue: allureIcons.lineDevBug2,
-    link: allureIcons.lineGeneralLink1,
-    tms: allureIcons.lineGeneralChecklist3,
-    github: allureIcons.github,
-  };
 
   return (
     <div className={styles["test-result-link"]}>
-      <SvgIcon id={iconMap[type] ?? allureIcons.lineGeneralLink1} />
+      <SvgIcon id={linksIconMap[type] ?? allureIcons.lineGeneralLink1} />
       <Text tag={"a"} href={url} target={"_blank"} size={"m"} className={styles["test-result-link-text"]}>
         {url}
       </Text>

packages/web-awesome/src/components/TestResult/TestResultPrevStatuses/index.tsx

@@ -1,3 +1,4 @@
+import { type HistoryTestResult } from "@allurereport/core-api";
 import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import type { AllureAwesomeTestResult } from "types";
@@ -7,14 +8,14 @@ import { capitalize } from "@/utils/capitalize";
 import { timestampToDate } from "@/utils/time";
 import * as styles from "./styles.scss";
 
-const TestResultPrevStatus = ({ item }) => {
+const TestResultPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
   return (
     <div className={styles["test-result-prev-status"]} onClick={() => navigateTo(`testresult/${item.id}`)}>
       <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
     </div>
   );
 };
-const TestResultPrevStatusTooltip = ({ item }) => {
+const TestResultPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
   const convertedStop = item.stop && timestampToDate(item.stop);
   const { t } = useI18n("statuses");
   const status = t(item.status);

packages/web-awesome/src/components/TestResult/TestResultRetriesView/TestResultRetriesItem.tsx

@@ -1,6 +1,6 @@
-import { formatDuration } from "@allurereport/core-api";
-import { IconButton, allureIcons } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+import { type TestResult, formatDuration } from "@allurereport/core-api";
+import { IconButton, Text, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { ArrowButton } from "@/components/ArrowButton";
 import { TestResultError } from "@/components/TestResult/TestResultError";
@@ -9,11 +9,13 @@ import TreeItemIcon from "@/components/Tree/TreeItemIcon";
 import { navigateTo } from "@/index";
 import { timestampToDate } from "@/utils/time";
 
-export const TestResultRetriesItem = ({ testResultItem }) => {
+export const TestResultRetriesItem: FunctionalComponent<{
+  testResultItem: TestResult;
+}> = ({ testResultItem }) => {
   const { id, status, message, trace, stop, duration } = testResultItem;
   const [isOpened, setIsOpen] = useState(false);
   const convertedStop = timestampToDate(stop);
-  const formattedDuration = formatDuration(duration);
+  const formattedDuration = formatDuration(duration as number);
   const navigateUrl = `/testresult/${id}`;
 
   return (