Aasim/fix/schema designer UI (#21440)

* Refactor schema designer UI: update icons and localization, remove unused SVGs

* Update localization strings: change "Publish Changes" to "Apply Changes" and "Definition" to "Show Definition"

* Add Filter Funnel Icons and Update Toolbar for Compact Mode

- Introduced new FilterFunnelIcon16Regular and FilterFunnelIcon16Filled components for better icon rendering.
- Replaced existing FilterFunnel icons in the toolbar with the new 16px versions.
- Implemented a compact mode for the Schema Designer toolbar, allowing buttons to hide their text labels when space is limited.
- Updated various toolbar buttons (AddTableButton, AutoArrangeButton, DeleteNodesButton, ExportDiagramButton, FilterTablesButton, ShowChangesButton, ShowCopilotChangesButton, UndoRedoButtons, ViewDefinitionsButton) to conditionally render labels based on the compact state.
- Created SchemaDesignerToolbarContext to manage the compact state across the toolbar.

* Refactor setHighlightOverride to use stable callback in useSchemaDesignerChangeState

* Replace icon in DesignerPageRibbon with CodeDefinitionIcon16Regular

* Fix typos in icon names and update tooltips with localization constants in Schema Designer UI

* Normalize package.json line endings

---------

Co-authored-by: Aasim Khan <aasimkhan@gmail.com>

Author: aasimkhan30

extensions/mssql/l10n/bundle.l10n.json

@@ -196,7 +196,7 @@
     "Schema": "Schema",
     "Back to preview": "Back to preview",
     "You must review and accept the terms to proceed": "You must review and accept the terms to proceed",
-    "Publish Changes": "Publish Changes",
+    "Apply Changes": "Apply Changes",
     "Open Publish Script": "Open Publish Script",
     "Code Analysis - {0}/{0} is the name of the database project": {
         "message": "Code Analysis - {0}",
@@ -703,7 +703,7 @@
     "No Action": "No Action",
     "Possible Data Loss detected. Please review the changes.": "Possible Data Loss detected. Please review the changes.",
     "Warnings detected. Please review the changes.": "Warnings detected. Please review the changes.",
-    "Definition": "Definition",
+    "Show Definition": "Show Definition",
     "Delete Confirmation": "Delete Confirmation",
     "Are you sure you want to delete the selected items?": "Are you sure you want to delete the selected items?",
     "Undo": "Undo",
@@ -881,7 +881,6 @@
     "Optional - Override default api/entityName path": "Optional - Override default api/entityName path",
     "Custom GraphQL Type": "Custom GraphQL Type",
     "Optional - Override default GraphQL type name": "Optional - Override default GraphQL type name",
-    "Apply Changes": "Apply Changes",
     "Source Table": "Source Table",
     "Loading...": "Loading...",
     "Initializing DAB configuration...": "Initializing DAB configuration...",

extensions/mssql/media/applicationQuickStart_dark.svg

@@ -1194,8 +1194,8 @@
                 "title": "%mssql.schemaDesigner%",
                 "category": "MS SQL",
                 "icon": {
-                    "dark": "media/designSchema_dark.svg",
-                    "light": "media/designSchema_light.svg"
+                    "dark": "media/applicationQuickStart_dark.svg",
+                    "light": "media/applicationQuickStart_light.svg"
                 }
             },
             {

extensions/mssql/media/applicationQuickStart_light.svg

@@ -11,10 +11,11 @@ export interface CopilotChatButtonProps {
     label: string;
     tooltip: string;
     onClick: () => void | Promise<void>;
+    hideLabel?: boolean;
 }
 
 export const CopilotChatButton = forwardRef<HTMLButtonElement, CopilotChatButtonProps>(
-    ({ label, tooltip, onClick }, ref) => {
+    ({ label, tooltip, onClick, hideLabel }, ref) => {
         return (
             <Tooltip content={tooltip} relationship="label">
                 <Button
@@ -25,7 +26,7 @@ export const CopilotChatButton = forwardRef<HTMLButtonElement, CopilotChatButton
                     title={tooltip}
                     aria-label={tooltip}
                     onClick={() => void onClick()}>
-                    {label}
+                    {!hideLabel && label}
                 </Button>
             </Tooltip>
         );

extensions/mssql/media/designSchema_dark.svg

@@ -21,9 +21,16 @@ export interface CopilotChatEntryProps {
     tooltip: string;
     onOpenChat: () => void | Promise<void>;
     discovery?: CopilotChatDiscoveryProps;
+    hideLabel?: boolean;
 }
 
-export function CopilotChatEntry({ label, tooltip, onOpenChat, discovery }: CopilotChatEntryProps) {
+export function CopilotChatEntry({
+    label,
+    tooltip,
+    onOpenChat,
+    discovery,
+    hideLabel,
+}: CopilotChatEntryProps) {
     const [target, setTarget] = useState<HTMLButtonElement | null>(null);
 
     const handleOpenChat = async () => {
@@ -40,6 +47,7 @@ export function CopilotChatEntry({ label, tooltip, onOpenChat, discovery }: Copi
                 label={label}
                 tooltip={tooltip}
                 onClick={handleOpenChat}
+                hideLabel={hideLabel}
             />
             {discovery && (
                 <FeatureDiscoveryPopover

extensions/mssql/media/designSchema_light.svg

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import React from "react";
+
+/**
+ * Custom icon component because the paths require fillRule="evenodd" which
+ * createFluentIcon does not support.
+ */
+export const AddTableIcon16Regular = Object.assign(
+    React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>((props, ref) => {
+        const { fill = "currentColor", className, style, ...rest } = props;
+        return (
+            <svg
+                ref={ref}
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                xmlns="http://www.w3.org/2000/svg"
+                className={className}
+                style={style}
+                {...rest}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M4 9.97758V10H6V9.79297C6.34864 9.69436 6.68321 9.56223 7 9.40029V10L11 10V6L9.79297 6C9.88412 5.67772 9.94663 5.34341 9.97758 5L11 5V3H9.79297C9.69436 2.65136 9.56223 2.31679 9.40029 2L12.5 2C13.8807 2 15 3.11929 15 4.5V11.5C15 12.8807 13.8807 14 12.5 14H5.5C4.11929 14 3 12.8807 3 11.5L3 9.79297C3.32228 9.88412 3.65659 9.94663 4 9.97758ZM11 13H7V11L11 11V13ZM4 11H6V13H5.5C4.67157 13 4 12.3284 4 11.5V11ZM12 6H14V10H12V6ZM12 11H14V11.5C14 12.3284 13.3284 13 12.5 13H12V11ZM14 4.5V5H12V3H12.5C13.3284 3 14 3.67157 14 4.5Z"
+                    fill={fill}
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M9 4.5C9 6.98528 6.98528 9 4.5 9C2.01472 9 0 6.98528 0 4.5C0 2.01472 2.01472 0 4.5 0C6.98528 0 9 2.01472 9 4.5ZM4.5 2C4.77614 2 5 2.22386 5 2.5V4H6.5C6.77614 4 7 4.22386 7 4.5C7 4.77614 6.77614 5 6.5 5H5V6.5C5 6.77614 4.77614 7 4.5 7C4.22386 7 4 6.77614 4 6.5V5H2.5C2.22386 5 2 4.77614 2 4.5C2 4.22386 2.22386 4 2.5 4H4V2.5C4 2.22386 4.22386 2 4.5 2Z"
+                    fill={fill}
+                />
+            </svg>
+        );
+    }),
+    { displayName: "AddTableIcon16Regular" },
+);

extensions/mssql/package.json

@@ -0,0 +1,61 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import React from "react";
+
+/**
+ * Custom icon components because the paths require fillRule="evenodd" which
+ * createFluentIcon does not support.
+ */
+
+export const FilterFunnelIcon16Regular = Object.assign(
+    React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>((props, ref) => {
+        const { fill = "currentColor", className, style, ...rest } = props;
+        return (
+            <svg
+                ref={ref}
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                xmlns="http://www.w3.org/2000/svg"
+                className={className}
+                style={style}
+                {...rest}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M15 2v1.67l-5 4.759V14H6V8.429l-5-4.76V2h14zM7 8v5h2V8l5-4.76V3H2v.24L7 8z"
+                    fill={fill}
+                />
+            </svg>
+        );
+    }),
+    { displayName: "FilterFunnelIcon16Regular" },
+);
+
+export const FilterFunnelIcon16Filled = Object.assign(
+    React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>((props, ref) => {
+        const { fill = "currentColor", className, style, ...rest } = props;
+        return (
+            <svg
+                ref={ref}
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                xmlns="http://www.w3.org/2000/svg"
+                className={className}
+                style={style}
+                {...rest}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M15 2v1.67l-5 4.759V14H6V8.429l-5-4.76V2h14z"
+                    fill={fill}
+                />
+            </svg>
+        );
+    }),
+    { displayName: "FilterFunnelIcon16Filled" },
+);