Release v1.9.4 (#1061)

* fix(ui): address issues on Drag'n'Drop functionality of dashboard widgets

cr: https://code.amazon.com/reviews/CR-160389187

* fix(ui): address issues on image widget edition

cr: https://code.amazon.com/reviews/CR-160389187

* chore: prepare v1.9.4

* chore: bumps cross-spawn npm package

* chore: bumps cross-spawn npm package

* chore: adding a missing change to the code base

CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.4] - 2024-11-22
+
+### Fixed
+
+- address issues on Drag'n'Drop functionality of dashboard widgets.
+- address issues on image widget edition.
+
+
 ## [1.9.3] - 2024-10-30
 
 ### Added

NOTICE.txt

@@ -129,7 +129,7 @@ [email protected] under the MIT
 [email protected] under the MIT
 [email protected] under the MIT
 [email protected] under the MIT
-[email protected].3 under the Apache-2.0
+[email protected].4 under the Apache-2.0
 [email protected] under the MIT
 [email protected] under the MIT
 [email protected] under the MIT

backend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "performance-dashboard-backend",
-    "version": "1.9.2",
+    "version": "1.9.4",
     "description": "Performance Dashboard on AWS Backend",
     "license": "Apache-2.0",
     "author": {

cdk/package.json

@@ -1,6 +1,6 @@
 {
     "name": "performance-dashboard-cdk",
-    "version": "1.9.2",
+    "version": "1.9.4",
     "description": "Performance Dashboard on AWS CDK",
     "license": "Apache-2.0",
     "author": {

deployment/performance-dashboard-on-aws.template.json

@@ -1,6 +1,6 @@
 {
     "AWSTemplateFormatVersion": "2010-09-09",
-    "Description": "(SO0157) Performance Dashboard on AWS Solution Implementation v1.9.2",
+    "Description": "(SO0157) Performance Dashboard on AWS Solution Implementation v1.9.4",
     "Parameters": {
         "AdminEmail": {
             "Type": "String",

examples/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lambda",
-    "version": "1.9.2",
+    "version": "1.9.4",
     "description": "test project for lambda",
     "license": "Apache-2.0",
     "author": {

frontend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "performance-dashboard-frontend",
-    "version": "1.9.2",
+    "version": "1.9.4",
     "private": true,
     "description": "Performance Dashboard on AWS Frontend",
     "license": "Apache-2.0",

frontend/src/components/FileInput.tsx

@@ -72,11 +72,13 @@ function FileInput(props: Props) {
             <div className="usa-hint">{props.hint}</div>
             {props.errors && (
                 <span className="usa-error-message" id="file-input-error-alert" role="alert">
-                    {props.errors.reduce(
-                        (accumulator: string, currentValue: any) =>
-                            `${currentValue.message}\n${accumulator}`,
-                        "",
-                    )}
+                    {Array.isArray(props.errors)
+                        ? props.errors.reduce(
+                              (accumulator: string, currentValue: any) =>
+                                  `${currentValue.message}\n${accumulator}`,
+                              "",
+                          )
+                        : props.errors}
                 </span>
             )}
             <div className={`usa-file-input${props.disabled ? " usa-file-input--disabled" : ""}`}>

frontend/src/components/WidgetTree.tsx

@@ -90,12 +90,6 @@ function WidgetTree(props: Props) {
         if (!tree) {
             return;
         }
-        if (sourceIndex < 0) {
-            sourceIndex = 0;
-        }
-        if (destinationIndex >= tree.nodes.length) {
-            destinationIndex = tree.nodes.length - 1;
-        }
 
         const widgets = OrderingService.moveWidget(tree, sourceIndex, destinationIndex);
         if (widgets) {

frontend/src/containers/EditImage.tsx

@@ -270,7 +270,7 @@ function EditImage() {
                                                 accept={supportedImageFileTypes.toString()}
                                                 loading={imageUploading}
                                                 register={register}
-                                                required
+                                                required={!widget.content.fileName}
                                                 hint={<span>{t("EditImageScreen.FileHint")}</span>}
                                                 fileName={
                                                     newImageFile?.name

frontend/src/services/OrderingService.ts

@@ -140,10 +140,6 @@ function moveWidget(
     sourceIndex: number,
     destinationIndex: number,
 ): Widget[] | undefined {
-    if (sourceIndex === destinationIndex) {
-        return undefined;
-    }
-
     const nodes = tree.nodes.flatMap((node) => {
         const list = [node];
         if (node.widget?.widgetType === WidgetType.Section) {
@@ -154,36 +150,93 @@ function moveWidget(
         return list;
     });
 
-    let source = nodes[sourceIndex];
-    if (destinationIndex > sourceIndex && destinationIndex < sourceIndex + source.children.length) {
-        // only true for sections, invalid case you can't drag a section inside itself
+    // If sourceIndex or destinationIndex are out of bounds, don't move anything.
+    if (
+        sourceIndex < 0 ||
+        sourceIndex >= nodes.length ||
+        destinationIndex < 0 ||
+        destinationIndex >= nodes.length
+    )
         return undefined;
-    }
 
-    // move items and it's children
-    const items = nodes.splice(sourceIndex, 1 + source.children.length);
-    if (destinationIndex > sourceIndex) {
-        destinationIndex -= source.children.length;
+    if (sourceIndex === destinationIndex) {
+        return undefined;
     }
 
+    let source = nodes[sourceIndex];
     let destination = nodes[destinationIndex];
-    if (destination) {
-        // insert before the destination
-        if (!!destination.section) {
-            // if destination is a section, invalid movement
-            if (source.widget?.widgetType === WidgetType.Section) {
-                return undefined;
+
+    // If moving down
+    if (sourceIndex < destinationIndex) {
+        // And source is a Section and destination is a nested item.
+        if (
+            source &&
+            source.widget?.widgetType === WidgetType.Section &&
+            destination &&
+            !!destination.section
+        ) {
+            const sectionWidget = nodes.find((node) => node.id === destination.section);
+            if (source.id === sectionWidget?.id) {
+                // And the nested item belongs to the Source Section.
+                // Then move the Sectiom to the position of the next item that is not a nested item.
+                destinationIndex =
+                    (sectionWidget?.dragIndex ?? 0) + (sectionWidget?.children?.length ?? 0) + 1;
             } else {
-                // assign the new section to the widget
+                // And the nested item does not belong to the Source Section.
+                // Then move the Section to the position of the destination item.
+                destinationIndex = destinationIndex + 1 - source.children.length;
+            }
+
+            // If the destinationIndex is out of bounds, we don't move anything.
+            if (destinationIndex >= nodes.length) return undefined;
+
+            destination = nodes[destinationIndex];
+        }
+        // And source is not a Section
+        if (source && source.widget?.widgetType !== WidgetType.Section) {
+            // And destination is a Section.
+            if (destination && destination.widget?.widgetType === WidgetType.Section) {
+                // Then move the widget to inside of the Section
+                // assign the new section to the widget.
+                source.section = nodes[destinationIndex + 1].section;
+            } else if (destination && destination.section) {
+                // And destination is a nested item.
+                // Then move the widget to inside of the Section
+                // assign the new section to the widget.
                 source.section = destination.section;
+                if (destination.id.startsWith("end-")) {
+                    // And destination is the last item of the Section.
+                    // Then move widget to outside of the Section
+                    source.section = "";
+                }
             }
-        } else {
-            source.section = "";
         }
     } else {
-        source.section = "";
+        // If moving up.
+        // And source is a section and destination is a nested item.
+        if (
+            source &&
+            source.widget?.widgetType === WidgetType.Section &&
+            destination &&
+            !!destination.section
+        ) {
+            const sectionWidget = nodes.find((node) => node.id === destination.section);
+            // Then move the Section to the position of the previous item that is not a nested item.
+            destinationIndex = sectionWidget?.dragIndex ?? 0;
+            destination = nodes[destinationIndex];
+        }
+        if (source && source.widget?.widgetType !== WidgetType.Section) {
+            // And source is not a Section
+            // Then assign the parent element if of the destination if any.
+            source.section = destination.section;
+        }
     }
 
+    // move items and it's children
+    const items = nodes.splice(sourceIndex, 1 + source.children.length);
+    if (destinationIndex > sourceIndex) {
+        destinationIndex -= source.children.length;
+    }
     // insert the items in the given position
     nodes.splice(destinationIndex, 0, ...items);