Skip to content
This repository was archived by the owner on Apr 18, 2023. It is now read-only.

Draft: Default Permissions tab (PROJQUAY-4570) #151

Open
harishsurf wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Draft: Default Permissions tab (PROJQUAY-4570) #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions src/atoms/OrganizationListState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import {atom} from 'recoil';
import {SearchState} from 'src/components/toolbar/SearchTypes';
import {IOrganization} from 'src/resources/OrganizationResource';
import ColumnNames from 'src/routes/OrganizationsList/ColumnNames';
import {permissionColumnNames} from 'src/routes/OrganizationsList/Organization/Tabs/DefaultPermissions/DefaultPermissions';

export const refreshPageState = atom({
key: 'refreshOrgPageState',
default: 0,
});

// Organization List page
export const selectedOrgsState = atom<IOrganization[]>({
key: 'selectedOrgsState',
default: [],
});
export const searchOrgsState = atom<SearchState>({
key: 'searchOrgsState',
default: {
query: '',
field: ColumnNames.name,
},
});
16 changes: 0 additions & 16 deletions src/atoms/UserState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,6 @@
import {atom} from 'recoil';
import {IOrganization} from 'src/resources/OrganizationResource';
import ColumnNames from 'src/routes/OrganizationsList/ColumnNames';
import {SearchState} from 'src/components/toolbar/SearchTypes';

export const CurrentUsernameState = atom({
key: 'currentUsernameState',
default: '',
});

export const selectedOrgsState = atom<IOrganization[]>({
key: 'selectedOrgsState',
default: [],
});

