[Fluent] Add buttonLine, switchPropertyLine; Introduce noCopy mode for tools (#16766)

Introduce switchPropertyLine / buttonLine 

![image](https://github.com/user-attachments/assets/f5bce604-6d41-4b93-a96b-91fbceb16d3a)

![image](https://github.com/user-attachments/assets/d8b050ef-fcea-4224-9a99-ea766236d6f8)


Also introduced a 'noCopy' mode tools can use to hide copy button for
properties (was done using CSS before)

Co-authored-by: Georgina <[email protected]>

Author: georginahalpern

packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx

@@ -0,0 +1,30 @@
+import { Body1, Button, makeStyles, tokens } from "@fluentui/react-components";
+import type { ButtonProps as FluentButtonProps } from "@fluentui/react-components";
+import { LineContainer } from "./propertyLine";
+import type { FunctionComponent } from "react";
+
+const useButtonLineStyles = makeStyles({
+    button: {
+        border: `1px solid ${tokens.colorBrandBackground}`,
+    },
+});
+
+type ButtonLineProps = FluentButtonProps & {
+    label: string;
+};
+
+/**
+ * Wraps a button with a label in a line container
+ * @param props Button props plus a label
+ * @returns A button inside a line
+ */
+export const ButtonLine: FunctionComponent<ButtonLineProps> = (props) => {
+    const classes = useButtonLineStyles();
+    return (
+        <LineContainer>
+            <Button className={classes.button} {...props}>
+                <Body1>{props.label}</Body1>
+            </Button>
+        </LineContainer>
+    );
+};

packages/dev/sharedUiComponents/src/fluent/hoc/fluentToolWrapper.tsx

@@ -8,9 +8,14 @@ export type ToolHostProps = {
      * Allows host to pass in a theme
      */
     customTheme?: Theme;
+
+    /**
+     * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)
+     */
+    disableCopy?: boolean;
 };
 
-export const ToolContext = createContext({ useFluent: false as boolean } as const);
+export const ToolContext = createContext({ useFluent: false as boolean, disableCopy: false as boolean } as const);
 
 /**
  * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component
@@ -24,7 +29,7 @@ export const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProp
 
     return enableFluent ? (
         <FluentProvider theme={props.customTheme || webDarkTheme}>
-            <ToolContext.Provider value={{ useFluent: true }}>{props.children}</ToolContext.Provider>
+            <ToolContext.Provider value={{ useFluent: true, disableCopy: !!props.disableCopy }}>{props.children}</ToolContext.Provider>
         </FluentProvider>
     ) : (
         props.children

packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx

@@ -1,8 +1,9 @@
 import { Body1Strong, Button, InfoLabel, makeStyles, tokens } from "@fluentui/react-components";
 import { Add24Filled, Copy24Regular, Subtract24Filled } from "@fluentui/react-icons";
 import type { FunctionComponent, PropsWithChildren } from "react";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { copyCommandToClipboard } from "../../copyCommandToClipboard";
+import { ToolContext } from "./fluentToolWrapper";
 
 const usePropertyLineStyles = makeStyles({
     container: {
@@ -62,6 +63,11 @@ export type PropertyLineProps = {
     expandedContent?: JSX.Element;
 };
 
+export const LineContainer: FunctionComponent<PropsWithChildren> = (props) => {
+    const classes = usePropertyLineStyles();
+    return <div className={classes.container}>{props.children}</div>;
+};
+
 /**
  * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
  *
@@ -75,8 +81,10 @@ export const PropertyLine: FunctionComponent<PropsWithChildren<PropertyLineProps
 
     const { label, description, onCopy, expandedContent, children } = props;
 
+    const { disableCopy } = useContext(ToolContext);
+
     return (
-        <div className={classes.container}>
+        <LineContainer>
             <div className={classes.line}>
                 <InfoLabel className={classes.label} info={description}>
                     <Body1Strong>{label}</Body1Strong>
@@ -96,13 +104,12 @@ export const PropertyLine: FunctionComponent<PropsWithChildren<PropertyLineProps
                         />
                     )}
 
-                    {onCopy && (
+                    {onCopy && !disableCopy && (
                         <Button className={classes.button} id="copyProperty" icon={<Copy24Regular />} onClick={() => copyCommandToClipboard(onCopy())} title="Copy to clipboard" />
                     )}
                 </div>
             </div>
-
             {expanded && expandedContent && <div className={classes.expandedContent}>{expandedContent}</div>}
-        </div>
+        </LineContainer>
     );
 };

packages/dev/sharedUiComponents/src/fluent/hoc/switchPropertyLine.tsx

@@ -0,0 +1,21 @@
+import type { SwitchProps } from "@fluentui/react-components";
+import { PropertyLine } from "./propertyLine";
+import type { PropertyLineProps } from "./propertyLine";
+import type { FunctionComponent } from "react";
+import { Switch } from "../primitives/switch";
+
+/**
+ * Wraps a switch in a property line
+ * @param props - The properties for the switch and property line
+ * @returns A React element representing the property line with a switch
+ */
+export const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps> = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { label, ...switchProps } = props;
+    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch
+    return (
+        <PropertyLine {...props}>
+            <Switch {...switchProps} />
+        </PropertyLine>
+    );
+};

packages/dev/sharedUiComponents/src/lines/buttonLineComponent.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { ButtonLine } from "../fluent/hoc/buttonLine";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 
 export interface IButtonLineComponentProps {
     label: string;
@@ -13,12 +15,19 @@ export class ButtonLineComponent extends React.Component<IButtonLineComponentPro
         super(props);
     }
 
-    override render() {
+    renderFluent() {
+        return <ButtonLine label={this.props.label} icon={this.props.icon} title={this.props.label} onClick={this.props.onClick} disabled={this.props.isDisabled} />;
+    }
+    renderOriginal() {
         return (
             <div className={"buttonLine" + (this.props.isDisabled ? " disabled" : "")}>
                 {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className="icon" />}
                 <button onClick={() => this.props.onClick()}>{this.props.label}</button>
             </div>
         );
     }
+
+    override render() {
+        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;
+    }
 }

packages/dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx

@@ -6,6 +6,8 @@ import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { conflictingValuesPlaceholder } from "./targetsProxy";
 import copyIcon from "../imgs/copy.svg";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
+import { SwitchPropertyLine } from "../fluent/hoc/switchPropertyLine";
 
 export interface ICheckBoxLineComponentProps {
     label?: string;
@@ -129,7 +131,7 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
         }
     }
 
-    override render() {
+    renderOriginal() {
         const icons = this.props.large ? Icons.size40 : Icons.size30;
         const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;
         return (
@@ -167,4 +169,13 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
             </div>
         );
     }
+
+    renderFluent() {
+        // This same component renders a readonly 'check' icon, and an editable switch -- will introduce the icon in next PR as it will be a diff component
+        return <SwitchPropertyLine label={this.props.label || ""} checked={this.state.isSelected} onChange={() => this.onChange()} disabled={!!this.props.disabled} />;
+    }
+
+    override render() {
+        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;
+    }
 }

packages/tools/nodeEditor/src/graphEditor.tsx

@@ -633,7 +633,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
     override render() {
         return (
             <Portal globalState={this.props.globalState}>
-                <FluentToolWrapper>
+                <FluentToolWrapper disableCopy={true}>
                     <SplitContainer
                         id="node-editor-graph-root"
                         direction={SplitDirection.Horizontal}