Merge pull request #5732 from gooddata/mkn-f1-990

fix: show notification panel on mobile

libs/sdk-backend-tiger/src/backend/workspace/automations/index.ts

@@ -29,6 +29,7 @@ export class TigerWorkspaceAutomationService implements IWorkspaceAutomationServ
                     "notificationChannel",
                     "recipients",
                     "exportDefinitions",
+                    "analyticalDashboard",
                     ...(loadUserData ? (["createdBy", "modifiedBy"] as const) : []),
                 ],
                 origin: "NATIVE", // ensures that no inherited automations are returned
@@ -60,6 +61,7 @@ export class TigerWorkspaceAutomationService implements IWorkspaceAutomationServ
                     "notificationChannel",
                     "recipients",
                     "exportDefinitions",
+                    "analyticalDashboard",
                     ...(loadUserData ? (["createdBy", "modifiedBy"] as const) : []),
                 ],
             });

libs/sdk-ui-dashboard/src/model/commandHandlers/scheduledEmail/initializeAutomationsHandler.ts

@@ -27,15 +27,17 @@ import {
 } from "../../store/automations/automationsSelectors.js";
 import { selectCanManageWorkspace } from "../../store/permissions/permissionsSelectors.js";
 import {
+    filterLocalIdentifier,
     filterObjRef,
-    IAttributeFilter,
-    IDateFilter,
-    isDateFilter,
-    isRelativeDateFilter,
+    idRef,
+    IFilter,
+    IInsight,
+    insightFilters,
 } from "@gooddata/sdk-model";
 import { changeFilterContextSelectionHandler } from "../filterContext/changeFilterContextSelectionHandler.js";
 import { changeFilterContextSelection } from "../../commands/filters.js";
-import omit from "lodash/omit.js";
+import { IDashboardFilter, isDashboardFilter } from "../../../types.js";
+import { selectInsightByWidgetRef } from "../../store/insights/insightsSelectors.js";
 
 export function* initializeAutomationsHandler(
     ctx: DashboardContext,
@@ -90,24 +92,16 @@ export function* initializeAutomationsHandler(
         if (automationId) {
             const targetAutomation = automations.find((a) => a.id === automationId);
             const targetWidget = targetAutomation?.metadata?.widget;
-            const targetFilters = targetAutomation?.alert?.execution?.filters;
-            const filtersWithObjRef = targetFilters
-                ?.filter((f) => {
-                    const objRef = filterObjRef(f);
-                    return !!objRef;
-                })
-                .map((f) => {
-                    if (isDateFilter(f)) {
-                        if (isRelativeDateFilter(f)) {
-                            return omit(f, "relativeDateFilter.dataSet");
-                        }
-                        return omit(f, "absoluteDateFilter.dataSet");
-                    }
-                    return f;
-                }) as (IAttributeFilter | IDateFilter)[];
+            const targetFilters = targetAutomation?.alert?.execution?.filters.filter(isDashboardFilter);
+            if (targetWidget && targetFilters) {
+                const insight: ReturnType<ReturnType<typeof selectInsightByWidgetRef>> = yield select(
+                    selectInsightByWidgetRef(idRef(targetWidget)),
+                );
+                const filtersToSet = insight
+                    ? getDashboardFiltersOnly(targetFilters, insight)
+                    : targetFilters;
 
-            if (targetWidget && filtersWithObjRef?.length) {
-                const cmd = changeFilterContextSelection(filtersWithObjRef, true, automationId);
+                const cmd = changeFilterContextSelection(filtersToSet, true, automationId);
                 yield call(changeFilterContextSelectionHandler, ctx, cmd);
             }
         }
@@ -132,3 +126,28 @@ export function* initializeAutomationsHandler(
         );
     }
 }
+
+/**
+ * Filter out insight filters from the list of filters
+ * @internal
+ */
+function getDashboardFiltersOnly(filters: IFilter[], insight: IInsight) {
+    return removeAlertFilters(filters).filter((f) => {
+        const insightFilter = insightFilters(insight).find((f2) => {
+            return filterLocalIdentifier(f) === filterLocalIdentifier(f2);
+        });
+
+        return !insightFilter;
+    }) as IDashboardFilter[];
+}
+
+/**
+ * Remove alert filters (these that are set during creation of the alert sliced by attribute) from the list of filters
+ * @internal
+ */
+function removeAlertFilters(filters: IFilter[]) {
+    return filters?.filter((f) => {
+        const objRef = filterObjRef(f);
+        return !!objRef;
+    });
+}

libs/sdk-ui-ext/api/sdk-ui-ext.api.md

@@ -537,6 +537,7 @@ export interface INotificationsPanelProps extends INotificationsPanelCustomCompo
     locale?: ILocale;
     onNotificationClick: (notification: INotification) => void;
     refreshInterval?: number;
+    renderInline?: boolean;
     workspace?: string;
 }
 

