From a2688bb4da6564bf20ab97d2bbf8cbae4cb7a464 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Wed, 25 May 2022 15:08:32 +0530
Subject: [PATCH] feat: Add deprecation warning badge to deprecated widgets
(#13381)
This Change also introduces, isDeprecated flag to widget config, when true will add the warning to the widget's propertyPane.
---
.../cypress/fixtures/deprecatedWidgets.json | 288 ++++++++++++++++++
.../DisplayWidgets/deprecatedWidgets_spec.js | 27 ++
app/client/src/ce/constants/messages.ts | 12 +-
.../src/components/ads/BannerMessage.tsx | 76 +++++
.../Editor/PropertyPane/ConnectDataCTA.tsx | 2 +-
.../pages/Editor/PropertyPane/Generator.tsx | 4 +-
.../PropertyPane/PropertyPaneConnections.tsx | 1 +
.../Editor/PropertyPane/PropertyPaneView.tsx | 36 ++-
app/client/src/pages/Editor/utils.ts | 6 +
.../src/utils/WidgetRegisterHelpers.tsx | 1 +
app/client/src/utils/WidgetRegistry.tsx | 18 +-
.../widgets/CircularProgressWidget/index.ts | 1 +
.../src/widgets/DatePickerWidget/index.ts | 1 +
.../src/widgets/DropdownWidget/index.ts | 1 +
.../src/widgets/FilepickerWidget/index.ts | 1 +
app/client/src/widgets/IconWidget/index.ts | 1 +
app/client/src/widgets/InputWidget/index.ts | 1 +
.../src/widgets/MultiSelectWidget/index.ts | 1 +
.../src/widgets/ProgressBarWidget/index.ts | 1 +
app/client/src/widgets/constants.ts | 1 +
20 files changed, 458 insertions(+), 22 deletions(-)
create mode 100644 app/client/cypress/fixtures/deprecatedWidgets.json
create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/deprecatedWidgets_spec.js
create mode 100644 app/client/src/components/ads/BannerMessage.tsx
diff --git a/app/client/cypress/fixtures/deprecatedWidgets.json b/app/client/cypress/fixtures/deprecatedWidgets.json
new file mode 100644
index 0000000000..c4340722ff
--- /dev/null
+++ b/app/client/cypress/fixtures/deprecatedWidgets.json
@@ -0,0 +1,288 @@
+{
+ "dsl": {
+ "widgetName": "MainContainer",
+ "backgroundColor": "none",
+ "rightColumn": 1224,
+ "snapColumns": 64,
+ "detachFromLayout": true,
+ "widgetId": "0",
+ "topRow": 0,
+ "bottomRow": 1140,
+ "containerStyle": "none",
+ "snapRows": 111,
+ "parentRowSpace": 1,
+ "type": "CANVAS_WIDGET",
+ "canExtend": true,
+ "version": 57,
+ "minHeight": 1120,
+ "parentColumnSpace": 1,
+ "dynamicBindingPathList": [],
+ "leftColumn": 0,
+ "children": [
+ {
+ "widgetName": "Input1",
+ "displayName": "Input",
+ "iconSVG": "/static/media/icon.9f505595.svg",
+ "topRow": 1,
+ "bottomRow": 5,
+ "parentRowSpace": 10,
+ "labelWidth": 5,
+ "autoFocus": false,
+ "type": "INPUT_WIDGET",
+ "hideCard": false,
+ "animateLoading": true,
+ "parentColumnSpace": 30.0625,
+ "resetOnSubmit": true,
+ "leftColumn": 1,
+ "labelPosition": "Left",
+ "labelStyle": "",
+ "inputType": "TEXT",
+ "isDisabled": false,
+ "key": "275yj6r1or",
+ "isRequired": false,
+ "isDeprecated": true,
+ "rightColumn": 21,
+ "widgetId": "vt14lljb7u",
+ "isVisible": true,
+ "label": "",
+ "allowCurrencyChange": false,
+ "version": 1,
+ "parentId": "0",
+ "labelAlignment": "left",
+ "renderMode": "CANVAS",
+ "isLoading": false,
+ "iconAlign": "left",
+ "defaultText": ""
+ },
+ {
+ "widgetName": "Select1",
+ "isFilterable": false,
+ "displayName": "Select",
+ "iconSVG": "/static/media/icon.bd99caba.svg",
+ "labelText": "Label",
+ "topRow": 6,
+ "bottomRow": 13,
+ "parentRowSpace": 10,
+ "labelWidth": 5,
+ "type": "DROP_DOWN_WIDGET",
+ "serverSideFiltering": false,
+ "hideCard": false,
+ "defaultOptionValue": "GREEN",
+ "selectionType": "SINGLE_SELECT",
+ "animateLoading": true,
+ "parentColumnSpace": 30.0625,
+ "leftColumn": 1,
+ "labelPosition": "Left",
+ "options": [
+ {
+ "label": "Blue",
+ "value": "BLUE"
+ },
+ {
+ "label": "Green",
+ "value": "GREEN"
+ },
+ {
+ "label": "Red",
+ "value": "RED"
+ }
+ ],
+ "placeholderText": "Select option",
+ "isDisabled": false,
+ "key": "s12wyz7ve1",
+ "isRequired": false,
+ "isDeprecated": true,
+ "rightColumn": 21,
+ "widgetId": "7abukaxyhu",
+ "isVisible": true,
+ "version": 1,
+ "parentId": "0",
+ "labelAlignment": "left",
+ "renderMode": "CANVAS",
+ "isLoading": false
+ },
+ {
+ "widgetName": "DatePicker1",
+ "dateFormat": "YYYY-MM-DD HH:mm",
+ "displayName": "DatePicker",
+ "iconSVG": "/static/media/icon.300e5ab8.svg",
+ "topRow": 15,
+ "bottomRow": 19,
+ "parentRowSpace": 10,
+ "type": "DATE_PICKER_WIDGET",
+ "hideCard": false,
+ "animateLoading": true,
+ "parentColumnSpace": 30.0625,
+ "leftColumn": 1,
+ "isDisabled": false,
+ "key": "ovo8lmv8tj",
+ "defaultDate": "2022-04-27 19:58",
+ "isDeprecated": true,
+ "rightColumn": 21,
+ "widgetId": "4szxg4jmpp",
+ "isVisible": true,
+ "datePickerType": "DATE_PICKER",
+ "label": "",
+ "version": 1,
+ "parentId": "0",
+ "renderMode": "CANVAS",
+ "isLoading": false
+ },
+ {
+ "widgetName": "Icon1",
+ "isDeprecated": true,
+ "rightColumn": 5,
+ "displayName": "Icon",
+ "iconSVG": "/static/media/icon.31d6cfe0.svg",
+ "widgetId": "heq2edkb6s",
+ "topRow": 21,
+ "bottomRow": 25,
+ "parentRowSpace": 10,
+ "isVisible": true,
+ "type": "ICON_WIDGET",
+ "version": 1,
+ "hideCard": false,
+ "parentId": "0",
+ "renderMode": "CANVAS",
+ "isLoading": false,
+ "parentColumnSpace": 30.0625,
+ "leftColumn": 1,
+ "key": "q6apte987h"
+ },
+ {
+ "widgetName": "FilePicker1",
+ "displayName": "FilePicker",
+ "iconSVG": "/static/media/icon.7c5ad9c3.svg",
+ "topRow": 26,
+ "bottomRow": 30,
+ "parentRowSpace": 10,
+ "allowedFileTypes": [],
+ "type": "FILE_PICKER_WIDGET",
+ "hideCard": false,
+ "animateLoading": true,
+ "parentColumnSpace": 30.0625,
+ "leftColumn": 1,
+ "isDisabled": false,
+ "key": "0lvexvvl0g",
+ "isRequired": false,
+ "isDeprecated": true,
+ "rightColumn": 17,
+ "isDefaultClickDisabled": true,
+ "widgetId": "hiug3nerkb",
+ "isVisible": true,
+ "label": "Select Files",
+ "maxFileSize": 5,
+ "version": 1,
+ "fileDataType": "Base64",
+ "parentId": "0",
+ "selectedFiles": [],
+ "renderMode": "CANVAS",
+ "isLoading": false,
+ "files": [],
+ "maxNumFiles": 1
+ },
+ {
+ "widgetName": "MultiSelect1",
+ "displayName": "MultiSelect",
+ "iconSVG": "/static/media/icon.a3495809.svg",
+ "labelText": "Label",
+ "topRow": 31,
+ "bottomRow": 38,
+ "parentRowSpace": 10,
+ "labelWidth": 5,
+ "type": "MULTI_SELECT_WIDGET",
+ "serverSideFiltering": false,
+ "hideCard": false,
+ "defaultOptionValue": [
+ "GREEN"
+ ],
+ "animateLoading": true,
+ "parentColumnSpace": 30.0625,
+ "leftColumn": 1,
+ "labelPosition": "Left",
+ "options": [
+ {
+ "label": "Blue",
+ "value": "BLUE"
+ },
+ {
+ "label": "Green",
+ "value": "GREEN"
+ },
+ {
+ "label": "Red",
+ "value": "RED"
+ }
+ ],
+ "placeholderText": "Select option(s)",
+ "isDisabled": false,
+ "key": "05pyckdekd",
+ "isRequired": false,
+ "isDeprecated": true,
+ "rightColumn": 21,
+ "widgetId": "czlaz4dty2",
+ "isVisible": true,
+ "version": 1,
+ "parentId": "0",
+ "labelAlignment": "left",
+ "renderMode": "CANVAS",
+ "isLoading": false
+ },
+ {
+ "widgetName": "ProgressBar1",
+ "isCanvas": false,
+ "displayName": "Progress Bar",
+ "iconSVG": "/static/media/icon.9b0d7b96.svg",
+ "topRow": 44,
+ "bottomRow": 48,
+ "parentRowSpace": 10,
+ "type": "PROGRESSBAR_WIDGET",
+ "hideCard": false,
+ "fillColor": "#03B365",
+ "parentColumnSpace": 30.0625,
+ "leftColumn": 1,
+ "key": "wknrvlvi6b",
+ "showResult": false,
+ "isDeprecated": true,
+ "rightColumn": 29,
+ "widgetId": "bxn75b85v2",
+ "isVisible": true,
+ "steps": 1,
+ "version": 1,
+ "parentId": "0",
+ "renderMode": "CANVAS",
+ "isLoading": false,
+ "progress": 50,
+ "barType": "indeterminate"
+ },
+ {
+ "widgetName": "CircularProgress1",
+ "displayName": "Circular Progress",
+ "iconSVG": "/static/media/icon.d5418f48.svg",
+ "topRow": 49,
+ "bottomRow": 66,
+ "parentRowSpace": 10,
+ "type": "CIRCULAR_PROGRESS_WIDGET",
+ "hideCard": false,
+ "fillColor": "#03B365",
+ "animateLoading": true,
+ "parentColumnSpace": 30.0625,
+ "leftColumn": 1,
+ "shouldTruncate": false,
+ "key": "ztjmd8ec4a",
+ "showResult": true,
+ "isDeprecated": true,
+ "rightColumn": 17,
+ "widgetId": "5r48vbnl9d",
+ "counterClockWise": false,
+ "isVisible": true,
+ "shouldScroll": false,
+ "version": 1,
+ "parentId": "0",
+ "renderMode": "CANVAS",
+ "isLoading": false,
+ "progress": 65
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/deprecatedWidgets_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/deprecatedWidgets_spec.js
new file mode 100644
index 0000000000..b0827cc10d
--- /dev/null
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/deprecatedWidgets_spec.js
@@ -0,0 +1,27 @@
+const dsl = require("../../../../fixtures/deprecatedWidgets.json");
+
+describe("Deprecation warning feature", function() {
+ before(() => {
+ cy.addDsl(dsl);
+ });
+
+ it("should have deprecation warning on all the deprecated widgets", function() {
+ cy.get(`#div-selection-0`).click({
+ force: true,
+ });
+
+ for (const widgets of dsl.dsl.children) {
+ cy.get(`#div-selection-0`).click({
+ force: true,
+ });
+
+ cy.get(`#${widgets.widgetId}`).click({
+ ctrlKey: true,
+ });
+
+ cy.get(`div[data-testid='t--selected']`).should("have.length", 1);
+
+ cy.get(`.t--deprecation-warning`).should("have.length", 1);
+ }
+ });
+});
diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index ced6790166..1d35d60c38 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -1032,15 +1032,6 @@ export const TEST_EMAIL_FAILURE = () => "Sending Test Email Failed";
export const DISCONNECT_AUTH_ERROR = () =>
"Cannot disconnect the only connected authentication method.";
export const MANDATORY_FIELDS_ERROR = () => "Mandatory fields cannot be empty";
-//Reflow Beta Screen
-export const REFLOW_BETA_CHECKBOX_LABEL = () =>
- "Turn on new drag & drop experience";
-export const REFLOW_INFO_CARD_HEADER = () => "New Drag & Drop Experience";
-export const REFLOW_INFO_CARD_CONTENT_1 = () =>
- "When dropping a new widget, other widgets now automatically move out of the way.";
-export const REFLOW_INFO_CARD_CONTENT_2 = () =>
- "Widgets next to the canvas edge will shrink to make space for the new widget.";
-export const REFLOW_LEARN_MORE = () => "LEARN MORE";
//
export const WELCOME_FORM_NON_SUPER_USER_ROLE_DROPDOWN = () =>
"Tell us more about what you do at work?";
@@ -1052,6 +1043,9 @@ export const QUERY_CONFIRMATION_MODAL_MESSAGE = () =>
export const ENTITY_EXPLORER_TITLE = () => "NAVIGATION";
export const MULTI_SELECT_PROPERTY_PANE_MESSAGE = () =>
`Select a widget to see it's properties`;
+export const WIDGET_DEPRECATION_WARNING = (widgetName: string) =>
+ `A new version of the ${widgetName}widget is available. Upgrade to enjoy an enhanced experience.`;
+export const WIDGET_DEPRECATION_WARNING_HEADER = () => "Stay Up-to-date";
export const LOCK_ENTITY_EXPLORER_MESSAGE = () => `Lock sidebar open`;
export const CLOSE_ENTITY_EXPLORER_MESSAGE = () => `Close sidebar`;
diff --git a/app/client/src/components/ads/BannerMessage.tsx b/app/client/src/components/ads/BannerMessage.tsx
new file mode 100644
index 0000000000..c4322eadd0
--- /dev/null
+++ b/app/client/src/components/ads/BannerMessage.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import styled from "styled-components";
+
+import Icon, { IconSize } from "components/ads/Icon";
+
+type Props = {
+ backgroundColor: string;
+ className: string;
+ icon: string;
+ iconColor: string;
+ iconSize: IconSize;
+ messageHeader?: string;
+ message: string;
+ textColor: string;
+};
+
+const MessageContainer = styled.div<{
+ backgroundColor: string;
+ textColor: string;
+}>`
+ display: flex;
+ padding: 8px;
+ margin-bottom: 8px;
+ flex-direction: row;
+ color: ${(props) => props.textColor};
+ background: ${(props) => props.backgroundColor};
+ }
+`;
+const StyledIcon = styled(Icon)`
+ padding: 10px;
+ cursor: default;
+
+ svg {
+ cursor: default;
+ }
+`;
+
+const MessageWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ padding-left: 4px;
+ line-height: 16px;
+`;
+
+const MessageText = styled.p`
+ font-size: 13px;
+ font-weight: 400;
+`;
+
+const MessageHeader = styled.h2`
+ font-size: 14px;
+ font-weight: 600;
+ padding-bottom: 5px;
+`;
+
+export function BannerMessage(props: Props) {
+ return (
+