export const searchOrgsState = atom<SearchState>({
key: 'searchOrgsState',
default: {
query: '',
field: ColumnNames.name,
},
});
54 changes: 40 additions & 14 deletions src/components/EntitySearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import {Select, SelectOption, SelectVariant} from '@patternfly/react-core';
import {
Select,
SelectGroup,
SelectOption,
SelectVariant,
} from '@patternfly/react-core';
import {useEffect, useState} from 'react';
import {useEntities} from 'src/hooks/UseEntities';
import {Entity, getMemberType} from 'src/resources/UserResource';
Expand All @@ -9,13 +14,19 @@ export default function EntitySearch(props: EntitySearchProps) {
const {entities, isError, searchTerm, setSearchTerm} = useEntities(props.org);

useEffect(() => {
if (selectedEntityName != undefined && selectedEntityName != '') {
if (
selectedEntityName !== undefined &&
selectedEntityName !== '' &&
entities.length > 0
) {
const filteredEntity = entities.filter(
(e) => e.name === selectedEntityName,
);
const selectedEntity =
filteredEntity.length > 0 ? filteredEntity[0] : null;
props.onSelect(selectedEntity);
if (selectedEntity !== null) {
props.onSelect(selectedEntity);
}
}
}, [selectedEntityName]);

Expand All @@ -29,10 +40,15 @@ export default function EntitySearch(props: EntitySearchProps) {
<Select
toggleId={props.id ? props.id : 'entity-search'}
isOpen={isOpen}
// selections={props.defaultSelection ? props.defaultSelection : searchTerm}
selections={searchTerm}
onSelect={(e, value) => {
setSearchTerm(value as string);
setSelectedEntityName(value as string);
onSelect={(e, value, isPlaceholder) => {
// Handles the case when the selected option is an action item. The
// handler is defined within the child option component
if (!isPlaceholder) {
setSearchTerm(value as string);
setSelectedEntityName(value as string);
}
setIsOpen(!isOpen);
}}
onToggle={() => {
Expand All @@ -44,23 +60,33 @@ export default function EntitySearch(props: EntitySearchProps) {
}}
shouldResetOnSelect={true}
onClear={() => {
props.onSelect(null);
console.log('selected entity');
setSearchTerm('');
// setSelectedEntityName('');
}}
placeholderText={props.placeholderText}
>
{entities.map((e) => (
<SelectOption
key={e.name}
value={e.name}
description={getMemberType(e)}
/>
))}
<></>
{!searchTerm
? props.defaultOptions
: entities?.map((e) => (
<SelectOption
key={e.name}
value={e.name}
description={getMemberType(e)}
/>
))}
</Select>
);
}

interface EntitySearchProps {
org: string;
onSelect: (entity: Entity) => void;
onSelect: (selectedItem: Entity) => void;
onError?: () => void;
id?: string;
defaultOptions?: any;
defaultSelection?: string;
placeholderText?: string;
}
8 changes: 0 additions & 8 deletions src/components/header/HeaderToolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,6 @@
--pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 1;
}

.pf-c-form__label {
--pf-c-form__label--FontSize: 1rem;
}

.pf-c-form__label-text {
--pf-c-form__label-text--FontWeight: 1;
}

.pf-c-switch {
--pf-c-switch--Height: 1rem;
}
Expand Down
3 changes: 3 additions & 0 deletions src/components/modals/wizard/AddToRepository.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function AddToRepository() {
return <div>step 2</div>;
}
45 changes: 45 additions & 0 deletions src/components/toolbar/AllSelectedToggleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import {
ToggleGroup,
ToggleGroupItem,
ToolbarItem,
} from '@patternfly/react-core';

export default function AllSelectedToggleButton(
props: AllSelectedToggleButtonProps,
) {
const [isSelected, setIsSelected] = React.useState('');

const handleItemClick = (
isSelected: boolean,
event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
) => {
const id = event.currentTarget.id;
setIsSelected(id);
};

return (
<ToolbarItem>
<ToggleGroup aria-label="Default with single selectable">
<ToggleGroupItem
text="All"
buttonId="All"
isSelected={isSelected === 'All'}
onChange={handleItemClick}
/>
<ToggleGroupItem
text="Selected"
buttonId="Selected"
isSelected={isSelected === 'Selected'}
onChange={handleItemClick}
/>
</ToggleGroup>
</ToolbarItem>
);
}

interface AllSelectedToggleButtonProps {
selectedItems: any[];
allItemsList: any[];
itemsPerPageList: any[];
}
19 changes: 10 additions & 9 deletions src/components/toolbar/DropdownCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@ export function DropdownCheckbox(props: DropdownCheckboxProps) {

const selectPageItems = () => {
props.deSelectAll([]);
props.itemsPerPageList.map((value, index) =>
props.itemsPerPageList?.map((value, index) =>
props.onItemSelect(value, index, true),
);
setIsOpen(false);
};

const selectAllItems = () => {
props.allItemsList.map((value, index) =>
deSelectAll();
props.allItemsList?.map((value, index) =>
props.onItemSelect(value, index, true),
);
setIsOpen(false);
Expand All @@ -44,17 +45,17 @@ export function DropdownCheckbox(props: DropdownCheckboxProps) {
onClick={selectPageItems}
>
Select page (
{props.allItemsList.length > props.itemsPerPageList.length
? props.itemsPerPageList.length
: props.allItemsList.length}
{props.allItemsList?.length > props.itemsPerPageList?.length
? props.itemsPerPageList?.length
: props.allItemsList?.length}
)
</DropdownItem>,
<DropdownItem
key="select-all-items-action"
component="button"
onClick={selectAllItems}
>
Select all ({props.allItemsList.length})
Select all ({props.allItemsList?.length})
</DropdownItem>,
];

Expand All @@ -68,13 +69,13 @@ export function DropdownCheckbox(props: DropdownCheckboxProps) {
id={props.id ? props.id : 'split-button-text-checkbox'}
key="split-checkbox"
aria-label="Select all"
isChecked={props.selectedItems.length > 0 ? true : false}
isChecked={props.selectedItems?.length > 0 ? true : false}
onChange={(checked) =>
checked ? selectPageItems() : deSelectAll()
}
>
{props.selectedItems.length != 0
? props.selectedItems.length + ' selected'
{props.selectedItems?.length != 0
? props.selectedItems?.length + ' selected'
: ''}
</DropdownToggleCheckbox>,
]}
Expand Down
Loading