IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

RolePicker: UI improvements (#49397)

Browse Source 
* RolePicker: Adjust input and display widths

* RolePicker: Use forwardRef

* RolePicker: Apply input styles to roles display
This commit is contained in:
Alex Khomenko 2022-05-24 10:21:31 +03:00 committed by GitHub
parent cbf71fbd7f
commit 8fecf25d54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/RolePicker/RolePicker.tsx
View File

@ -58,7 +58,7 @@ export const RolePicker = ({
} else { } else {
setOffset(-offset); setOffset(-offset);
} }
}, [isOpen]); }, [isOpen, selectedRoles]);
const onOpen = useCallback( const onOpen = useCallback(
(event: FormEvent<HTMLElement>) => { (event: FormEvent<HTMLElement>) => {

19
public/app/core/components/RolePicker/RolePickerInput.tsx
View File

@ -7,6 +7,7 @@ import { useStyles2, getInputStyles, sharedInputStyle, styleMixins, Tooltip, Ico
import { Role } from '../../../types'; import { Role } from '../../../types';
import { ValueContainer } from './ValueContainer'; import { ValueContainer } from './ValueContainer';
import { ROLE_PICKER_WIDTH } from './constants';
const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation(); const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation();
@ -51,7 +52,7 @@ export const RolePickerInput = ({
const numberOfRoles = appliedRoles.length; const numberOfRoles = appliedRoles.length;
return !isFocused ? ( return !isFocused ? (
<div className={styles.selectedRoles} onMouseDown={onOpen}> <div className={cx(styles.wrapper, styles.selectedRoles)} onMouseDown={onOpen}>
{showBuiltInRole && <ValueContainer>{builtInRole}</ValueContainer>} {showBuiltInRole && <ValueContainer>{builtInRole}</ValueContainer>}
<RolesLabel appliedRoles={appliedRoles} numberOfRoles={numberOfRoles} showBuiltInRole={showBuiltInRole} /> <RolesLabel appliedRoles={appliedRoles} numberOfRoles={numberOfRoles} showBuiltInRole={showBuiltInRole} />
</div> </div>
@ -104,18 +105,12 @@ export const RolesLabel = ({ showBuiltInRole, numberOfRoles, appliedRoles }: Rol
</div> </div>
} }
> >
<div> <ValueContainer>{`${showBuiltInRole ? '+' : ''}${numberOfRoles} role${
<ValueContainer>{`${showBuiltInRole ? '+' : ''}${numberOfRoles} role${ numberOfRoles > 1 ? 's' : ''
numberOfRoles > 1 ? 's' : '' }`}</ValueContainer>
}`}</ValueContainer>
</div>
</Tooltip> </Tooltip>
) : ( ) : (
!showBuiltInRole && ( !showBuiltInRole && <ValueContainer>No roles assigned</ValueContainer>
<div>
<ValueContainer>No roles assigned</ValueContainer>
</div>
)
)} )}
</> </>
); );
@ -140,7 +135,7 @@ const getRolePickerInputStyles = (
`, `,
disabled && styles.inputDisabled, disabled && styles.inputDisabled,
css` css`
width: 520px; width: ${ROLE_PICKER_WIDTH}px;
min-height: 32px; min-height: 32px;
height: auto; height: auto;
flex-direction: row; flex-direction: row;

10
public/app/core/components/RolePicker/ValueContainer.tsx
View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { ReactNode } from 'react'; import React, { forwardRef, ReactNode } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { getInputStyles, Icon, IconName, useStyles2, getSelectStyles } from '@grafana/ui'; import { getInputStyles, Icon, IconName, useStyles2, getSelectStyles } from '@grafana/ui';
@ -8,15 +8,17 @@ export interface Props {
children: ReactNode; children: ReactNode;
iconName?: IconName; iconName?: IconName;
} }
export const ValueContainer = ({ children, iconName }: Props) => { export const ValueContainer = forwardRef<HTMLDivElement, Props>(({ children, iconName }, ref) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
return ( return (
<div className={styles.container}> <div className={styles.container} ref={ref}>
{iconName && <Icon name={iconName} size="xs" />} {iconName && <Icon name={iconName} size="xs" />}
{children} {children}
</div> </div>
); );
}; });
ValueContainer.displayName = 'ValueContainer';
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
const { prefix } = getInputStyles({ theme }); const { prefix } = getInputStyles({ theme });

1
public/app/core/components/RolePicker/constants.ts
View File

@ -1 +1,2 @@
export const MENU_MAX_HEIGHT = 300; // max height for the picker's dropdown menu export const MENU_MAX_HEIGHT = 300; // max height for the picker's dropdown menu
export const ROLE_PICKER_WIDTH = 360;