fix(ui): typos

ui/src/components/ProgressBar/index.jsx

@@ -7,7 +7,7 @@ import COLORS from "utils/scss_variables.module.scss";
 
 import "./progress-bar.scss";
 
-export const STATUS_MAPPPING = {
+export const STATUS_MAPPING = {
   IN_PROGRESS: { value: "IN_PROGRESS", color: COLORS["color-main"] },
   SUCCESS: {
     value: "SUCCESS",
@@ -33,23 +33,23 @@ export const STATUS_MAPPPING = {
 };
 
 const ProgressBar = ({
-  status = STATUS_MAPPPING.IN_PROGRESS.value,
+  status = STATUS_MAPPING.IN_PROGRESS.value,
   itemsCompleted = 0,
   itemsLeft = 0,
   width = "100%",
   message = null,
   messageTooltipId = null,
-  customeTitle,
+  customTitle,
 }) => {
   const totalItems = itemsCompleted + itemsLeft;
   const percent =
-    status === STATUS_MAPPPING.IN_PROGRESS.value
+    status === STATUS_MAPPING.IN_PROGRESS.value
       ? !!totalItems
         ? Math.round((itemsCompleted / totalItems) * 100)
         : 0
       : 100;
 
-  const { icon, color, iconColor } = STATUS_MAPPPING[status];
+  const { icon, color, iconColor } = STATUS_MAPPING[status];
   const progressIconColor = iconColor || color;
   const IconComponent = !!message ? IconWithTooltip : Icon;
 
@@ -65,7 +65,7 @@ const ProgressBar = ({
       </div>
       {!icon ? (
         <div className="progress-bar-title">
-          {!!customeTitle ? customeTitle : `${percent}%`}
+          {!!customTitle ? customTitle : `${percent}%`}
         </div>
       ) : (
         <IconComponent

ui/src/components/ScanProgressBar/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ProgressBar, { STATUS_MAPPPING } from "components/ProgressBar";
+import ProgressBar, { STATUS_MAPPING } from "components/ProgressBar";
 import ErrorMessageDisplay from "components/ErrorMessageDisplay";
 
 import "./scan-progress-bar.scss";
@@ -17,49 +17,49 @@ const SCAN_STATES_AND_REASONS_MAPPINGS = [
   {
     ...SCAN_STATES.Pending,
     reason: "Created",
-    status: STATUS_MAPPPING.IN_PROGRESS.value,
+    status: STATUS_MAPPING.IN_PROGRESS.value,
   },
   {
     ...SCAN_STATES.Discovered,
     reason: "AssetsDiscovered",
-    status: STATUS_MAPPPING.IN_PROGRESS.value,
+    status: STATUS_MAPPING.IN_PROGRESS.value,
   },
   {
     ...SCAN_STATES.InProgress,
     reason: "AssetScansRunning",
-    status: STATUS_MAPPPING.IN_PROGRESS.value,
+    status: STATUS_MAPPING.IN_PROGRESS.value,
   },
   {
     ...SCAN_STATES.Failed,
     reason: "Cancellation",
-    status: STATUS_MAPPPING.STOPPED.value,
+    status: STATUS_MAPPING.STOPPED.value,
   },
   {
     ...SCAN_STATES.Failed,
     reason: "Timeout",
-    status: STATUS_MAPPPING.ERROR.value,
+    status: STATUS_MAPPING.ERROR.value,
     errorTitle: "Scan has been timed out",
   },
   {
     ...SCAN_STATES.Failed,
     reason: "AssetScanFailed",
-    status: STATUS_MAPPPING.ERROR.value,
+    status: STATUS_MAPPING.ERROR.value,
     errorTitle: "Some of the elements were failed to be scanned",
   },
   {
     ...SCAN_STATES.Done,
     reason: "NothingToScan",
-    status: STATUS_MAPPPING.SUCCESS.value,
+    status: STATUS_MAPPING.SUCCESS.value,
   },
   {
     ...SCAN_STATES.Done,
     reason: "Success",
-    status: STATUS_MAPPPING.SUCCESS.value,
+    status: STATUS_MAPPING.SUCCESS.value,
   },
   {
     ...SCAN_STATES.Aborted,
     reason: "Cancellation",
-    status: STATUS_MAPPPING.STOPPED.value,
+    status: STATUS_MAPPING.STOPPED.value,
   },
 ];
 

ui/src/components/SeverityDisplay/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Icon from "components/Icon";
 import { toCapitalized } from "utils/utils";
-import { VULNERABIITY_FINDINGS_ITEM } from "utils/systemConsts";
+import { VULNERABILITY_FINDINGS_ITEM } from "utils/systemConsts";
 
 import "./severity-display.scss";
 
@@ -25,7 +25,7 @@ const SeverityDisplay = ({ severity, score }) => {
         <div style={{ color }}>{score}</div>
       ) : (
         <Icon
-          name={VULNERABIITY_FINDINGS_ITEM.icon}
+          name={VULNERABILITY_FINDINGS_ITEM.icon}
           size={25}
           style={{ color }}
         />

ui/src/components/Table/index.jsx

@@ -26,7 +26,7 @@ const Table = (props) => {
   const {
     columns,
     defaultSortBy,
-    onSortChnage,
+    onSortChange,
     onLineClick,
     paginationItemsName,
     url,
@@ -50,10 +50,10 @@ const Table = (props) => {
   const prevSortBy = usePrevious(sortBy);
 
   useEffect(() => {
-    if (!!onSortChnage && !isEqual(prevSortBy, sortBy)) {
-      onSortChnage(sortBy);
+    if (!!onSortChange && !isEqual(prevSortBy, sortBy)) {
+      onSortChange(sortBy);
     }
-  }, [prevSortBy, sortBy, onSortChnage]);
+  }, [prevSortBy, sortBy, onSortChange]);
 
   const defaultColumn = React.useMemo(
     () => ({

ui/src/components/TablePage/index.jsx

@@ -61,7 +61,7 @@ const TablePage = (props) => {
   const resetSystemFilter = () =>
     resetSystemFilters(filtersDispatch, systemFilterType || filterType);
 
-  const fitlersList = [
+  const filtersList = [
     ...(!!filters ? [filters] : []),
     ...(!!tableFilters ? formatFiltersToOdataItems(tableFilters) : []),
     ...(!!systemFilter ? [systemFilter] : []),
@@ -196,8 +196,8 @@ const TablePage = (props) => {
           filters={{
             ...(!!expand ? { $expand: expand } : {}),
             ...(!!select ? { $select: select } : {}),
-            ...(fitlersList.length > 0
-              ? { $filter: fitlersList.join(" and ") }
+            ...(filtersList.length > 0
+              ? { $filter: filtersList.join(" and ") }
               : {}),
           }}
           noResultsTitle={tableTitle}
@@ -207,7 +207,7 @@ const TablePage = (props) => {
             setPage(filtersDispatch, { type: filterType, pageIndex })
           }
           defaultSortBy={isEmpty(tableSort) ? initialSortBy : tableSort}
-          onSortChnage={(tableSort) =>
+          onSortChange={(tableSort) =>
             setSort(filtersDispatch, { type: filterType, tableSort })
           }
           showCustomEmptyDisplay={isEmpty(tableFilters)}

ui/src/components/VulnerabilitiesDisplay/index.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { TooltipWrapper } from "components/Tooltip";
 import Icon from "components/Icon";
 import { SEVERITY_ITEMS } from "components/SeverityDisplay";
-import { VULNERABIITY_FINDINGS_ITEM } from "utils/systemConsts";
+import { VULNERABILITY_FINDINGS_ITEM } from "utils/systemConsts";
 import { formatNumber } from "utils/utils";
 
 import COLORS from "utils/scss_variables.module.scss";
@@ -61,7 +61,7 @@ const TooltipContentDisplay = ({ total, counters }) => (
         ({ totalKey, color }) => (
           <div key={totalKey} className="vulnerabilities-tooltip-counters-item">
             <Icon
-              name={VULNERABIITY_FINDINGS_ITEM.icon}
+              name={VULNERABILITY_FINDINGS_ITEM.icon}
               style={{ color }}
               size={18}
             />
@@ -119,7 +119,7 @@ const VulnerabilitiesDisplay = ({ highestSeverity, total, counters }) => {
     color: vulnerabilitiesColor,
     title: vulnerabilitiesTitle,
     icon: vulnerabilitiesIcon,
-  } = VULNERABIITY_FINDINGS_ITEM;
+  } = VULNERABILITY_FINDINGS_ITEM;
 
   return (
     <div className="vulnerabilities-display-wrapper">

ui/src/context/FiltersProvider.js

@@ -33,7 +33,7 @@ const initialState = {
   initialized: false,
 };
 
-const FITLER_ACTIONS = {
+const FILTER_ACTIONS = {
   SET_TABLE_FILTERS_BY_KEY: "SET_TABLE_FILTERS_BY_KEY",
   SET_SYSTEM_FILTERS_BY_KEY: "SET_SYSTEM_FILTERS_BY_KEY",
   SET_CUSTOM_FILTERS_BY_KEY: "SET_CUSTOM_FILTERS_BY_KEY",
@@ -46,7 +46,7 @@ const FITLER_ACTIONS = {
 
 const reducer = (state, action) => {
   switch (action.type) {
-    case FITLER_ACTIONS.SET_TABLE_FILTERS_BY_KEY: {
+    case FILTER_ACTIONS.SET_TABLE_FILTERS_BY_KEY: {
       const { filterType, filterData } = action.payload;
 
       return {
@@ -58,7 +58,7 @@ const reducer = (state, action) => {
         },
       };
     }
-    case FITLER_ACTIONS.SET_SYSTEM_FILTERS_BY_KEY: {
+    case FILTER_ACTIONS.SET_SYSTEM_FILTERS_BY_KEY: {
       const { filterType, filterData } = action.payload;
 
       return {
@@ -71,7 +71,7 @@ const reducer = (state, action) => {
         },
       };
     }
-    case FITLER_ACTIONS.SET_CUSTOM_FILTERS_BY_KEY: {
+    case FILTER_ACTIONS.SET_CUSTOM_FILTERS_BY_KEY: {
       const { filterType, filterData } = action.payload;
 
       return {
@@ -83,7 +83,7 @@ const reducer = (state, action) => {
         },
       };
     }
-    case FITLER_ACTIONS.SET_TABLE_PAGE_BY_KEY: {
+    case FILTER_ACTIONS.SET_TABLE_PAGE_BY_KEY: {
       const { filterType, pageIndex } = action.payload;
 
       return {
@@ -94,7 +94,7 @@ const reducer = (state, action) => {
         },
       };
     }
-    case FITLER_ACTIONS.SET_TABLE_SORT_BY_KEY: {
+    case FILTER_ACTIONS.SET_TABLE_SORT_BY_KEY: {
       const { filterType, tableSort } = action.payload;
 
       return {
@@ -105,7 +105,7 @@ const reducer = (state, action) => {
         },
       };
     }
-    case FITLER_ACTIONS.RESET_ALL_FILTERS: {
+    case FILTER_ACTIONS.RESET_ALL_FILTERS: {
       return Object.keys(initialState).reduce(
         (acc, curr) => ({
           ...acc,
@@ -117,7 +117,7 @@ const reducer = (state, action) => {
         {},
       );
     }
-    case FITLER_ACTIONS.RESET_FILTERS_BY_KEY: {
+    case FILTER_ACTIONS.RESET_FILTERS_BY_KEY: {
       const { filterTypes } = action.payload;
 
       return {
@@ -134,7 +134,7 @@ const reducer = (state, action) => {
         ),
       };
     }
-    case FITLER_ACTIONS.INITIALIZE_FILTERS: {
+    case FILTER_ACTIONS.INITIALIZE_FILTERS: {
       const {
         filterType,
         systemFilterType,
@@ -193,33 +193,33 @@ const setFilters = (
 ) =>
   dispatch({
     type: isSystem
-      ? FITLER_ACTIONS.SET_SYSTEM_FILTERS_BY_KEY
+      ? FILTER_ACTIONS.SET_SYSTEM_FILTERS_BY_KEY
       : isCustom
-        ? FITLER_ACTIONS.SET_CUSTOM_FILTERS_BY_KEY
-        : FITLER_ACTIONS.SET_TABLE_FILTERS_BY_KEY,
+        ? FILTER_ACTIONS.SET_CUSTOM_FILTERS_BY_KEY
+        : FILTER_ACTIONS.SET_TABLE_FILTERS_BY_KEY,
     payload: { filterType: type, filterData: filters },
   });
 const setPage = (dispatch, { type, pageIndex }) =>
   dispatch({
-    type: FITLER_ACTIONS.SET_TABLE_PAGE_BY_KEY,
+    type: FILTER_ACTIONS.SET_TABLE_PAGE_BY_KEY,
     payload: { filterType: type, pageIndex },
   });
 const setSort = (dispatch, { type, tableSort }) =>
   dispatch({
-    type: FITLER_ACTIONS.SET_TABLE_SORT_BY_KEY,
+    type: FILTER_ACTIONS.SET_TABLE_SORT_BY_KEY,
     payload: { filterType: type, tableSort },
   });
 const resetAllFilters = (dispatch) =>
-  dispatch({ type: FITLER_ACTIONS.RESET_ALL_FILTERS });
+  dispatch({ type: FILTER_ACTIONS.RESET_ALL_FILTERS });
 const resetFilters = (dispatch, filterTypes) =>
   dispatch({
-    type: FITLER_ACTIONS.RESET_FILTERS_BY_KEY,
+    type: FILTER_ACTIONS.RESET_FILTERS_BY_KEY,
     payload: { filterTypes },
   });
 const resetSystemFilters = (dispatch, type) =>
   setFilters(dispatch, { type, filters: {}, isSystem: true });
 const initializeFilters = (dispatch, filtersData) =>
-  dispatch({ type: FITLER_ACTIONS.INITIALIZE_FILTERS, payload: filtersData });
+  dispatch({ type: FILTER_ACTIONS.INITIALIZE_FILTERS, payload: filtersData });
 
 export {
   FiltersProvider,

ui/src/layout/AssetScans/TabAssetScanDetails.jsx

@@ -11,7 +11,7 @@ import { WrappingTextBoxWithEllipsis } from "components/WrappingTextBoxWithEllip
 import {
   ROUTES,
   FINDINGS_MAPPING,
-  VULNERABIITY_FINDINGS_ITEM,
+  VULNERABILITY_FINDINGS_ITEM,
 } from "utils/systemConsts";
 import { formatDate, calculateDuration } from "utils/utils";
 import { SCANS_PATHS } from "layout/Scans";
@@ -23,7 +23,7 @@ const BORDER_COLOR = COLORS["color-grey-lighter"];
 
 const STATUS_DISPLAY_ITEMS = [
   { dataKey: "sbom", title: "SBOM" },
-  VULNERABIITY_FINDINGS_ITEM,
+  VULNERABILITY_FINDINGS_ITEM,
   ...Object.values(FINDINGS_MAPPING).filter(
     ({ value }) => value !== FINDINGS_MAPPING.PACKAGES.value,
   ),
@@ -35,7 +35,7 @@ const StatusDisplay = ({ state, errors }) => (
       <StatusIndicator state={state} errors={errors} />
     </div>
     {!isEmpty(errors) && (
-      <ErrorMessageDisplay title="An error has occured">
+      <ErrorMessageDisplay title="An error has occurred">
         {errors.map((error, index) => (
           <div key={index}>{error}</div>
         ))}

ui/src/layout/Dashboard/FindingsImpactWidget/index.jsx

@@ -1,28 +1,28 @@
 import React from "react";
 import SeverityWithCvssDisplay from "components/SeverityWithCvssDisplay";
-import { getHigestVersionCvssData, formatNumber } from "utils/utils";
+import { getHighestVersionCvssData, formatNumber } from "utils/utils";
 import {
   FINDINGS_MAPPING,
-  VULNERABIITY_FINDINGS_ITEM,
+  VULNERABILITY_FINDINGS_ITEM,
   APIS,
 } from "utils/systemConsts";
 import FindingsTabsWidget from "../FindingsTabsWidget";
 
 const FINDINGS_ITEMS = [
-  VULNERABIITY_FINDINGS_ITEM,
+  VULNERABILITY_FINDINGS_ITEM,
   ...Object.values(FINDINGS_MAPPING),
 ];
 
 const TABS_COLUMNS_MAPPING = {
-  [VULNERABIITY_FINDINGS_ITEM.dataKey]: {
+  [VULNERABILITY_FINDINGS_ITEM.dataKey]: {
     headerItems: ["Name", "Severity"],
     bodyItems: [
       { dataKey: "vulnerability.vulnerabilityName" },
       {
         customDisplay: ({ vulnerability }) => {
           const { severity, cvss, vulnerabilityName } = vulnerability || {};
           const { score, severity: cvssSeverity } =
-            getHigestVersionCvssData(cvss);
+            getHighestVersionCvssData(cvss);
 
           return (
             <SeverityWithCvssDisplay