From a1f4a1dc90d6a4396770fe1f5c175cbf9db77074 Mon Sep 17 00:00:00 2001
From: Julian Bez <julian@posthog.com>
Date: Thu, 25 Apr 2024 13:59:17 +0200
Subject: [PATCH] Disable and do not hide filters

---
 .../PropertyFilters/PropertyFilters.tsx       |  3 +
 .../PropertyFilters/components/FilterRow.tsx  |  7 ++-
 .../components/PropertyFilterButton.scss      |  7 ++-
 .../components/PropertyFilterButton.tsx       |  8 ++-
 .../src/scenes/dashboard/DashboardEditBar.tsx | 61 ++++++++++---------
 5 files changed, 50 insertions(+), 36 deletions(-)

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}
                                 />
                             </React.Fragment>
                         )
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 ? (
                             <LemonButton
                                 onClick={() => setOpen(!open)}
                                 className="new-prop-filter"
@@ -105,7 +108,7 @@ export const FilterRow = React.memo(function FilterRow({
                             >
                                 {label}
                             </LemonButton>
-                        )}
+                        ) : undefined}
                     </Popover>
                 )}
                 {key && showConditionBadge && index + 1 < totalCount && <OperandTag operand="and" />}
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<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)
 
@@ -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 />}
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 (
         <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>