diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
index 7537468bae9f4..89338fb427fe4 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
@@ -37,6 +37,7 @@ interface PropertyFiltersProps {
errorMessages?: JSX.Element[] | null
propertyAllowList?: { [key in TaxonomicFilterGroupType]?: string[] }
allowRelativeDateOptions?: boolean
+ disabled?: boolean
}
export function PropertyFilters({
@@ -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))
@@ -128,6 +130,7 @@ export function PropertyFilters({
)}
errorMessage={errorMessages && errorMessages[index]}
openOnInsert={allowOpenOnInsert && openOnInsert}
+ disabled={disabled}
/>
)
diff --git a/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx b/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx
index 31236eaa73227..7918651702925 100644
--- a/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx
@@ -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({
@@ -42,6 +43,7 @@ export const FilterRow = React.memo(function FilterRow({
onRemove,
orFiltering,
errorMessage,
+ disabled,
}: FilterRowProps) {
const [open, setOpen] = useState(false)
@@ -92,8 +94,9 @@ export const FilterRow = React.memo(function FilterRow({
onClick={() => setOpen(!open)}
onClose={() => onRemove(index)}
item={item}
+ disabled={disabled}
/>
- ) : (
+ ) : !disabled ? (
setOpen(!open)}
className="new-prop-filter"
@@ -105,7 +108,7 @@ export const FilterRow = React.memo(function FilterRow({
>
{label}
- )}
+ ) : undefined}
)}
{key && showConditionBadge && index + 1 < totalCount && }
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
index c89f39145e278..3005e2e95c96f 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
@@ -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);
}
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
index 78ed0f11b8c9f..8032f0318736d 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
@@ -19,10 +19,11 @@ export interface PropertyFilterButtonProps {
onClose?: () => void
children?: string
item: AnyPropertyFilter
+ disabled?: boolean
}
export const PropertyFilterButton = React.forwardRef(
- 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)
@@ -37,18 +38,19 @@ export const PropertyFilterButton = React.forwardRef
{midEllipsis(label, 32)}
- {closable && (
+ {closable && !disabled && (
}
diff --git a/frontend/src/scenes/dashboard/DashboardEditBar.tsx b/frontend/src/scenes/dashboard/DashboardEditBar.tsx
index 0b9bbb52197a4..6f79e9b3c1956 100644
--- a/frontend/src/scenes/dashboard/DashboardEditBar.tsx
+++ b/frontend/src/scenes/dashboard/DashboardEditBar.tsx
@@ -56,45 +56,46 @@ export function DashboardEditBar({
return (
+
setTempDates({ dateFrom, dateTo })}
+ disabled={!canEditDashboard || !editMode}
+ makeLabel={(key) => (
+ <>
+
+ {key}
+ >
+ )}
+ />
+
{!editMode ? (
setEditMode(true)}>
Edit filters
) : (
<>
+
+ Cancel
+
Apply and save dashboard
-
- Cancel
-
- setTempDates({ dateFrom, dateTo })}
- disabled={!canEditDashboard}
- makeLabel={(key) => (
- <>
-
- {key}
- >
- )}
- />
-
>
)}