[MM-669]: Fixed the TS errors in webapp's util files (#1114)

mattermost · Aug 28, 2024 · 6485d60 · 6485d60
1 parent 8a26119
commit 6485d60
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/webapp/src/types/model.ts b/webapp/src/types/model.ts
@@ -233,3 +233,25 @@ export type CreateIssueFields = {
     project: {key: string};
     issuetype: {id: string};
 } & {[key: string]: JiraField};
+
+export type ProvidedStyle = {
+    zIndex?: number;
+    borderColor?: string;
+    color?: string;
+    background?: string;
+    padding?: string;
+    boxShadow?: string;
+    borderRadius?: string;
+    transform?: string;
+    marginRight?: string;
+    width?: string;
+    height?: string;
+    [key: string]: any;
+};
+
+export type StyleState = {
+    isFocused: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    [key: string]: any;
+};
diff --git a/webapp/src/utils/jira_issue_metadata.tsx b/webapp/src/utils/jira_issue_metadata.tsx
@@ -195,7 +195,7 @@ function isValidFieldForFilter(field: JiraField): boolean {
 
     return allowedTypes.includes(type) || (custom && acceptedCustomTypesForFilters.includes(custom)) ||
     type === 'option' || // single select
-    (type === 'array' && allowedArrayTypes.includes(items));
+    (type === 'array' && typeof items !== 'undefined' && allowedArrayTypes.includes(items));
 }
 
 export function getStatusField(metadata: IssueMetadata | null, selectedIssueTypes: string[]): FilterField | null {
@@ -414,11 +414,11 @@ export function generateJQLStringFromSubscriptionFilters(issueMetadata: IssueMet
         });
 
         if (inclusion === FilterFieldInclusion.INCLUDE_ALL && values.length > 1) {
-            const clauses = chosenValueLabels.map((v) => `${quoteGuard(fieldName)} IN (${quoteGuard(v)})`);
+            const clauses = chosenValueLabels.map((v) => `${quoteGuard(fieldName)} IN (${quoteGuard(v.toString())})`);
             return `(${clauses.join(' AND ')})`;
         }
 
-        const joinedValues = chosenValueLabels.map((v) => `${quoteGuard(v)}`).join(', ');
+        const joinedValues = chosenValueLabels.map((v) => `${quoteGuard(v.toString())}`).join(', ');
         const valueString = `(${joinedValues})`;
         return `${quoteGuard(fieldName)} ${inclusionString} ${valueString}`;
     }).join(' AND ');

diff --git a/webapp/src/utils/styles.ts b/webapp/src/utils/styles.ts
@@ -4,6 +4,8 @@
 import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 import {Theme} from 'mattermost-redux/types/preferences';
 
+import {ProvidedStyle, StyleState} from 'types/model';
+
 export const getBaseStyles = (theme: Theme) => {
     return {
         codeBlock: ({
@@ -17,7 +19,7 @@ export const getBaseStyles = (theme: Theme) => {
     };
 };
 
-export const getModalStyles = (theme) => ({
+export const getModalStyles = (theme: Theme) => ({
     modalBody: {
         padding: '2em 2em 3em',
         color: theme.centerChannelColor,
@@ -33,17 +35,17 @@ export const getModalStyles = (theme) => ({
     },
 });
 
-export const getStyleForReactSelect = (theme) => {
+export const getStyleForReactSelect = (theme: Theme) => {
     if (!theme) {
         return {};
     }
 
     return {
-        menuPortal: (provided) => ({
+        menuPortal: (provided: ProvidedStyle) => ({
             ...provided,
             zIndex: 9999,
         }),
-        control: (provided, state) => ({
+        control: (provided: ProvidedStyle, state: StyleState) => ({
             ...provided,
             color: theme.centerChannelColor,
             background: theme.centerChannelBg,
@@ -60,15 +62,15 @@ export const getStyleForReactSelect = (theme) => {
                 borderColor: changeOpacity(theme.centerChannelColor, 0.25),
             },
         }),
-        option: (provided, state) => ({
+        option: (provided: ProvidedStyle, state: StyleState) => ({
             ...provided,
             background: state.isFocused ? changeOpacity(theme.centerChannelColor, 0.12) : theme.centerChannelBg,
             color: theme.centerChannelColor,
             '&:hover': {
                 background: changeOpacity(theme.centerChannelColor, 0.12),
             },
         }),
-        clearIndicator: (provided) => ({
+        clearIndicator: (provided: ProvidedStyle) => ({
             ...provided,
             width: '34px',
             color: changeOpacity(theme.centerChannelColor, 0.4),
@@ -78,26 +80,26 @@ export const getStyleForReactSelect = (theme) => {
                 color: theme.centerChannelColor,
             },
         }),
-        multiValue: (provided) => ({
+        multiValue: (provided: ProvidedStyle) => ({
             ...provided,
             background: changeOpacity(theme.centerChannelColor, 0.15),
         }),
-        multiValueLabel: (provided) => ({
+        multiValueLabel: (provided: ProvidedStyle) => ({
             ...provided,
             color: theme.centerChannelColor,
             paddingBottom: '4px',
             paddingLeft: '8px',
             fontSize: '90%',
         }),
-        multiValueRemove: (provided) => ({
+        multiValueRemove: (provided: ProvidedStyle) => ({
             ...provided,
             transform: 'translateX(-2px) scaleX(1.15)',
             color: changeOpacity(theme.centerChannelColor, 0.4),
             '&:hover': {
                 background: 'transparent',
             },
         }),
-        menu: (provided) => ({
+        menu: (provided: ProvidedStyle) => ({
             ...provided,
             color: theme.centerChannelColor,
             background: theme.centerChannelBg,
@@ -106,26 +108,26 @@ export const getStyleForReactSelect = (theme) => {
             boxShadow: changeOpacity(theme.centerChannelColor, 0.2) + ' 1px 3px 12px',
             marginTop: '4px',
         }),
-        input: (provided) => ({
+        input: (provided: ProvidedStyle) => ({
             ...provided,
             color: theme.centerChannelColor,
         }),
-        placeholder: (provided) => ({
+        placeholder: (provided: ProvidedStyle) => ({
             ...provided,
             color: theme.centerChannelColor,
         }),
-        dropdownIndicator: (provided) => ({
+        dropdownIndicator: (provided: ProvidedStyle) => ({
             ...provided,
 
             '&:hover': {
                 color: theme.centerChannelColor,
             },
         }),
-        singleValue: (provided) => ({
+        singleValue: (provided: ProvidedStyle) => ({
             ...provided,
             color: theme.centerChannelColor,
         }),
-        indicatorSeparator: (provided) => ({
+        indicatorSeparator: (provided: ProvidedStyle) => ({
             ...provided,
             display: 'none',
         }),