From 095524c3454e347b1cc8aa68dd0fb2b2e079f059 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Fri, 17 May 2024 16:58:31 +0530
Subject: [PATCH] chore: allow deleting toolbar + add icon for toolbar creation
 (#33544)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes: #33395

/ok-to-test tags="@tag.Anvil"<!-- This is an auto-generated comment:
Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9127232599>
> Commit: 70759b80893d1c014ca305020f1a9e429267de2c
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9127232599&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
---
 .../propertyControls/DraggableListCard.tsx    |  2 +-
 .../ToolbarButtonListControl.tsx              | 40 +++++++++++++++++++
 .../src/components/propertyControls/index.ts  |  2 +
 .../propertyPaneConfig/contentConfig.ts       |  2 +-
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 app/client/src/components/propertyControls/ToolbarButtonListControl.tsx

diff --git a/app/client/src/components/propertyControls/DraggableListCard.tsx b/app/client/src/components/propertyControls/DraggableListCard.tsx
index cbc7bc00eb..ae25fd30b7 100644
--- a/app/client/src/components/propertyControls/DraggableListCard.tsx
+++ b/app/client/src/components/propertyControls/DraggableListCard.tsx
@@ -204,7 +204,7 @@ export function DraggableListCard(props: RenderComponentProps) {
             startIcon="settings-2-line"
           />
         )}
-        {showDelete && !isSeparator && (
+        {showDelete && (
           <Button
             className="t--delete-column-btn"
             isIconButton
diff --git a/app/client/src/components/propertyControls/ToolbarButtonListControl.tsx b/app/client/src/components/propertyControls/ToolbarButtonListControl.tsx
new file mode 100644
index 0000000000..65392b03e6
--- /dev/null
+++ b/app/client/src/components/propertyControls/ToolbarButtonListControl.tsx
@@ -0,0 +1,40 @@
+import { generateReactKey } from "utils/generators";
+
+import {
+  createMessage,
+  BUTTON_WIDGET_DEFAULT_LABEL,
+} from "@appsmith/constants/messages";
+import ButtonListControl from "./ButtonListControl";
+
+class ToolbarButtonListControl extends ButtonListControl {
+  addOption = ({ isSeparator }: { isSeparator?: boolean }) => {
+    let groupButtons = this.props.propertyValue;
+    const groupButtonsArray = this.getMenuItems();
+    const newGroupButtonId = generateReactKey({ prefix: "groupButton" });
+
+    groupButtons = {
+      ...groupButtons,
+      [newGroupButtonId]: {
+        id: newGroupButtonId,
+        index: groupButtonsArray.length,
+        label: isSeparator
+          ? "Separator"
+          : createMessage(BUTTON_WIDGET_DEFAULT_LABEL),
+        widgetId: generateReactKey(),
+        isDisabled: false,
+        itemType: isSeparator ? "SEPARATOR" : "BUTTON",
+        isVisible: true,
+        buttonVariant: "filled",
+        iconName: "thumb-up",
+      },
+    };
+
+    this.updateProperty(this.props.propertyName, groupButtons);
+  };
+
+  static getControlType() {
+    return "TOOLBAR_BUTTONS";
+  }
+}
+
+export default ToolbarButtonListControl;
diff --git a/app/client/src/components/propertyControls/index.ts b/app/client/src/components/propertyControls/index.ts
index 82ca4dddad..15f68644cd 100644
--- a/app/client/src/components/propertyControls/index.ts
+++ b/app/client/src/components/propertyControls/index.ts
@@ -75,6 +75,7 @@ import {
 import type { IconSelectControlV2Props } from "./IconSelectControlV2";
 import IconSelectControlV2 from "./IconSelectControlV2";
 import PrimaryColumnsControlWDS from "./PrimaryColumnsControlWDS";
+import ToolbarButtonListControl from "./ToolbarButtonListControl";
 
 export const PropertyControls = {
   InputTextControl,
@@ -126,6 +127,7 @@ export const PropertyControls = {
   SectionSplitterControl,
   IconSelectControlV2,
   PrimaryColumnsControlWDS,
+  ToolbarButtonListControl,
 };
 
 export type PropertyControlPropsType =
diff --git a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/propertyPaneConfig/contentConfig.ts
index 977b6ae915..c82c4fa60d 100644
--- a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/propertyPaneConfig/contentConfig.ts
+++ b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/propertyPaneConfig/contentConfig.ts
@@ -11,7 +11,7 @@ export const propertyPaneContentConfig = [
       {
         helpText: "Group Buttons",
         propertyName: "buttonsList",
-        controlType: "GROUP_BUTTONS",
+        controlType: "TOOLBAR_BUTTONS",
         label: "Buttons",
         allowSeparators: true,
         dependencies: ["childStylesheet", "orientation"],