Cb 4590 prevent search field autocomplete (#2398)

* CB-4590 prevent autocomplete for search in connection-form filter

* CB-4590 fixes search autocomplete for devtools

* CB-4590 removed reshadow from plugin-devtools

* CB-4590 disable autocomplete for all passwords

* Revert "CB-4590 disable autocomplete for all passwords"

This reverts commit 4c20f46.

* CB-4590 disable auto complete for auth provider passwords

* CB-4590 adds type="search" for all filters

* CB-4590 disables autocomplete for most of authentication forms (except local and ssh database)

* CB-4590 disables autocomplete for create database ssh tunnel passphrase

* CB-4590 better readability for props

* Revert "CB-4590 better readability for props"

This reverts commit 83f6f99.

* Revert "CB-4590 disables autocomplete for create database ssh tunnel passphrase"

This reverts commit 0655421.

* Revert "CB-4590 disables autocomplete for most of authentication forms (except local and ssh database)"

This reverts commit c915f5b.

* CB-4590 chore: x for the input type search disabled in forms

---------

Co-authored-by: s.teleshev <[email protected]>
Co-authored-by: Daria Marutkina <[email protected]>

webapp/packages/core-blocks/src/FormControls/Filter.tsx

@@ -103,6 +103,7 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
     <div className={s(styles, { filterContainer: true }, className)} onClick={onClick}>
       <InputField
         ref={inputRef}
+        type="search"
         className={s(styles, { inputField: true, max })}
         placeholder={placeholder}
         disabled={disabled}

webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx

@@ -60,6 +60,7 @@ export const ItemListSearch: React.FC<IProps> = function ItemListSearch({ value,
         <input
           ref={inputRef}
           name="search"
+          type="search"
           className={s(styles, { input: true }, className)}
           placeholder={translate(placeholder || 'ui_search')}
           value={inputValue}

webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx

@@ -34,6 +34,7 @@ interface ObjectPropertyFormProps extends ILayoutSizeProps {
   hideEmptyPlaceholder?: boolean;
   emptyPlaceholder?: string;
   canShowPassword?: boolean;
+  disableAutoCompleteForPasswords?: boolean;
   isSaved?: (property: ObjectPropertyInfo) => boolean;
   geLayoutSize?: (property: ObjectPropertyInfo) => ILayoutSizeProps;
   onFocus?: (name: string) => void;
@@ -44,6 +45,7 @@ export const ObjectPropertyInfoForm = observer<ObjectPropertyFormProps>(function
   state,
   defaultState,
   category,
+  disableAutoCompleteForPasswords = false,
   editable = true,
   className,
   autofillToken = '',
@@ -90,7 +92,7 @@ export const ObjectPropertyInfoForm = observer<ObjectPropertyFormProps>(function
             state={state}
             defaultState={defaultState}
             editable={editable}
-            autofillToken={autofillToken}
+            autofillToken={property.features.includes('password') && disableAutoCompleteForPasswords ? 'new-password' : autofillToken}
             disabled={disabled}
             readOnly={readOnly}
             autoHide={autoHide}

webapp/packages/core-theming/src/styles/_form-controls.scss

@@ -26,6 +26,23 @@
     overflow: hidden;
     text-overflow: ellipsis;
     min-height: 24px;
+    &[type='search']::-ms-clear {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+    &[type='search']::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+    /* clears the ‘X’ from Chrome */
+    &[type='search']::-webkit-search-decoration,
+    &[type='search']::-webkit-search-cancel-button,
+    &[type='search']::-webkit-search-results-button,
+    &[type='search']::-webkit-search-results-decoration {
+      display: none;
+    }
   }
 
   input,

webapp/packages/plugin-devtools/package.json

@@ -29,12 +29,12 @@
     "@cloudbeaver/plugin-user-profile": "~0.1.0",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
-    "react": "^18.2.0",
-    "reshadow": "^0.0.1"
+    "react": "^18.2.0"
   },
   "peerDependencies": {},
   "devDependencies": {
     "@types/react": "^18.2.42",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "typescript-plugin-css-modules": "^5.0.2"
   }
 }

webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.m.css

@@ -0,0 +1,3 @@
+.searchBox {
+  padding: 8px 12px;
+}

webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.tsx

@@ -6,41 +6,36 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { useStyles } from '@cloudbeaver/core-blocks';
+import { s, useS } from '@cloudbeaver/core-blocks';
 import type { IContextMenuItemProps } from '@cloudbeaver/core-ui';
 import type { ICustomMenuItemComponent } from '@cloudbeaver/core-view';
 
 import { DATA_CONTEXT_MENU_SEARCH } from './DATA_CONTEXT_MENU_SEARCH';
-
-const styles = css`
-  search-box {
-    padding: 8px 12px;
-  }
-`;
+import styles from './SearchResourceMenuItemComponent.m.css';
 
 export const SearchResourceMenuItemComponent: ICustomMenuItemComponent<IContextMenuItemProps> = observer(function SearchResourceMenuItemComponent({
   item,
   onClick,
   menuData,
   className,
-  style,
 }) {
+  const style = useS(styles);
   const value = menuData.context.tryGet(DATA_CONTEXT_MENU_SEARCH) ?? '';
   function handleChange(value: string) {
     menuData.context.set(DATA_CONTEXT_MENU_SEARCH, value);
   }
 
-  return styled(useStyles(style, styles))(
-    <search-box dir="ltr" className={className}>
+  return (
+    <div dir="ltr" className={s(style, { searchBox: true }, className)}>
       <input
         name="search"
+        type="search"
         placeholder="Search for resource..."
         value={value}
         autoComplete="off"
         onChange={event => handleChange(event.target.value)}
       />
-    </search-box>,
+    </div>
   );
 });