[Cherry-Pick-Main][UI][SDL-5847] fixed text and containers variable misspellings

src/ui/src/components/CaptureImportForm/CaptureImportFormImport.jsx

@@ -27,7 +27,7 @@ import UploadFile from "components/FormElements/UploadFile";
 
 import { useTranslation } from "react-i18next";
 
-import { getFileExtention, getFileName } from "utils";
+import { getFileExtension, getFileName } from "utils";
 import { IconButtonRounded } from "components/UIButtons";
 import useStyles from "./PipelineImportStyles";
 
@@ -51,11 +51,11 @@ const CaptureImportFormImport = ({ captureNames, onSubmit, errorUpload }) => {
   const errorCaptureNames = useMemo(() => {
     if (!_.isEmpty(uploadedFileNameList)) {
       return uploadedFileNameList.reduce((acc, [id, name]) => {
-        const ext = getFileExtention(name);
+        const ext = getFileExtension(name);
 
         if (!ext || !ALLOWED_EXT_LIST.includes(ext)) {
-          acc[id] = t("capture-form-import.error-capture-name-extention", {
-            extentions: _.join(ALLOWED_EXT_LIST, ", "),
+          acc[id] = t("capture-form-import.error-capture-name-extension", {
+            extension: _.join(ALLOWED_EXT_LIST, ", "),
           });
         }
         if (captureNames.map((_name) => getLowerFileName(_name)).includes(getLowerFileName(name))) {

src/ui/src/components/CaptureLabelsTable/CaptureLabelsTable.jsx

@@ -124,23 +124,23 @@ const CaptureLabelsTable = ({
       return true;
     }
     if (start > end) {
-      setLabelFormValidationError(t("label-table.lalel-form-error-stat-greater-end"));
+      setLabelFormValidationError(t("label-table.label-form-error-stat-greater-end"));
       return false;
     }
     if (start < 0) {
-      setLabelFormValidationError(t("label-table.lalel-form-error-stat-less-0"));
+      setLabelFormValidationError(t("label-table.label-form-error-stat-less-0"));
       return false;
     }
     if (end > selectedCapture.max_sequence) {
-      setLabelFormValidationError(t("label-table.lalel-form-error-end-greater-max"));
+      setLabelFormValidationError(t("label-table.label-form-error-end-greater-max"));
       return false;
     }
     if (
       labels.data.find(
         (label) => label.start === start && label.end === end && label.id !== selectedLabel,
       )
     ) {
-      setLabelFormValidationError(t("label-table.lalel-form-error-dublicates"));
+      setLabelFormValidationError(t("label-table.label-form-error-duplicates"));
       return false;
     }
     return true;

src/ui/src/components/ControlPanel/ControlPanel.jsx

@@ -59,7 +59,7 @@ const ControlPanel = ({
   onClickBack,
   onShowInformation,
   actionsBtns,
-  turncateLenght = 0,
+  truncateLength = 0,
 }) => {
   const classes = useStyles();
 
@@ -78,7 +78,7 @@ const ControlPanel = ({
             </IconButtonRounded>
           ) : null}
           <Typography variant={"h2"} classes={{ root: classes.titleRoot }}>
-            {title && filterTruncateMiddle(title, turncateLenght)}
+            {title && filterTruncateMiddle(title, truncateLength)}
             {onShowInformation ? (
               <IconButton onClick={onShowInformation}>
                 <InfoOutlinedIcon color="primary" />

src/ui/src/components/DialogModel/DialogModelRename.jsx

@@ -70,7 +70,7 @@ const DialogModalRename = ({
       );
 
     if (!newModelName) {
-      setError(t("dialog-rename-models-error-requaried"));
+      setError(t("dialog-rename-models-error-required"));
       return;
     }
 

src/ui/src/components/FeatureVectorChart/FeatureVectorChart.jsx

@@ -34,7 +34,7 @@ const FeatureVectorChart = ({
   isFetchingFeatureVectorData,
   onSelectSegmemts,
   labelColumn = "Label",
-  movelClassesDown = false,
+  moveClassesDown = false,
   classes = [],
 }) => {
   const { t } = useTranslation("components");
@@ -125,7 +125,7 @@ const FeatureVectorChart = ({
     >
       <Paper elevation={0}>
         <Box p={2}>
-          {!movelClassesDown ? (
+          {!moveClassesDown ? (
             <Stack mb={2}>
               <ClassSelector />
             </Stack>
@@ -188,7 +188,7 @@ const FeatureVectorChart = ({
             fetchingText={t("feature-vector-chart.fetching-text")}
             maxChartSize={500}
           />
-          {movelClassesDown ? (
+          {moveClassesDown ? (
             <Stack mb={2}>
               <ClassSelector />
             </Stack>

src/ui/src/components/FormElements/InputArray.jsx

@@ -92,7 +92,7 @@ const InputArrayForm = ({
     if (minElements && maxElements && minElements === maxElements) {
       setLimitHelperText(t("array-field.helper-text-limit-equal", { minElements, maxElements }));
     } else if (minElements && maxElements) {
-      setLimitHelperText(t("array-field.helper-text-limit-beetween", { minElements, maxElements }));
+      setLimitHelperText(t("array-field.helper-text-limit-between", { minElements, maxElements }));
     } else if (maxElements) {
       setLimitHelperText(t("array-field.helper-text-limit-max", { maxElements }));
     } else if (minElements) {

src/ui/src/components/FormElements/InputArrayNumber.jsx

@@ -56,7 +56,7 @@ const InputArrayNumber = ({ onChange, range, isFloat, ...restProps }) => {
     }
     if (notInRangeVals?.length) {
       setValidationError(
-        t("array-field.errot-out-of-range", {
+        t("array-field.error-out-of-range", {
           values: _.join(notInRangeVals, ", "),
           startRange,
           endRange,

src/ui/src/components/Layout/NavDrawerAccountSettings.jsx

@@ -57,7 +57,7 @@ const MenuItems = [
     id: "subscriptions",
     orderIndex: 1,
     iconfn: (iconProps) => <AccountBalanceWalletOutlinedIcon {...iconProps} />,
-    getPath: () => ROUTES.ACCOUNT_SETTINGS.child.ACCOUNT_SUBCRIPTIONS.path,
+    getPath: () => ROUTES.ACCOUNT_SETTINGS.child.ACCOUNT_SUBSCRIPTIONS.path,
   },
   {
     title: "API Keys",

src/ui/src/components/ModelControlPanel/ModelControlPanel.jsx

@@ -68,7 +68,7 @@ const ModelControlPanel = ({
           : t("model-select.control-panel-change", { modelName: modelData?.name })
       }
       onClickBack={isShortBtnText ? null : handleSwitchModel}
-      turncateLenght={
+      truncateLength={
         isShortBtnText ? RESPONSIVE.TRUNCATE_NAME_OVER_SHORT_TEXT : RESPONSIVE.TRUNCATE_NAME_OVER
       }
       actionsBtns={

src/ui/src/components/PipelineBuilderV1/DrawerNewStep.jsx

@@ -134,7 +134,7 @@ const DrawerNewStep = ({
               ))}
             </Select>
             {isNewStepNameError ? (
-              <FormHelperText>{t("model-builder.drawer-new-error-error-requaried")}</FormHelperText>
+              <FormHelperText>{t("model-builder.drawer-new-error-error-required")}</FormHelperText>
             ) : null}
           </FormControl>
         ) : null}

src/ui/src/components/PipelineBuilderV1/PipelineBuilder.jsx

@@ -652,7 +652,7 @@ const PipelineBuilder = ({
         });
 
         if (data?.results && downloadingCache) {
-          // remove all extentions
+          // remove all extension
           fileDownload(
             JSON.stringify(data.results),
             `${pipelineData?.name}.${stepName}.cache.${indexPage}.json`,

src/ui/src/components/PipelineBuilderV1/PipelineFormStepsFactory/FormTransformMultiSelect.jsx

@@ -143,7 +143,7 @@ const FormTransformMultiSelect = ({ inputData, onClose, onSubmit, onShowInfo })
               color="primary"
               onClick={(_e) => handleShowAddTransformForm(true)}
             >
-              {t("model-builder.dradrawerwe-edit-step-add-btn")}
+              {t("model-builder.drawer-edit-step-add-btn")}
             </Button>
           </Box>
         ) : null}

src/ui/src/components/PipelineStepDrawerStatistic/PipelineStepDrawerStatistic.jsx

@@ -170,7 +170,7 @@ const PipelineStepDrawerStatistic = ({
                   classes={labelValues}
                   selectLabelColorHashMap={selectLabelValuesColors}
                   isFetchingFeatureVectorData={_.isEmpty(featureVectorData)}
-                  movelClassesDown
+                  moveClassesDown
                 />
               ) : null}
             </>

src/ui/src/components/UIChartsD3/LineChartSegmentsWGL/indeRedrawLines.js

@@ -44,7 +44,7 @@ const LineChartSegments = ({
   segmentData,
   newSegment,
   editingSegment,
-  onSementMove,
+  onSegmentMove,
   onNewSegmentMove,
   onSetEditedSegment,
 }) => {
@@ -143,7 +143,7 @@ const LineChartSegments = ({
   const handleSegmentChanges = (evt, id) => {
     if (evt.selection) {
       const [start, end] = invertSelection(evt.selection);
-      onSementMove(start, end, id);
+      onSegmentMove(start, end, id);
     }
   };
 
@@ -441,12 +441,12 @@ const LineChartSegments = ({
 };
 
 LineChartSegments.propTypes = {
-  onSementMove: PropTypes.func,
+  onSegmentMove: PropTypes.func,
   segmentData: PropTypes.array.isRequired,
 };
 
 LineChartSegments.defaultProps = {
-  onSementMove: () => {},
+  onSegmentMove: () => {},
 };
 
 export default LineChartSegments;

src/ui/src/components/UIChartsD3/LineChartSegmentsWGL/index.js

@@ -66,7 +66,7 @@ const LineChartSegments = ({
   segmentData,
   newSegment,
   editingSegment,
-  onSementMove,
+  onSegmentMove,
   onNewSegmentMove,
   onSetEditedSegment,
   audioFileSampleRate = 16000,
@@ -162,7 +162,7 @@ const LineChartSegments = ({
   const handleSegmentChanges = (evt, id) => {
     if (evt.selection) {
       const [start, end] = invertSelection(evt.selection);
-      onSementMove(start, end, id);
+      onSegmentMove(start, end, id);
     }
   };
 
@@ -660,12 +660,12 @@ const LineChartSegments = ({
 };
 
 LineChartSegments.propTypes = {
-  onSementMove: PropTypes.func,
+  onSegmentMove: PropTypes.func,
   segmentData: PropTypes.array.isRequired,
 };
 
 LineChartSegments.defaultProps = {
-  onSementMove: () => {},
+  onSegmentMove: () => {},
 };
 
 export default LineChartSegments;

src/ui/src/containers/AccountSettings/TheAccountSettings.jsx

@@ -70,7 +70,7 @@ const TheAccountSettings = () => {
                 <TheAccountInfo />
               </RouterProxyAppMain>
             </Route>
-            <Route exact path={ROUTES.ACCOUNT_SETTINGS.child.ACCOUNT_SUBCRIPTIONS.path}>
+            <Route exact path={ROUTES.ACCOUNT_SETTINGS.child.ACCOUNT_SUBSCRIPTIONS.path}>
               <RouterProxyAppMain>
                 <TheAccountSubscription />
               </RouterProxyAppMain>

src/ui/src/containers/BuildModel/TheClassificationScreen/TheClassificationScreen.jsx

@@ -41,12 +41,12 @@ import { ROUTES } from "routers";
 import { RUNNING_STATUSES } from "consts";
 import { EXECUTION_TYPES, PIPELINE_STEP_TYPES } from "store/autoML/const";
 
-import PipelineBuilderClassification from "../componets/PipelineBuilderClassification";
-import TableAutoSenseMetrics from "../componets/TableAutoSenseMetrics";
-import TableIterationMetrics from "../componets/TableIterationMetrics";
-import QueryCacheAlertMessage from "../componets/QueryCacheAlertMessage";
-import PipelineBuilderAlertMessage from "../componets/PipelineBuilderAlertMessage";
-import BuilderPipelinePanel from "../componets/BuilderPipelinePanel";
+import PipelineBuilderClassification from "../components/PipelineBuilderClassification";
+import TableAutoSenseMetrics from "../components/TableAutoSenseMetrics";
+import TableIterationMetrics from "../components/TableIterationMetrics";
+import QueryCacheAlertMessage from "../components/QueryCacheAlertMessage";
+import PipelineBuilderAlertMessage from "../components/PipelineBuilderAlertMessage";
+import BuilderPipelinePanel from "../components/BuilderPipelinePanel";
 
 import useStyles from "../BuildModeStyle";
 

src/ui/src/containers/BuildModel/TheFeatureExtractorScreen/TheFeatureExtractorScreen.jsx

@@ -42,11 +42,11 @@ import { PIPELINE_STEP_TYPES } from "store/autoML/const";
 import FeatureVectorChart from "components/FeatureVectorChart";
 
 import FeatureSummary from "components/FeatureSummary";
-import PipelineBuilderFeatureExtraction from "../componets/PipelineBuilderFeatureExtraction";
+import PipelineBuilderFeatureExtraction from "../components/PipelineBuilderFeatureExtraction";
 
-import QueryCacheAlertMessage from "../componets/QueryCacheAlertMessage";
-import BuilderPipelinePanel from "../componets/BuilderPipelinePanel";
-import PipelineBuilderAlertMessage from "../componets/PipelineBuilderAlertMessage";
+import QueryCacheAlertMessage from "../components/QueryCacheAlertMessage";
+import BuilderPipelinePanel from "../components/BuilderPipelinePanel";
+import PipelineBuilderAlertMessage from "../components/PipelineBuilderAlertMessage";
 import useStyles from "../BuildModeStyle";
 import UIPaperNoContent from "components/UIPaperNoContent";
 
@@ -501,7 +501,7 @@ const TheFeatureExtractorScreen = ({
                   classes={pipelineResults.labelValues || []}
                   selectLabelColorHashMap={selectLabelValuesColors}
                   isFetchingFeatureVectorData={pipelineResultsIsFetching}
-                  movelClassesDown
+                  moveClassesDown
                 />
               ) : (
                 <UIPaperNoContent text={t("model-builder.feature-extractor-chart-no-data")} />

src/ui/src/containers/BuildModel/TheSelectScreen/TheSelectScreen.jsx

@@ -41,7 +41,7 @@ import PipelineTemplateCreateForm from "components/PipelineTemplateCreateForm";
 import { DEFAULT_CLASSIFIER, PIPELINE_STEP_TYPES } from "store/autoML/const";
 
 import useStyles from "../BuildModeStyle";
-import SelectCard from "../componets/SelectCard";
+import SelectCard from "../components/SelectCard";
 
 const TheSelectScreen = ({
   selectedProject,

src/ui/src/containers/BuildModel/componets/BuilderPipelinePanel.jsx → src/ui/src/containers/BuildModel/components/BuilderPipelinePanel.jsx

@@ -79,7 +79,7 @@ const BuilderPipelinePanel = ({
       />
       <ControlPanel
         title={title}
-        turncateLenght={
+        truncateLength={
           isShortBtnText ? RESPONSIVE.TRUNCATE_NAME_OVER_SHORT_TEXT : RESPONSIVE.TRUNCATE_NAME_OVER
         }
         onClickBack={isShortBtnText ? null : handleChangePipeline}

src/ui/src/containers/BuildModel/componets/PipelineBuilderAlertMessage.jsx → src/ui/src/containers/BuildModel/components/PipelineBuilderAlertMessage.jsx

@@ -29,7 +29,7 @@ const PipelineBuilderAlertMessage = ({
         message: (
           <>
             {tQueries("validation.no-segments", { queryName: queryStatistic?.name })}
-            <Box mt={1}>{tQueries("help.unknow")}</Box>
+            <Box mt={1}>{tQueries("help.unknown")}</Box>
           </>
         ),
         type: "warning",
@@ -43,7 +43,7 @@ const PipelineBuilderAlertMessage = ({
               queryName: queryStatistic?.name,
               segments: _.keys(queryStatistic?.segments).join(", "),
             })}
-            <Box mt={1}>{tQueries("help.unknow")}</Box>
+            <Box mt={1}>{tQueries("help.unknown")}</Box>
           </>
         ),
         type: "warning",

src/ui/src/containers/BuildModel/componets/PipelineBuilderClassification.jsx → src/ui/src/containers/BuildModel/components/PipelineBuilderClassification.jsx

@@ -27,7 +27,7 @@ import {
 
 import PipelineBuilderV1 from "components/PipelineBuilderV1";
 
-const PiplineBuilderAutoML = (props) => {
+const PipelineBuilderAutoML = (props) => {
   const { selectedSteps, pipelineData } = props;
 
   const autoMLStep = useMemo(
@@ -78,9 +78,9 @@ const PiplineBuilderAutoML = (props) => {
         return PIPELINE_GROUPS.TVO.type;
       }
       if (isAfterFeatureGenerator) {
-        return PIPELINE_GROUPS.FEATURE_EXTRACOR.type;
+        return PIPELINE_GROUPS.FEATURE_EXTRACTOR.type;
       }
-      return PIPELINE_GROUPS.PEPROCESSING.type;
+      return PIPELINE_GROUPS.PREPROCESSING.type;
     };
 
     if (!_.isEmpty(selectedSteps) && !_.isEmpty(pipelineData)) {
@@ -170,4 +170,4 @@ const PiplineBuilderAutoML = (props) => {
   );
 };
 
-export default PiplineBuilderAutoML;
+export default PipelineBuilderAutoML;

src/ui/src/containers/BuildModel/componets/PipelineBuilderFeatureExtraction.jsx → src/ui/src/containers/BuildModel/components/PipelineBuilderFeatureExtraction.jsx

@@ -24,9 +24,9 @@ const PipelineBuilderClassification = (props) => {
 
     const getStepType = (isAfterFeatureGenerator) => {
       if (isAfterFeatureGenerator) {
-        return PIPELINE_GROUPS.FEATURE_EXTRACOR.type;
+        return PIPELINE_GROUPS.FEATURE_EXTRACTOR.type;
       }
-      return PIPELINE_GROUPS.PEPROCESSING.type;
+      return PIPELINE_GROUPS.PREPROCESSING.type;
     };
 
     if (!_.isEmpty(selectedSteps) && !_.isEmpty(pipelineData)) {

src/ui/src/containers/BuildModel/componets/PiplineBuilderCustomTraining.jsx → src/ui/src/containers/BuildModel/components/PiplineBuilderCustomTraining.jsx

@@ -22,7 +22,7 @@ import React, { useMemo } from "react";
 import { DISABLED_FOR_CUSTOM_STEPS } from "store/autoML/const";
 import PipelineBuilder from "./PipelineBuilder";
 
-const PiplineBuilderCustomTraining = (props) => {
+const PipelineBuilderCustomTraining = (props) => {
   const { selectedSteps } = props;
 
   const getFilteredSelectedSteps = useMemo(() => {
@@ -40,4 +40,4 @@ const PiplineBuilderCustomTraining = (props) => {
   );
 };
 
-export default PiplineBuilderCustomTraining;
+export default PipelineBuilderCustomTraining;

src/ui/src/containers/BuildModel/componets/TableIterationMetrics.jsx → src/ui/src/containers/BuildModel/components/TableIterationMetrics.jsx

@@ -81,7 +81,7 @@ const TableIterationMetrics = ({ iterationMetrics }) => {
     },
     {
       field: "classifiers",
-      title: t("model-builder.table-iterations-classifer"),
+      title: t("model-builder.table-iterations-classifier"),
       render: dataWithTooltip,
       type: ColumnType.Text,
     },