jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - siteform loader, trash btn project exists check, IconButton replace

Browse source
This commit is contained in:
Shekar Siri 2022-07-19 13:43:51 +02:00
parent c3e7902895
commit 8989e460f0
3 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx
View file

@ -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 (
<Popup
content={ `${ !isAdmin ? PERMISSION_WARNING : (!canAddProject ? LIMIT_WARNING : 'Add a Project') }` }
>
<IconButton
<Popup content={`${!isAdmin ? PERMISSION_WARNING : !canAddProject ? LIMIT_WARNING : 'Add a Project'}`}>
<Button rounded={true} variant="outline" icon="plus" onClick={onClick} disabled={!canAddProject || !isAdmin}></Button>
{/* <IconButton
id="add-button"
disabled={ !canAddProject || !isAdmin }
circle
icon="plus"
outline
onClick={ onClick }
/>
/> */}
</Popup>
);
}
export default AddProjectButton;
export default AddProjectButton;

10
frontend/app/components/Client/Sites/NewSiteForm.js
View file

@ -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'}
</Button>
<Button variant="text" type="button" plain onClick={() => this.remove(site)}>
<Icon name="trash" size="16" />
</Button>
{site.exists() && (
<Button variant="text" type="button" onClick={() => this.remove(site)}>
<Icon name="trash" size="16" />
</Button>
)}
</div>
{ this.state.existsError &&
<div className={ styles.errorMessage }>

9
frontend/app/components/ui/Button/Button.tsx
View file

@ -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 (
<button {...rest} type={type} className={cn(classes, className)}>
{icon && <Icon className={cn({ 'mr-2': children })} name={icon} color={iconColor} size="16" />}