mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-22 01:16:07 +02:00
fix: favorites column visibility (#2605)
Co-authored-by: sjaanus <sellinjaanus@gmail.com>
This commit is contained in:
parent
aa20d2d418
commit
3ee2e5ae9b
@ -1,4 +1,4 @@
|
|||||||
import { VFC } from 'react';
|
import { useState, VFC } from 'react';
|
||||||
import { IconButton, Tooltip } from '@mui/material';
|
import { IconButton, Tooltip } from '@mui/material';
|
||||||
import {
|
import {
|
||||||
Star as StarIcon,
|
Star as StarIcon,
|
||||||
@ -8,17 +8,23 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
|
|||||||
|
|
||||||
interface IFavoriteIconHeaderProps {
|
interface IFavoriteIconHeaderProps {
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
onClick: () => void;
|
onClick: (isPinned: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
|
export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
|
||||||
isActive = false,
|
isActive = false,
|
||||||
onClick,
|
onClick,
|
||||||
}) => {
|
}) => {
|
||||||
|
const [internalState, setInternalState] = useState(isActive);
|
||||||
|
const onToggle = () => {
|
||||||
|
setInternalState(!internalState);
|
||||||
|
onClick(!internalState);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
title={
|
title={
|
||||||
isActive
|
internalState
|
||||||
? 'Unpin favorite features from the top'
|
? 'Unpin favorite features from the top'
|
||||||
: 'Pin favorite features to the top'
|
: 'Pin favorite features to the top'
|
||||||
}
|
}
|
||||||
@ -31,11 +37,11 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
}}
|
}}
|
||||||
onClick={onClick}
|
onClick={onToggle}
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={isActive}
|
condition={internalState}
|
||||||
show={<StarIcon fontSize="small" />}
|
show={<StarIcon fontSize="small" />}
|
||||||
elseShow={<StarBorderIcon fontSize="small" />}
|
elseShow={<StarBorderIcon fontSize="small" />}
|
||||||
/>
|
/>
|
||||||
|
@ -302,14 +302,7 @@ export const ProjectFeatureToggles = ({
|
|||||||
disableSortBy: true,
|
disableSortBy: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[projectId, environments, loading, onToggle, uiConfig?.flags?.favorites]
|
||||||
projectId,
|
|
||||||
environments,
|
|
||||||
loading,
|
|
||||||
onToggle,
|
|
||||||
isFavoritesPinned,
|
|
||||||
uiConfig?.flags?.favorites,
|
|
||||||
]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const [searchValue, setSearchValue] = useState(
|
const [searchValue, setSearchValue] = useState(
|
||||||
|
@ -36,13 +36,13 @@ export const usePinnedFavorites = (initialState = false) => {
|
|||||||
const [isFavoritesPinned, setIsFavoritesPinned] = useState(initialState);
|
const [isFavoritesPinned, setIsFavoritesPinned] = useState(initialState);
|
||||||
const { trackEvent } = usePlausibleTracker();
|
const { trackEvent } = usePlausibleTracker();
|
||||||
|
|
||||||
const onChangeIsFavoritePinned = () => {
|
const onChangeIsFavoritePinned = (newState: boolean) => {
|
||||||
trackEvent('favorite', {
|
trackEvent('favorite', {
|
||||||
props: {
|
props: {
|
||||||
eventType: `features ${isFavoritesPinned ? 'un' : ''}pinned `,
|
eventType: `features ${!newState ? 'un' : ''}pinned `,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
setIsFavoritesPinned(!isFavoritesPinned);
|
setIsFavoritesPinned(newState);
|
||||||
};
|
};
|
||||||
|
|
||||||
const enhancedSortTypes = useMemo(() => {
|
const enhancedSortTypes = useMemo(() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user