fix: multiple scheduling enhancements

- responsiveness - automation object saving - automation loading - initial cron value fix - textarea updates JIRA: F1-437 risk: low
gooddata · Jul 3, 2024 · 26961db · 26961db
1 parent 64057a3
commit 26961db
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 68 deletions.
diff --git a/libs/sdk-backend-tiger/src/backend/workspace/automations/automationsQuery.ts b/libs/sdk-backend-tiger/src/backend/workspace/automations/automationsQuery.ts
@@ -68,7 +68,13 @@ export class AutomationsQuery implements IAutomationsQuery {
                         ...metaIncludeObj,
                         ...filterObj,
                         ...this.sort,
-                        include: ["createdBy", "modifiedBy"],
+                        include: [
+                            "createdBy",
+                            "modifiedBy",
+                            "notificationChannel",
+                            "recipients",
+                            "exportDefinitions",
+                        ],
                         size: limit,
                         page: offset / limit,
                     }),
@@ -98,6 +104,6 @@ export class AutomationsQuery implements IAutomationsQuery {
             allFilters.push(`${this.type}=isnull=false`);
         }
 
-        return allFilters ? { filter: allFilters.join(";") } : {};
+        return allFilters.length > 0 ? { filter: allFilters.join(";") } : {};
     };
 }
diff --git a/libs/sdk-ui-dashboard/src/model/react/useWorkspaceAutomations.ts b/libs/sdk-ui-dashboard/src/model/react/useWorkspaceAutomations.ts
@@ -26,6 +26,13 @@ interface IUseWorkspaceAutomationsConfig
      * Workspace to work with.
      */
     workspace?: string;
