From 4adfd4247a30014bbeb73d063c5e79da28760a7d Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 18 Jul 2022 18:05:02 +0200 Subject: [PATCH 1/4] fix(ui) - console errors with popup --- .../app/components/ui/ItemMenu/ItemMenu.js | 139 ++++++++---------- frontend/app/components/ui/Popup/Popup.tsx | 89 ++++++----- 2 files changed, 116 insertions(+), 112 deletions(-) diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.js b/frontend/app/components/ui/ItemMenu/ItemMenu.js index 18dc414d4..442bcac50 100644 --- a/frontend/app/components/ui/ItemMenu/ItemMenu.js +++ b/frontend/app/components/ui/ItemMenu/ItemMenu.js @@ -1,90 +1,81 @@ import React from 'react'; -import { Icon, Popup } from 'UI'; +import { Icon } from 'UI'; import styles from './itemMenu.module.css'; import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; import cn from 'classnames'; export default class ItemMenu extends React.PureComponent { - state = { - displayed: false, - }; + state = { + displayed: false, + }; - handleEsc = (e) => e.key === 'Escape' && this.closeMenu() + handleEsc = (e) => e.key === 'Escape' && this.closeMenu(); - componentDidMount() { - document.addEventListener("keydown", this.handleEsc, false); - } - componentWillUnmount() { - document.removeEventListener("keydown", this.handleEsc, false); - } + componentDidMount() { + document.addEventListener('keydown', this.handleEsc, false); + } + componentWillUnmount() { + document.removeEventListener('keydown', this.handleEsc, false); + } - onClick = callback => (e) => { - e.stopPropagation(); - callback(e); - } + onClick = (callback) => (e) => { + e.stopPropagation(); + callback(e); + }; - toggleMenu = (e) => { - this.setState({ displayed: !this.state.displayed }); - } + toggleMenu = (e) => { + this.setState({ displayed: !this.state.displayed }); + }; - closeMenu = () => this.setState({ displayed: false }) + closeMenu = () => this.setState({ displayed: false }); - render() { - const { items, label = "", bold } = this.props; - const { displayed } = this.state; - const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : ''; + render() { + const { items, label = '', bold } = this.props; + const { displayed } = this.state; + const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : ''; - return ( -
- -
- {label && {label}} -
{ this.menuBtnRef = ref; } } - className={cn("rounded-full flex items-center justify-center", { 'bg-gray-light' : displayed, "w-10 h-10" : !label })} - role="button" - > - -
-
- -
- { items.filter(({ hidden }) => !hidden).map(({ onClick, text, icon, disabled = false, disabledMessage = '' }) => ( -
{} } - className={disabled ? 'cursor-not-allowed' : ''} - role="menuitem" - tabIndex="-1" - > - -
- { icon && ( -
- + return ( +
+ +
+ {label && {label}} +
{ + this.menuBtnRef = ref; + }} + className={cn('rounded-full flex items-center justify-center', { 'bg-gray-light': displayed, 'w-10 h-10': !label })} + role="button" + > +
- )} -
{ text }
-
- +
+ +
+ {items + .filter(({ hidden }) => !hidden) + .map(({ onClick, text, icon, disabled = false, disabledMessage = '' }) => ( +
{}} + className={disabled ? 'cursor-not-allowed' : ''} + role="menuitem" + tabIndex="-1" + > +
+ {icon && ( +
+ +
+ )} +
{text}
+
+
+ ))} +
- ))} -
-
- ); - } + ); + } } diff --git a/frontend/app/components/ui/Popup/Popup.tsx b/frontend/app/components/ui/Popup/Popup.tsx index d44976b28..fba21fd4e 100644 --- a/frontend/app/components/ui/Popup/Popup.tsx +++ b/frontend/app/components/ui/Popup/Popup.tsx @@ -1,44 +1,57 @@ import React from 'react'; -import { Tooltip } from 'react-tippy'; +import { Tooltip, Theme, Trigger, Position } from 'react-tippy'; interface Props { - content?: any; - title?: any; - trigger?: any - position?: any - className?: string - delay?: number - disabled?: boolean - arrow?: boolean - open?: boolean - style?: any - [x:string]: any; + content?: any; + title?: any; + trigger?: Trigger; + position?: Position; + className?: string; + delay?: number; + hideDelay?: number; + duration?: number; + disabled?: boolean; + arrow?: boolean; + open?: boolean; + style?: any; + theme?: Theme; + interactive?: boolean; + children?: any; + // [x:string]: any; } export default ({ - position = 'top', - title='', - className='', - trigger = 'mouseenter', - delay = 1000, - disabled = false, - arrow = true, - theme = 'dark', - style = {}, - ...props -}: Props) => ( - - { props.children } - + position = 'top', + title = '', + className = '', + trigger = 'mouseenter', + delay = 1000, + hideDelay = 0, + content = '', + duration = 0, + disabled = false, + arrow = true, + theme = 'dark', + style = {}, + interactive = false, + children, +}: // ...props +Props) => ( + + {children} + ); From 69dcb980662131c416131bf1f5b67e4dfed6ecda Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 18 Jul 2022 18:07:01 +0200 Subject: [PATCH 2/4] fix(ui) - attribute class name --- frontend/app/components/ui/CircularLoader/CircularLoader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/components/ui/CircularLoader/CircularLoader.js b/frontend/app/components/ui/CircularLoader/CircularLoader.js index 74fa004f4..4c9fb69f5 100644 --- a/frontend/app/components/ui/CircularLoader/CircularLoader.js +++ b/frontend/app/components/ui/CircularLoader/CircularLoader.js @@ -2,7 +2,7 @@ import React from 'react'; import cn from 'classnames'; export default ({ children = null, loading = true, size = 'tiny', ...props }) => (!loading ? children : - + From ac42eb466be21f4194c258543fdbd01061e747a9 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 19 Jul 2022 13:43:51 +0200 Subject: [PATCH 3/4] fix(ui) - siteform loader, trash btn project exists check, IconButton replace --- .../Sites/AddProjectButton/AddUserButton.tsx | 15 +++++++-------- .../app/components/Client/Sites/NewSiteForm.js | 10 ++++++---- frontend/app/components/ui/Button/Button.tsx | 9 ++++++++- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx b/frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx index 078122bb2..7371056fd 100644 --- a/frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx +++ b/frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx @@ -1,29 +1,28 @@ import React from 'react'; -import { Popup, IconButton } from 'UI'; +import { Popup, Button, IconButton } from 'UI'; import { useStore } from 'App/mstore'; import { useObserver } from 'mobx-react-lite'; const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.'; const LIMIT_WARNING = 'You have reached site limit.'; -function AddProjectButton({ isAdmin = false, onClick }: any ) { +function AddProjectButton({ isAdmin = false, onClick }: any) { const { userStore } = useStore(); const limtis = useObserver(() => userStore.limits); const canAddProject = useObserver(() => isAdmin && (limtis.projects === -1 || limtis.projects > 0)); return ( - - + + {/* + /> */} ); } -export default AddProjectButton; \ No newline at end of file +export default AddProjectButton; diff --git a/frontend/app/components/Client/Sites/NewSiteForm.js b/frontend/app/components/Client/Sites/NewSiteForm.js index 57713d981..c6633b73b 100644 --- a/frontend/app/components/Client/Sites/NewSiteForm.js +++ b/frontend/app/components/Client/Sites/NewSiteForm.js @@ -12,7 +12,7 @@ import { confirm } from 'UI'; site: state.getIn([ 'site', 'instance' ]), sites: state.getIn([ 'site', 'list' ]), siteList: state.getIn([ 'site', 'list' ]), - loading: state.getIn([ 'site', 'save', 'loading' ]), + loading: state.getIn([ 'site', 'save', 'loading' ]) || state.getIn([ 'site', 'remove', 'loading' ]), }), { save, remove, @@ -103,9 +103,11 @@ export default class NewSiteForm extends React.PureComponent { > {site.exists() ? 'Update' : 'Add'} - + {site.exists() && ( + + )}
{ this.state.existsError &&
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx index 075d95b33..bc71be3a0 100644 --- a/frontend/app/components/ui/Button/Button.tsx +++ b/frontend/app/components/ui/Button/Button.tsx @@ -10,6 +10,7 @@ interface Props { type?: 'button' | 'submit' | 'reset'; loading?: boolean; icon?: string; + rounded?: boolean; [x: string]: any; } export default (props: Props) => { @@ -22,10 +23,12 @@ export default (props: Props) => { disabled = false, children, loading = false, + rounded = false, ...rest } = props; - const classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap']; + let classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap']; + if (variant === 'default') { classes.push('bg-white hover:bg-gray-lightest border border-gray-light'); } @@ -62,6 +65,10 @@ export default (props: Props) => { iconColor = 'red'; } + if (rounded) { + classes = classes.map((c) => c.replace('rounded', 'rounded-full h-10 w-10 justify-center')); + } + return (