libs/sdk-ui-ext/src/internal/translations/en-US.json

@@ -2054,7 +2054,7 @@
         "limit": 0
     },
     "notifications.filters.buttonLabel": {
-        "value": "{count} filters",
+        "value": "Show filters",
         "comment": "",
         "limit": 0
     },

libs/sdk-ui-ext/src/notificationsPanel/Notification/AlertNotification.tsx

@@ -4,7 +4,7 @@ import { IAlertDescription, IAlertNotification, INotification } from "@gooddata/
 import { getDateTimeConfig, IDateConfig, UiIcon } from "@gooddata/sdk-ui-kit";
 import { bem } from "../bem.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { NotificationFiltersDetail } from "../NotificationFiltersDetail/NotificationFiltersDetail.js";
+// import { NotificationFiltersDetail } from "../NotificationFiltersDetail/NotificationFiltersDetail.js";
 import { NotificationTriggerDetail } from "../NotificationTriggersDetail/NotificationTriggersDetail.js";
 import { defineMessages, FormattedDate, FormattedMessage, FormattedTime, useIntl } from "react-intl";
 
@@ -34,13 +34,24 @@ export function AlertNotification({
         markAsRead(notification.id);
     };
 
-    const clickNotification = useCallback(() => {
-        onNotificationClick(notification);
-    }, [onNotificationClick, notification]);
+    const clickNotification = useCallback(
+        (event: React.MouseEvent<HTMLDivElement>) => {
+            const target = event.target;
+            const targetIsElement = target instanceof Element;
+            const isNotificationsDetailsLink =
+                targetIsElement && target.closest(`[data-id="notification-detail"]`);
+            if (isNotificationsDetailsLink) {
+                return;
+            }
+            onNotificationClick(notification);
+        },
+        [onNotificationClick, notification],
+    );
 
-    const filterCount = notification.details.data.alert.filterCount;
-    const isSliced = notification.details.data.alert.attribute;
-    const showSeparator = filterCount && filterCount > 0 && isSliced;
+    // Hide filters for now, as there is lot of unresolved cases to consider
+    // const filterCount = notification.details.data.alert.filterCount;
+    // const isSliced = notification.details.data.alert.attribute;
+    // const showSeparator = filterCount && filterCount > 0 && isSliced;
     const notificationTitle = getNotificationTitle(notification);
 
     return (
@@ -54,8 +65,8 @@ export function AlertNotification({
                     {notificationTitle}
                 </div>
                 <div className={e("links")}>
-                    <NotificationFiltersDetail notification={notification} />
-                    {showSeparator ? "・" : null}
+                    {/* <NotificationFiltersDetail notification={notification} />
+                    {showSeparator ? "・" : null} */}
                     <NotificationTriggerDetail notification={notification} />
                 </div>
             </div>

libs/sdk-ui-ext/src/notificationsPanel/NotificationFiltersDetail/NotificationFiltersDetail.tsx

@@ -49,7 +49,7 @@ export function NotificationFiltersDetail({ notification }: INotificationFilters
                     onClick={onButtonClick}
                     variant="tertiary"
                     size="small"
-                    label={intl.formatMessage(messages.buttonLabel, { count: filterCount })}
+                    label={intl.formatMessage(messages.buttonLabel)}
                 />
             ) : null}
             {isFiltersDialogOpen ? (

libs/sdk-ui-ext/src/notificationsPanel/NotificationTriggersDetail/NotificationTriggersDetail.tsx

@@ -11,6 +11,11 @@ const ALIGN_POINTS = [
         overlayAlignPoint: "top-right",
         offset: { x: 2, y: 3 },
     }),
+    alignConfigToAlignPoint({
+        triggerAlignPoint: "bottom-left",
+        overlayAlignPoint: "top-left",
+        offset: { x: 2, y: 3 },
+    }),
 ];
 
 const messages = defineMessages({
@@ -39,13 +44,13 @@ export function NotificationTriggerDetail({ notification }: INotificationTrigger
         <>
             <UiButton
                 buttonRef={ref}
-                onClick={(e) => {
-                    e.stopPropagation();
+                onClick={() => {
                     toggleTriggersDialog();
                 }}
                 variant="tertiary"
                 size="small"
                 label={triggersTitle}
+                dataId="notification-detail"
             />
             {isTriggersDialogOpen ? (
                 <Overlay
@@ -57,7 +62,6 @@ export function NotificationTriggerDetail({ notification }: INotificationTrigger
                     closeOnParentScroll={false}
                     closeOnMouseDrag={false}
                     onClose={closeTriggersDialog}
-                    ignoreClicksOnByClass={[".gd-bubble"]}
                 >
                     <NotificationTriggersDetailDialog
                         notification={notification}

libs/sdk-ui-ext/src/notificationsPanel/NotificationsList/DefaultNotificationsList.scss

@@ -4,4 +4,7 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    min-height: 0;
+    max-height: 100%;
+    height: 100%;
 }

libs/sdk-ui-ext/src/notificationsPanel/NotificationsList/DefaultNotificationsList.tsx

@@ -1,5 +1,5 @@
 // (C) 2024 GoodData Corporation
-import React from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { GoodDataSdkError, UseCancelablePromiseStatus } from "@gooddata/sdk-ui";
 import { INotificationComponentProps } from "../Notification/DefaultNotification.js";
 import { bem } from "../bem.js";
@@ -55,8 +55,31 @@ export function DefaultNotificationsList({
     const isLoading = status === "loading" || status === "pending";
     const isSuccess = status === "success" && (notifications?.length ?? 0) > 0;
 
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [availableHeight, setAvailableHeight] = useState<number>(0);
+
+    useLayoutEffect(() => {
+        const resizeObserver = new ResizeObserver((entries) => {
+            const [entry] = entries;
+            if (entry) {
+                setAvailableHeight(entry.contentRect.height);
+            }
+        });
+
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                setAvailableHeight(0);
+            }
+        };
+    }, []);
+
     return (
-        <div className={b()}>
+        <div className={b()} ref={containerRef}>
             {isError ? <DefaultNotificationsListErrorState error={error} /> : null}
             {isEmpty ? <DefaultNotificationsListEmptyState activeView={activeView} /> : null}
             {isLoading || isSuccess ? (
@@ -69,6 +92,7 @@ export function DefaultNotificationsList({
                     hasNextPage={hasNextPage}
                     loadNextPage={loadNextPage}
                     isLoading={isLoading}
+                    maxHeight={Math.max(527, availableHeight)}
                 >
                     {(notification) => (
                         <div className={e("notification")}>

libs/sdk-ui-ext/src/notificationsPanel/NotificationsPanel/DefaultNotificationsPanel.scss

@@ -9,10 +9,15 @@
     display: flex;
     flex-direction: column;
 
-    padding-top: 15px;
+    padding-top: 10px;
 
-    width: 370px;
-    max-height: 560px;
+    width: 100%;
+    height: 100%;
 
     overflow: hidden;
 }
+
+.gd-ui-ext-notifications-panel-overlay {
+    width: 370px;
+    max-height: 560px;
+}

libs/sdk-ui-ext/src/notificationsPanel/NotificationsPanel/DefaultNotificationsPanelHeader.scss

@@ -12,7 +12,7 @@
 
     &__tabs {
         width: 100%;
-        height: 28px;
+        height: 23px;
 
         display: flex;
         flex-direction: column;
@@ -21,7 +21,10 @@
     }
 
     &__mark-all-as-read-button {
-        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 23px;
         white-space: nowrap;
         border-bottom: 1px solid var(--gd-palette-complementary-3);
     }