Skip to content

Commit

Permalink
Disable and do not hide filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@webjunkie
webjunkie committed Apr 25, 2024
1 parent 473e4e0 commit a1f4a1d
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 36 deletions.
3 changes: 3 additions & 0 deletions frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ interface PropertyFiltersProps {
errorMessages?: JSX.Element[] | null
propertyAllowList?: { [key in TaxonomicFilterGroupType]?: string[] }
allowRelativeDateOptions?: boolean
disabled?: boolean
}

export function PropertyFilters({
Expand All @@ -63,6 +64,7 @@ export function PropertyFilters({
errorMessages = null,
propertyAllowList,
allowRelativeDateOptions,
disabled = false,
}: PropertyFiltersProps): JSX.Element {
const logicProps = { propertyFilters, onChange, pageKey, sendAllKeyUpdates }
const { filters, filtersWithNew } = useValues(propertyFilterLogic(logicProps))
Expand Down Expand Up @@ -128,6 +130,7 @@ export function PropertyFilters({
)}
errorMessage={errorMessages && errorMessages[index]}
openOnInsert={allowOpenOnInsert && openOnInsert}
disabled={disabled}
/>
</React.Fragment>
)
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ interface FilterRowProps {
onRemove: (index: number) => void
orFiltering?: boolean
errorMessage?: JSX.Element | null
disabled?: boolean
}

export const FilterRow = React.memo(function FilterRow({
Expand All @@ -42,6 +43,7 @@ export const FilterRow = React.memo(function FilterRow({
onRemove,
orFiltering,
errorMessage,
disabled,
}: FilterRowProps) {
const [open, setOpen] = useState(false)

Expand Down Expand Up @@ -92,8 +94,9 @@ export const FilterRow = React.memo(function FilterRow({
onClick={() => setOpen(!open)}
onClose={() => onRemove(index)}
item={item}
disabled={disabled}
/>
) : (
) : !disabled ? (
<LemonButton
onClick={() => setOpen(!open)}
className="new-prop-filter"
Expand All @@ -105,7 +108,7 @@ export const FilterRow = React.memo(function FilterRow({
>
{label}
</LemonButton>
)}
) : undefined}
</Popover>
)}
{key && showConditionBadge && index + 1 < totalCount && <OperandTag operand="and" />}
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,12 @@
outline: 0;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

&:hover,
&[aria-disabled='true']:not(.LemonButton--loading) {
cursor: not-allowed;
opacity: var(--opacity-disabled);
}

&:hover:not([aria-disabled='true']),
&:focus {
border-color: var(--border-bold);
}
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ export interface PropertyFilterButtonProps {
onClose?: () => void
children?: string
item: AnyPropertyFilter
disabled?: boolean
}

export const PropertyFilterButton = React.forwardRef<HTMLElement, PropertyFilterButtonProps>(
function PropertyFilterButton({ onClick, onClose, children, item }, ref): JSX.Element {
function PropertyFilterButton({ onClick, onClose, children, item, disabled }, ref): JSX.Element {
const { cohortsById } = useValues(cohortsModel)
const { formatPropertyValueForDisplay } = useValues(propertyDefinitionsModel)

Expand All @@ -37,18 +38,19 @@ export const PropertyFilterButton = React.forwardRef<HTMLElement, PropertyFilter
return (
<ButtonComponent
ref={ref as any}
onClick={onClick}
onClick={disabled ? undefined : onClick}
className={clsx('PropertyFilterButton', {
'PropertyFilterButton--closeable': closable,
'PropertyFilterButton--clickable': clickable,
'ph-no-capture': true,
})}
aria-disabled={disabled}
>
<PropertyFilterIcon type={item.type} />
<span className="PropertyFilterButton-content" title={label}>
{midEllipsis(label, 32)}
</span>
{closable && (
{closable && !disabled && (
<LemonButton
size="xsmall"
icon={<IconX />}
Expand Down
61 changes: 31 additions & 30 deletions frontend/src/scenes/dashboard/DashboardEditBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,45 +56,46 @@ export function DashboardEditBar({

return (
<div className="flex gap-2 items-center justify-between flex-wrap">
<DateFilter
showCustom
dateFrom={tempDates.dateFrom}
dateTo={tempDates.dateTo}
onChange={(dateFrom, dateTo) => setTempDates({ dateFrom, dateTo })}
disabled={!canEditDashboard || !editMode}
makeLabel={(key) => (
<>
<IconCalendar />
<span className="hide-when-small"> {key}</span>
</>
)}
/>
<PropertyFilters
disabled={!editMode}
onChange={setTempProperties}
pageKey={'dashboard_' + dashboard?.id}
propertyFilters={tempProperties}
taxonomicGroupTypes={[
TaxonomicFilterGroupType.EventProperties,
TaxonomicFilterGroupType.PersonProperties,
TaxonomicFilterGroupType.EventFeatureFlags,
...groupsTaxonomicTypes,
TaxonomicFilterGroupType.Cohorts,
TaxonomicFilterGroupType.Elements,
TaxonomicFilterGroupType.HogQLExpression,
]}
/>
{!editMode ? (
<LemonButton type="secondary" size="small" onClick={() => setEditMode(true)}>
Edit filters
</LemonButton>
) : (
<>
<LemonButton onClick={handleCancel} type="secondary" size="small" className="ml-4">
Cancel
</LemonButton>
<LemonButton onClick={handleSave} type="primary" size="small">
Apply and save dashboard
</LemonButton>
<LemonButton onClick={handleCancel} type="secondary" size="small" className="mr-4">
Cancel
</LemonButton>
<DateFilter
showCustom
dateFrom={tempDates.dateFrom}
dateTo={tempDates.dateTo}
onChange={(dateFrom, dateTo) => setTempDates({ dateFrom, dateTo })}
disabled={!canEditDashboard}
makeLabel={(key) => (
<>
<IconCalendar />
<span className="hide-when-small"> {key}</span>
</>
)}
/>
<PropertyFilters
onChange={setTempProperties}
pageKey={'dashboard_' + dashboard?.id}
propertyFilters={tempProperties}
taxonomicGroupTypes={[
TaxonomicFilterGroupType.EventProperties,
TaxonomicFilterGroupType.PersonProperties,
TaxonomicFilterGroupType.EventFeatureFlags,
...groupsTaxonomicTypes,
TaxonomicFilterGroupType.Cohorts,
TaxonomicFilterGroupType.Elements,
TaxonomicFilterGroupType.HogQLExpression,
]}
/>
</>
)}
</div>
Expand Down

0 comments on commit a1f4a1d

Please sign in to comment.