OD-16624 Fixed global styles settings issues. Adjusted tests config t…

…o hide redundant console statements. Added sckip oprion for disabled tests
ishgroup · Nov 10, 2021 · 3b3ed82 · 3b3ed82
1 parent 29ddaa8
commit 3b3ed82
Show file tree

Hide file tree

Showing 33 changed files with 371 additions and 426 deletions.
diff --git a/client-html/jest.config.js b/client-html/jest.config.js
@@ -10,6 +10,9 @@ module.exports = {
       tsconfig: "tsconfig.test.json",
     },
   },
+  setupFiles: [
+    "<rootDir>/src/tests/tests.setup.ts"
+  ],
   transform: {
     ".+\\.(css|styl|less|sass|scss|png|jpg|gif|svg|ttf|woff|woff2)$": "jest-transform-stub",
   },

diff --git a/client-html/src/js/common/components/form/formFields/EditInPlaceDateTimeField.tsx b/client-html/src/js/common/components/form/formFields/EditInPlaceDateTimeField.tsx
@@ -30,7 +30,9 @@ import IconButton from "@mui/material/IconButton";
 import TextField from "@mui/material/TextField";
 import { DateTimeField } from "./DateTimeField";
 import { formatStringDate } from "../../../utils/dates/formatString";
-import { HH_MM_COLONED, III_DD_MMM_YYYY, III_DD_MMM_YYYY_HH_MM, YYYY_MM_DD_MINUSED } from "../../../utils/dates/format";
+import {
+ HH_MM_COLONED, III_DD_MMM_YYYY, III_DD_MMM_YYYY_HH_MM, YYYY_MM_DD_MINUSED 
+} from "../../../utils/dates/format";
 import { appendTimezone, appendTimezoneToUTC } from "../../../utils/dates/formatTimezone";
 
 const styles = theme => createStyles({
@@ -180,21 +182,17 @@ const EditInPlaceDateTimeField: React.FC<any> = (
    fieldClasses = {},
    formatting = "primary",
    meta: { error, invalid },
-   InputProps = {},
    labelAdornment,
    helperText,
    label,
    listSpacing = true,
-   hideLabel,
-   editableComponent,
    disabled,
    formatValue,
    className,
    onKeyPress,
    placeholder,
    inlineMargin,
     persistValue,
-   ...custom
   }
 ) => {
   const [isEditing, setIsEditing] = useState(false);
@@ -393,20 +391,20 @@ const EditInPlaceDateTimeField: React.FC<any> = (
                 onKeyDown={onEnterPress}
                 inputRef={inputNode}
                 inputProps={{
-                size: isInline && renderedValue ? renderedValue.length + 1 : undefined,
-                className: clsx({
-                  [classes.inlineInput]: isInline,
-                  [classes.readonly]: disabled,
-                }),
-                placeholder: placeholder || (!isEditing && "No value"),
-              }}
+                  size: isInline && renderedValue ? renderedValue.length + 1 : undefined,
+                  className: clsx({
+                    [classes.inlineInput]: isInline,
+                    [classes.readonly]: disabled,
+                  }),
+                  placeholder: placeholder || (!isEditing && "No value"),
+                }}
                 value={textValue}
                 classes={{
-                root: clsx(classes.input, fieldClasses.text, isInline && classes.inlineInput,
-                  classes.inputWrapper),
-                underline: fieldClasses.underline,
-                input: clsx(classes.input, fieldClasses.text)
-              }}
+                  root: clsx(classes.input, fieldClasses.text, isInline && classes.inlineInput,
+                    classes.inputWrapper),
+                  underline: fieldClasses.underline,
+                  input: clsx(classes.input, fieldClasses.text)
+                }}
                 endAdornment={(
                   <InputAdornment position="end" className={classes.inputEndAdornment}>
                     <IconButton

diff --git a/client-html/src/js/common/components/form/formFields/EditInPlaceQuerySelect.tsx b/client-html/src/js/common/components/form/formFields/EditInPlaceQuerySelect.tsx
@@ -1171,7 +1171,7 @@ class EditInPlaceQuerySelect extends React.PureComponent<Props, State> {
 
     const label = this.getOptionLabel(data);
 
-    const content = getHighlightedPartLabel(label, searchValue);
+    const content = getHighlightedPartLabel(label, searchValue, optionProps);
 
     let option = content;
 

diff --git a/client-html/src/js/common/components/form/formFields/EditInPlaceSearchSelect.tsx b/client-html/src/js/common/components/form/formFields/EditInPlaceSearchSelect.tsx
@@ -78,13 +78,6 @@ const searchStyles = theme => createStyles({
       maxWidth: "calc(100% * 1.4)"
     }
   },
-  option: {
-    whiteSpace: "nowrap",
-    "& > span:last-child": {
-      overflow: "hidden",
-      textOverflow: "ellipsis"
-    }
-  },
   inline: {
     fontSize: "inherit"
   },
@@ -251,7 +244,6 @@ const EditInPlaceSearchSelect: React.FC<Props & WrappedFieldProps> = ({
       : [...items]
   ), [items, selectLabelCondition, selectLabelMark, sortPropKey]);
 
-  const isAdornmentHovered = useRef<boolean>(false);
   const inputNode = useRef<any>(null);
 
   const [searchValue, setSearchValue] = useState<string>("");
@@ -273,10 +265,6 @@ const EditInPlaceSearchSelect: React.FC<Props & WrappedFieldProps> = ({
   }, [selectLabelCondition, formattedDisplayValue, defaultDisplayValue, sortedItems, input.value]);
 
   const onBlur = () => {
-    if (isAdornmentHovered.current) {
-      return;
-    }
-
     setIsEditing(false);
 
     if (!inline) {
@@ -289,24 +277,6 @@ const EditInPlaceSearchSelect: React.FC<Props & WrappedFieldProps> = ({
     }
   };
 
-  const onAdornmentOver = () => {
-    isAdornmentHovered.current = true;
-  };
-
-  const onAdornmentOut = () => {
-    isAdornmentHovered.current = false;
-  };
-
-  const onAdornmentClick = e => {
-    if (isAdornmentHovered.current) {
-      e.preventDefault();
-    }
-    setTimeout(() => {
-      isAdornmentHovered.current = false;
-      onBlur();
-    }, 1000);
-  };
-
   const formatCreateLabel = inputValue => `${createLabel} "${inputValue}"`;
 
   const filterItems = items => {
@@ -455,13 +425,11 @@ const EditInPlaceSearchSelect: React.FC<Props & WrappedFieldProps> = ({
   };
 
   const renderOption = (optionProps, data) => {
-    const option = getHighlightedPartLabel(getOptionLabel(data), searchValue);
-
     if (typeof itemRenderer === "function") {
-      return itemRenderer(option, data, searchValue) as any;
+      return itemRenderer(getHighlightedPartLabel(getOptionLabel(data), searchValue), data, searchValue, optionProps) as any;
     }
 
-    return option as any;
+    return getHighlightedPartLabel(getOptionLabel(data), searchValue, optionProps);
   };
 
   const displayedValue = useMemo(() => {
@@ -488,7 +456,7 @@ const EditInPlaceSearchSelect: React.FC<Props & WrappedFieldProps> = ({
   }, [formattedDisplayValue, selectLabelCondition, alwaysDisplayDefault, returnType, defaultDisplayValue, selectLabelMark, input, classes]);
 
   const labelContent = useMemo(() => (labelAdornment ? (
-    <span onMouseEnter={onAdornmentOver} onMouseLeave={onAdornmentOut} onMouseDown={onAdornmentClick}>
+    <span>
       {label}
       {' '}
       <span className={classes.labelAdornment}>{labelAdornment}</span>
@@ -529,7 +497,6 @@ const EditInPlaceSearchSelect: React.FC<Props & WrappedFieldProps> = ({
             onChange={handleChange}
             classes={{
               root: clsx("d-inline-flex", classes.root),
-              option: itemRenderer ? null : classes.option,
               hasPopupIcon: classes.hasPopup,
               hasClearIcon: classes.hasClear,
               inputRoot: clsx(classes.inputWrapper, isEditing && classes.isEditing)
@@ -649,7 +616,7 @@ const EditInPlaceSearchSelect: React.FC<Props & WrappedFieldProps> = ({
           />
         </div>
       </div>
-)}
+    )}
     </div>
   );
 };

diff --git a/client-html/src/js/common/components/form/formFields/SelectCustomComponents.tsx b/client-html/src/js/common/components/form/formFields/SelectCustomComponents.tsx
@@ -12,6 +12,7 @@ import { createStyles } from "@mui/styles";
 import { green } from "@mui/material/colors";
 import clsx from "clsx";
 import { AppTheme } from "../../../../model/common/Theme";
+import { Typography } from "@mui/material";
 
 export const selectStyles = theme => createStyles({
     textField: {
@@ -84,12 +85,18 @@ export const selectStyles = theme => createStyles({
 
 const listRef = React.createRef<any>();
 
-export const ListRow = React.memo<any>(({ data, index, style }) => React.cloneElement(data[index], {
-  style: {
+export const ListRow = React.memo<any>(({ data, index, style }) => {
+  const inlineStyle = {
     ...style,
-    top: style.top + 8,
-  },
-}), areEqual);
+    top: (style.top as number) + 8,
+  };
+
+  return (
+    <Typography component="li" noWrap style={inlineStyle}>
+      {data[index]}
+    </Typography>
+  );
+}, areEqual);
 
 const OuterElementContext = React.createContext({});
 

diff --git a/client-html/src/js/common/components/layout/TabsList.tsx b/client-html/src/js/common/components/layout/TabsList.tsx
@@ -110,14 +110,14 @@ const TabsList = React.memo<Props & RouteComponentProps>(({
   const [expanded, setExpanded] = useState<number[]>([]);
 
   useEffect(() => {
-    const stored = JSON.parse(LSGetItem(TABLIST_LOCAL_STORAGE_KEY) || "");
+    const stored = JSON.parse(LSGetItem(TABLIST_LOCAL_STORAGE_KEY));
     if (stored && stored[itemProps.rootEntity]) {
       setExpanded(stored[itemProps.rootEntity]);
     }
   }, []);
 
   useEffect(() => {
-    const stored = JSON.parse(LSGetItem(TABLIST_LOCAL_STORAGE_KEY) || "");
+    const stored = JSON.parse(LSGetItem(TABLIST_LOCAL_STORAGE_KEY));
     let updated = {};
     if (stored) {
       updated = { ...stored };

diff --git a/client-html/src/js/common/styles/GlobalStylesProvider.tsx b/client-html/src/js/common/styles/GlobalStylesProvider.tsx
@@ -331,34 +331,28 @@ const globalStyles = (theme: AppTheme) =>
         }
       },
       ".errorColor": {
-        color: theme.palette.error.main
+        color: theme.palette.error.light
       },
       ".errorBackgroundColor": {
         backgroundColor: theme.palette.error.main
       },
       ".errorColorFade-0-2": {
         color: alpha(theme.palette.error.main, 0.2)
       },
-      ".errorDarkColor": {
-        color: theme.palette.error.dark
-      },
-      ".errorDarkBackgroundColor": {
-        backgroundColor: theme.palette.error.dark
-      },
       ".errorContrastColor": {
         color: theme.palette.error.contrastText
       },
       ".primaryColor": {
         color: theme.palette.primary.main
       },
       ".warningColor": {
-        color: theme.palette.warning.main
+        color: theme.palette.warning.light
       },
       ".successColor": {
-        color: theme.palette.success.main
+        color: theme.palette.success.light
       },
       ".successBackgroundColor": {
-        backgroundColor: theme.palette.success.main
+        backgroundColor: theme.palette.success.light
       },
       ".primaryContarstText": {
         color: theme.palette.primary.contrastText
@@ -432,10 +426,7 @@ const globalStyles = (theme: AppTheme) =>
         padding: theme.spacing(1)
       },
       ".listHeadingPadding": {
-        padding: `${theme.spacing(1) + 4}px ${theme.spacing(3)}px`,
-        display: "flex",
-        justifyContent: "space-between",
-        height: "auto"
+        padding: theme.spacing(1.5,3),
       },
       ".appHeaderFontSize": {
         fontSize: "1.125rem"

diff --git a/client-html/src/js/common/themes/ishTheme.ts b/client-html/src/js/common/themes/ishTheme.ts
@@ -130,31 +130,15 @@ const createOverrides = (palette):{ components: Components } => ({
     },
     MuiCssBaseline: {
       styleOverrides: {
-        "@global": {
-          body: {
-            fontFeatureSettings:
-              '"dlig" 0, "numr" 0, "dnom" 0, "tnum" 0, "case" 0, "zero" 0, "frac" 0, '
-              + '"sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01" 0, "ss02" 0, "ss03" 0, '
-              + '"cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv08", "cv09", '
-              + '"cv10", "cv11", "calt", "liga", "kern"'
-          }
+        body: {
+          fontFeatureSettings:
+            '"dlig" 0, "numr" 0, "dnom" 0, "tnum" 0, "case" 0, "zero" 0, "frac" 0, '
+            + '"sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01" 0, "ss02" 0, "ss03" 0, '
+            + '"cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv08", "cv09", '
+            + '"cv10", "cv11", "calt", "liga", "kern"'
         }
       }
     },
-    // MuiPickerDTTabs: {
-    //   styleOverrides: {
-    //     tabs: {
-    //       color: palette.primary.contrastText
-    //     }
-    //   }
-    // },
-    // PrivateTabIndicator: {
-    //   styleOverrides: {
-    //     colorSecondary: {
-    //       backgroundColor: palette.primary.contrastText
-    //     }
-    //   }
-    // },
     MuiMenuItem: {
       styleOverrides: {
         root: {

diff --git a/client-html/src/js/common/utils/formatting/index.tsx b/client-html/src/js/common/utils/formatting/index.tsx
@@ -2,12 +2,12 @@ import React from "react";
 import parse from "autosuggest-highlight/parse";
 import match from "autosuggest-highlight/match";
 
-export const getHighlightedPartLabel = (label: string, highlighted: string) => {
+export const getHighlightedPartLabel = (label: string, highlighted: string, options?: any) => {
   const matches = match(label, highlighted);
   const parts = parse(label, matches);
 
   return (
-    <div>
+    <div {...options || {}}>
       {parts.map((part, index) => (
         <span key={index}>{part.highlight ? <strong>{part.text}</strong> : part.text}</span>
       ))}

diff --git a/client-html/src/js/common/utils/hooks/index.ts b/client-html/src/js/common/utils/hooks/index.ts
@@ -45,7 +45,6 @@ function fire(stuck) {
 
 export const useStickyScrollSpy = () => {
   const scrollSpy = (e) => {
-    console.log(e);
     if (e.target) {
       fire(e.target.scrollTop > 20);
     }

diff --git a/client-html/src/js/common/utils/storage/index.ts b/client-html/src/js/common/utils/storage/index.ts
@@ -6,6 +6,7 @@ export const LSGetItem = (key: string) => {
   try {
     return localStorage.getItem(key);
   } catch (e) {
+    console.error(e);
     return null;
   }
 };
@@ -14,15 +15,15 @@ export const LSSetItem = (key: string, value: string) => {
   try {
     localStorage.setItem(key, value);
   } catch (e) {
-    //
+    console.error(e);
   }
 };
 
 export const LSRemoveItem = (key: string) => {
   try {
     localStorage.removeItem(key);
   } catch (e) {
-    //
+    console.error(e);
   }
 };