github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

Add no assignees option to user profiles selectable (#140036)

Browse source 
* Add no assignees option to user profiles selectable

* Allow simultaneous selection of no users option and user profiles

* Update filters demo

* Fixing tests because of it getting split into components

* Added suggestions from code review

Co-authored-by: Jonathan Buttner <jonathan.buttner@elastic.co>
This commit is contained in:
Thom Heymann 2022-09-14 16:52:34 +01:00 • committed by GitHub
parent 12acc999c0
commit 40b1a67ae5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 313 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

72
examples/user_profile_examples/public/popover_demo.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import React, { FunctionComponent, useState } from 'react';
import { EuiButtonEmpty } from '@elastic/eui';
import { EuiButtonEmpty, EuiFilterGroup, EuiFilterButton, EuiSpacer, EuiTitle } from '@elastic/eui';
import { UserProfilesPopover, UserProfileWithAvatar } from '@kbn/user-profile-components';
import { PanelWithCodeBlock } from './panel_with_code_block';
@ -57,6 +57,44 @@ export const PopoverDemo: FunctionComponent = () => {
},
];
const [isOpen2, setIsOpen2] = useState(false);
const [selectedOptions2, setSelectedOptions2] = useState<Array<UserProfileWithAvatar | null>>([
null,
]);
const options2: Array<UserProfileWithAvatar | null> = [
null,
{
uid: 'u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0',
enabled: true,
data: {},
user: {
username: 'damaged_raccoon',
email: 'damaged_raccoon@elastic.co',
full_name: 'Damaged Raccoon',
},
},
{
uid: 'u_A_tM4n0wPkdiQ9smmd8o0Hr_h61XQfu8aRPh9GMoRoc_0',
enabled: true,
data: {},
user: {
username: 'physical_dinosaur',
email: 'physical_dinosaur@elastic.co',
full_name: 'Physical Dinosaur',
},
},
{
uid: 'u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0',
enabled: true,
data: {},
user: {
username: 'wet_dingo',
email: 'wet_dingo@elastic.co',
full_name: 'Wet Dingo',
},
},
];
return (
<PanelWithCodeBlock title="Popover" code={code}>
<UserProfilesPopover
@ -78,6 +116,38 @@ export const PopoverDemo: FunctionComponent = () => {
width: 32 * 16,
}}
/>
<EuiSpacer size="l" />
<EuiTitle size="xs">
<h3>Unassigned option</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFilterGroup>
<UserProfilesPopover
button={
<EuiFilterButton
iconType="arrowDown"
numFilters={options2.length}
hasActiveFilters={selectedOptions2.length > 0}
numActiveFilters={selectedOptions2.length}
onClick={() => setIsOpen2((value) => !value)}
>
Assignees
</EuiFilterButton>
}
isOpen={isOpen2}
closePopover={() => setIsOpen2(false)}
selectableProps={{
selectedOptions: selectedOptions2,
options: options2,
onChange: setSelectedOptions2,
height: 32 * 8,
nullOptionLabel: 'Unassigned',
}}
panelStyle={{
width: 32 * 16,
}}
/>
</EuiFilterGroup>
</PanelWithCodeBlock>
);
};