0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a warning upon deleting saved filter which is in use (#2484)

Browse source 
Co-authored-by: Mau Rodriguez Morales <mrodriguezmorales@provectus.com>
This commit is contained in:
Mau Rodríguez Morales 2022-09-01 03:43:46 -06:00 • committed by GitHub
parent 5ff65e4472
commit 0ca69fb142
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddFilter.tsx
View file

@ -18,6 +18,7 @@ export interface FilterModalProps {
activeFilterHandler(activeFilter: MessageFilters, index: number): void; activeFilterHandler(activeFilter: MessageFilters, index: number): void;
toggleEditModal(): void; toggleEditModal(): void;
editFilter(value: FilterEdit): void; editFilter(value: FilterEdit): void;
activeFilter?: MessageFilters;
} }
export interface AddMessageFilters extends MessageFilters { export interface AddMessageFilters extends MessageFilters {
@ -32,6 +33,7 @@ const AddFilter: React.FC<FilterModalProps> = ({
activeFilterHandler, activeFilterHandler,
toggleEditModal, toggleEditModal,
editFilter, editFilter,
activeFilter,
}) => { }) => {
const [savedFilterState, setSavedFilterState] = const [savedFilterState, setSavedFilterState] =
React.useState<boolean>(false); React.useState<boolean>(false);
@ -80,6 +82,7 @@ const AddFilter: React.FC<FilterModalProps> = ({
toggleEditModal(); toggleEditModal();
editFilter({ index, filter }); editFilter({ index, filter });
}} }}
activeFilter={activeFilter}
/> />
) : ( ) : (
<> <>

3
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/FilterModal.tsx
View file

@ -11,6 +11,7 @@ export interface FilterModalProps {
deleteFilter(index: number): void; deleteFilter(index: number): void;
activeFilterHandler(activeFilter: MessageFilters, index: number): void; activeFilterHandler(activeFilter: MessageFilters, index: number): void;
editSavedFilter(filter: FilterEdit): void; editSavedFilter(filter: FilterEdit): void;
activeFilter?: MessageFilters;
} }
export interface FilterEdit { export interface FilterEdit {
@ -25,6 +26,7 @@ const FilterModal: React.FC<FilterModalProps> = ({
deleteFilter, deleteFilter,
activeFilterHandler, activeFilterHandler,
editSavedFilter, editSavedFilter,
activeFilter,
}) => { }) => {
const [addFilterModal, setAddFilterModal] = React.useState<boolean>(true); const [addFilterModal, setAddFilterModal] = React.useState<boolean>(true);
const toggleEditModal = () => { const toggleEditModal = () => {
@ -49,6 +51,7 @@ const FilterModal: React.FC<FilterModalProps> = ({
activeFilterHandler={activeFilterHandler} activeFilterHandler={activeFilterHandler}
toggleEditModal={toggleEditModal} toggleEditModal={toggleEditModal}
editFilter={editFilterHandler} editFilter={editFilterHandler}
activeFilter={activeFilter}
/> />
) : ( ) : (
<EditFilter <EditFilter

1
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
View file

@ -498,6 +498,7 @@ const Filters: React.FC<FiltersProps> = ({
deleteFilter={deleteFilter} deleteFilter={deleteFilter}
activeFilterHandler={activeFilterHandler} activeFilterHandler={activeFilterHandler}
editSavedFilter={editSavedFilter} editSavedFilter={editSavedFilter}
activeFilter={activeFilter}
/> />
)} )}
<S.FiltersMetrics> <S.FiltersMetrics>

26
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx
View file

@ -13,6 +13,7 @@ export interface Props {
activeFilterHandler(activeFilter: MessageFilters, index: number): void; activeFilterHandler(activeFilter: MessageFilters, index: number): void;
closeModal(): void; closeModal(): void;
onGoBack(): void; onGoBack(): void;
activeFilter?: MessageFilters;
} }
const SavedFilters: FC<Props> = ({ const SavedFilters: FC<Props> = ({
@ -22,11 +23,12 @@ const SavedFilters: FC<Props> = ({
activeFilterHandler, activeFilterHandler,
closeModal, closeModal,
onGoBack, onGoBack,
activeFilter,
}) => { }) => {
const [selectedFilter, setSelectedFilter] = React.useState(-1); const [selectedFilter, setSelectedFilter] = React.useState(-1);
const confirm = useConfirm(); const confirm = useConfirm();
const activeFilter = () => { const activateFilter = () => {
if (selectedFilter > -1) { if (selectedFilter > -1) {
activeFilterHandler(filters[selectedFilter], selectedFilter); activeFilterHandler(filters[selectedFilter], selectedFilter);
} }
@ -34,9 +36,23 @@ const SavedFilters: FC<Props> = ({
}; };
const deleteFilterHandler = (index: number) => { const deleteFilterHandler = (index: number) => {
confirm(<>Are you sure want to remove {filters[index]?.name}?</>, () => { const filterName = filters[index]?.name;
deleteFilter(index); const isFilterSelected = activeFilter && activeFilter.name === filterName;
});
confirm(
<>
<p>Are you sure want to remove {filterName}?</p>
{isFilterSelected && (
<>
<br />
<p>Warning: this filter is currently selected.</p>
</>
)}
</>,
() => {
deleteFilter(index);
}
);
}; };
return ( return (
@ -78,7 +94,7 @@ const SavedFilters: FC<Props> = ({
buttonSize="M" buttonSize="M"
buttonType="primary" buttonType="primary"
type="button" type="button"
onClick={activeFilter} onClick={activateFilter}
> >
Select filter Select filter
</Button> </Button>