+
+    /**
+     * Number of automations to get.
+     *
+     * Defaults to 100
+     */
+    limit?: number;
 }
 
 /**
@@ -43,6 +50,7 @@ export function useWorkspaceAutomations(
         onLoading,
         onPending,
         onSuccess,
+        limit = 100,
     }: IUseWorkspaceAutomationsConfig,
     dependencies?: any[],
 ): UseCancelablePromiseState<IAutomationMetadataObject[], any> {
@@ -52,7 +60,15 @@ export function useWorkspaceAutomations(
     return useCancelablePromise(
         {
             promise: enable
-                ? () => effectiveBackend.workspace(effectiveWorkspace).automations().getAutomations()
+                ? () =>
+                      effectiveBackend
+                          .workspace(effectiveWorkspace)
+                          .automations()
+                          .getAutomationsQuery()
+                          .withSize(limit)
+                          .withSorting(["title,asc"])
+                          .query()
+                          .then((result) => result.items)
                 : undefined,
             onCancel,
             onError,

diff --git a/libs/sdk-ui-dashboard/src/presentation/localization/bundles/en-US.json b/libs/sdk-ui-dashboard/src/presentation/localization/bundles/en-US.json
@@ -635,6 +635,11 @@
         "comment": "Title of a link to documentation",
         "limit": 0
     },
+    "dialogs.schedule.email.footer.title.short": {
+        "value": "Help",
+        "comment": "Title of a link to documentation",
+        "limit": 0
+    },
     "dialogs.schedule.email.save": {
         "value": "Save",
         "comment": "Translate as imperative. It's caption of a button for saving scheduled mail",

diff --git a/...c/presentation/scheduledEmail/DefaultScheduledEmailDialog/DefaultScheduledEmailDialog.tsx b/...c/presentation/scheduledEmail/DefaultScheduledEmailDialog/DefaultScheduledEmailDialog.tsx
@@ -39,6 +39,7 @@ import { isExportDefinitionDashboardContent } from "@gooddata/sdk-model";
 import { getTimezoneByIdentifier, TIMEZONE_DEFAULT } from "./utils/timezone.js";
 import { DASHBOARD_TITLE_MAX_LENGTH } from "../../constants/index.js";
 import parseISO from "date-fns/parseISO/index.js";
+import { isMobileView } from "./utils/responsive.js";
 
 const MAX_MESSAGE_LENGTH = 200;
 const MAX_SUBJECT_LENGTH = 200;
@@ -96,6 +97,10 @@ export function ScheduledMailDialogRenderer(props: IScheduledEmailDialogProps) {
         automation.schedule?.firstRun ?? normalizeTime(new Date(), undefined, 60).toISOString(),
     );
 
+    const helpTextId = isMobileView()
+        ? "dialogs.schedule.email.footer.title.short"
+        : "dialogs.schedule.email.footer.title";
+
     // trigger the invariant only if the user tries to open the dialog
     if (isVisible) {
         invariant(
@@ -129,7 +134,7 @@ export function ScheduledMailDialogRenderer(props: IScheduledEmailDialogProps) {
                 footerLeftRenderer={() => (
                     <div className="gd-schedule-email-dialog-footer-link">
                         <Hyperlink
-                            text={intl.formatMessage({ id: "dialogs.schedule.email.footer.title" })}
+                            text={intl.formatMessage({ id: helpTextId })}
                             href=""
                             iconClass="gd-icon-circle-question"
                         />

diff --git a/...board/src/presentation/scheduledEmail/DefaultScheduledEmailDialog/components/Textarea.tsx b/...board/src/presentation/scheduledEmail/DefaultScheduledEmailDialog/components/Textarea.tsx
@@ -1,8 +1,6 @@
 // (C) 2019-2024 GoodData Corporation
 import * as React from "react";
 import cx from "classnames";
-
-import { isMobileView } from "../utils/responsive.js";
 interface ITextareaOwnProps {
     className: string;
     hasError: boolean;
@@ -30,18 +28,11 @@ export class Textarea extends React.PureComponent<ITextareaProps, ITextareaState
 
     constructor(props: ITextareaProps) {
         super(props);
-        this.state = {
-            rows: isMobileView() ? 1 : props.rows,
-        };
     }
 
     public render() {
-        const { className, label, maxlength, placeholder, value } = this.props;
-        const { rows } = this.state;
-
-        const classNames = cx(`gd-input-component gd-textarea-component ${className}`, {
-            "gd-textarea-component-collapsed": rows === 1,
-        });
+        const { className, label, maxlength, placeholder, value, rows } = this.props;
+        const classNames = cx(`gd-input-component gd-textarea-component ${className}`);
 
         return (
             <div className={classNames}>
@@ -53,11 +44,8 @@ export class Textarea extends React.PureComponent<ITextareaProps, ITextareaState
                         placeholder={placeholder}
                         value={value}
                         rows={rows}
-                        onBlur={this.onBlur}
                         onChange={this.onChange}
-                        onFocus={this.onFocus}
                     />
-                    {rows === 1 ? this.renderCollapseIndicator() : null}
                 </label>
             </div>
         );
@@ -71,23 +59,7 @@ export class Textarea extends React.PureComponent<ITextareaProps, ITextareaState
         });
     };
 
-    private onBlur = (_e: React.FocusEvent<HTMLTextAreaElement>): void => {
-        if (isMobileView()) {
-            this.setState({ rows: 1 });
-        }
-    };
-
     private onChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
         this.props.onChange(e.target.value);
     };
-
-    private onFocus = (_e: React.FocusEvent<HTMLTextAreaElement>): void => {
-        if (isMobileView()) {
-            this.setState({ rows: this.props.rows });
-        }
-    };
-
-    private renderCollapseIndicator = (): React.ReactNode => {
-        return <span className="gd-input-component-indicator">&#8943;</span>;
-    };
 }
diff --git a/...rc/presentation/scheduledEmail/DefaultScheduledEmailDialog/hooks/useEditScheduledEmail.ts b/...rc/presentation/scheduledEmail/DefaultScheduledEmailDialog/hooks/useEditScheduledEmail.ts
@@ -156,7 +156,7 @@ function newAutomationMetadataObjectDefinition({
 }): IAutomationMetadataObjectDefinition {
     const firstRun = parseISO(new Date().toISOString());
     const normalizedFirstRun = normalizeTime(firstRun, undefined, 60);
-    const cron = getDefaultCronExpression(firstRun);
+    const cron = getDefaultCronExpression(normalizedFirstRun);
 
     const automation: IAutomationMetadataObjectDefinition = {
         type: "automation",

diff --git a/...tation/scheduledEmail/DefaultScheduledEmailDialog/hooks/useSaveScheduledEmailToBackend.ts b/...tation/scheduledEmail/DefaultScheduledEmailDialog/hooks/useSaveScheduledEmailToBackend.ts
@@ -1,10 +1,16 @@
 // (C) 2019-2024 GoodData Corporation
 import { useCallback } from "react";
-import { ObjRef, IAutomationMetadataObject, IAutomationMetadataObjectDefinition } from "@gooddata/sdk-model";
+import {
+    ObjRef,
+    IAutomationMetadataObject,
+    IAutomationMetadataObjectDefinition,
+    IAutomationSchedule,
+} from "@gooddata/sdk-model";
 import { useCreateScheduledEmail } from "./useCreateScheduledEmail.js";
 import { useUpdateScheduledEmail } from "./useUpdateScheduledEmail.js";
 import { IScheduledEmailDialogProps } from "../../types.js";
 import { IntlShape, useIntl } from "react-intl";
+import omit from "lodash/omit.js";
 
 export function useSaveScheduledEmailToBackend(
     automation: IAutomationMetadataObject | IAutomationMetadataObjectDefinition,
@@ -40,10 +46,10 @@ export function useSaveScheduledEmailToBackend(
     );
 
     const handleSaveScheduledEmail = (): void => {
-        if (automation.id) {
-            handleUpdateScheduledEmail(automation);
+        const sanitizedAutomation = sanitizeAutomation(automation, intl);
+        if (sanitizedAutomation.id) {
+            handleUpdateScheduledEmail(sanitizedAutomation);
         } else {
-            const sanitizedAutomation = sanitizeAutomation(automation, intl);
             handleCreateScheduledEmail(sanitizedAutomation);
         }
     };
@@ -62,5 +68,12 @@ function sanitizeAutomation(
     if (!automation.title) {
         automation.title = intl.formatMessage({ id: "dialogs.schedule.email.title.placeholder" });
     }
+
+    // We want to omit the cronDescription as it a variable created on backend that cannot
+    // be overriden and BE has hard time handling it with each PUT
+    if (automation.schedule) {
+        automation.schedule = omit(automation.schedule, ["cronDescription"]) as IAutomationSchedule;
+    }
+
     return automation;
 }
diff --git a/...uledEmail/DefaultScheduledEmailManagementDialog/DefaultScheduledEmailManagementDialog.tsx b/...uledEmail/DefaultScheduledEmailManagementDialog/DefaultScheduledEmailManagementDialog.tsx
@@ -15,6 +15,7 @@ import {
     useDashboardSelector,
 } from "../../../model/index.js";
 import { messages } from "../../../locales.js";
+import { isMobileView } from "../DefaultScheduledEmailDialog/utils/responsive.js";
 
 /**
  * @alpha
@@ -56,6 +57,10 @@ export const ScheduledEmailManagementDialog: React.FC<IScheduledEmailManagementD
 
     const maxAutomationsReached = automations.length >= maxAutomations;
 
+    const helpTextId = isMobileView()
+        ? "dialogs.schedule.email.footer.title.short"
+        : "dialogs.schedule.email.footer.title";
+
     return (
         <>
             <Dialog
@@ -97,7 +102,7 @@ export const ScheduledEmailManagementDialog: React.FC<IScheduledEmailManagementD
                 <div className="gd-content-divider"></div>
                 <div className="gd-buttons">
                     <Hyperlink
-                        text={intl.formatMessage({ id: "dialogs.schedule.email.footer.title" })}
+                        text={intl.formatMessage({ id: helpTextId })}
                         href=""
                         iconClass="gd-icon-circle-question"
                     />

diff --git a/...n/scheduledEmail/DefaultScheduledEmailManagementDialog/components/ScheduledEmailsList.tsx b/...n/scheduledEmail/DefaultScheduledEmailManagementDialog/components/ScheduledEmailsList.tsx
@@ -23,7 +23,7 @@ export const ScheduledEmails: React.FC<IScheduledEmailsProps> = (props) => {
 
     if (isLoading) {
         return (
-            <div className="gd-loading-equalizer-wrap">
+            <div className="gd-loading-equalizer-wrap gd-scheduled-emails-message">
                 <div className="gd-loading-equalizer gd-loading-equalizer-fade">
                     <LoadingSpinner
                         className="large gd-loading-equalizer-spinner"

diff --git a/libs/sdk-ui-dashboard/styles/scss/scheduled_mail.scss b/libs/sdk-ui-dashboard/styles/scss/scheduled_mail.scss
@@ -8,6 +8,7 @@ $horizontal-space: 10px;
 $vertical-space: 20px;
 $input-height: 28px;
 $dialog-padding: 20px;
+$min-content-height: 110px;
 
 @mixin input-styles {
     color: button-variables.$button-normal-color;
@@ -96,27 +97,12 @@ $dialog-padding: 20px;
     }
 
     .gd-input-field {
-        resize: vertical;
+        resize: none;
         min-height: 30px;
-
-        @media #{kit-variables.$small-only} {
-            resize: none;
-        }
-    }
-
-    .gd-input-component-indicator {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        color: kit-variables.$gd-color-text;
-        font-size: 14px;
-        font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
-    }
-}
-
-.gd-textarea-component-collapsed {
-    .gd-input-field {
-        overflow: hidden;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 15px;
     }
 }
 
@@ -364,7 +350,7 @@ $dialog-padding: 20px;
 .gd-scheduled-email-management-dialog {
     display: flex;
     flex-direction: column;
-    width: 460px;
+    width: 540px;
 
     @media #{kit-variables.$small-only} {
         width: calc(100vw - 20px);
@@ -386,19 +372,17 @@ $dialog-padding: 20px;
     }
 
     .gd-scheduled-emails-content {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
         overflow-x: hidden;
         width: calc(100% + 20px);
         margin: 0 -20px 0 0;
-        padding: 10px 20px 20px 0;
+        padding: 10px 20px 10px 0;
         min-height: 143px;
-        max-height: 455px;
+        max-height: 475px;
         overflow-y: auto;
 
         @media #{kit-variables.$small-only} {
             max-height: none;
+            height: 100%;
         }
     }
 
@@ -434,10 +418,11 @@ $dialog-padding: 20px;
     }
 
     .gd-scheduled-emails-message {
+        height: 100%;
+        min-height: $min-content-height;
         display: flex;
         justify-content: center;
         align-items: center;
-        flex: 1;
         padding-top: 10px;
         text-align: center;
         color: kit-variables.$gd-color-state-blank;
@@ -569,6 +554,10 @@ $dialog-padding: 20px;
         button {
             margin: 5px;
         }
+
+        .gd-hyperlink:hover {
+            text-decoration: none;
+        }
     }
 
     .gd-add-button {
@@ -881,6 +870,10 @@ $dialog-padding: 20px;
         color: kit-variables.$gd-palette-primary-base;
         text-decoration: none;
     }
+
+    @media #{kit-variables.$small-only} {
+        display: block;
+    }
 }
 
 .gd-schedule-email-dialog-destination {
@@ -946,4 +939,8 @@ $dialog-padding: 20px;
     display: inline-flex;
     flex: 1;
     justify-content: flex-start;
+
+    .gd-hyperlink:hover {
+        text-decoration: none;
+    }
 }