From 38987293a31323662fcc3efb96cdb1cb942835fc Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Fri, 23 Feb 2024 16:49:42 +0100 Subject: [PATCH] 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 4c20f461406ea9bcd813915bb7835f85293293ea. * 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 83f6f99995b02b4ee3afed6aca406d99ade2840c. * Revert "CB-4590 disables autocomplete for create database ssh tunnel passphrase" This reverts commit 06554215acdb19aec566f9bd2367447d23bf7dc8. * Revert "CB-4590 disables autocomplete for most of authentication forms (except local and ssh database)" This reverts commit c915f5bee1375fd5b27d471393eb592fc3d17cf3. * CB-4590 chore: x for the input type search disabled in forms --------- Co-authored-by: s.teleshev Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com> --- .../core-blocks/src/FormControls/Filter.tsx | 1 + .../src/ItemList/ItemListSearch.tsx | 1 + .../ObjectPropertyInfoForm.tsx | 4 +++- .../src/styles/_form-controls.scss | 17 +++++++++++++++++ webapp/packages/plugin-devtools/package.json | 6 +++--- .../SearchResourceMenuItemComponent.m.css | 3 +++ .../SearchResourceMenuItemComponent.tsx | 19 +++++++------------ 7 files changed, 35 insertions(+), 16 deletions(-) create mode 100644 webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.m.css diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.tsx b/webapp/packages/core-blocks/src/FormControls/Filter.tsx index 1b7486377c..735f9fc2f1 100644 --- a/webapp/packages/core-blocks/src/FormControls/Filter.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Filter.tsx @@ -103,6 +103,7 @@ export const Filter = observer>(functio
= function ItemListSearch({ value, boolean; geLayoutSize?: (property: ObjectPropertyInfo) => ILayoutSizeProps; onFocus?: (name: string) => void; @@ -44,6 +45,7 @@ export const ObjectPropertyInfoForm = observer(function state, defaultState, category, + disableAutoCompleteForPasswords = false, editable = true, className, autofillToken = '', @@ -90,7 +92,7 @@ export const ObjectPropertyInfoForm = observer(function state={state} defaultState={defaultState} editable={editable} - autofillToken={autofillToken} + autofillToken={property.features.includes('password') && disableAutoCompleteForPasswords ? 'new-password' : autofillToken} disabled={disabled} readOnly={readOnly} autoHide={autoHide} diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss index 6e7be79893..a029b59cf6 100644 --- a/webapp/packages/core-theming/src/styles/_form-controls.scss +++ b/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, diff --git a/webapp/packages/plugin-devtools/package.json b/webapp/packages/plugin-devtools/package.json index 6473e7b519..024ae52605 100644 --- a/webapp/packages/plugin-devtools/package.json +++ b/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" } } diff --git a/webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.m.css b/webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.m.css new file mode 100644 index 0000000000..1fad1e69ee --- /dev/null +++ b/webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.m.css @@ -0,0 +1,3 @@ +.searchBox { + padding: 8px 12px; +} diff --git a/webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.tsx b/webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.tsx index 93947cf69e..6c76a8351a 100644 --- a/webapp/packages/plugin-devtools/src/ContextMenu/SearchResourceMenuItemComponent.tsx +++ b/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 = 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))( - + return ( +
handleChange(event.target.value)} /> - , +
); });