Use active tool name as tool settings label (#3814)

* Add useToolAsToolSettingsLabel option to UiFramework

* Extract api

* rush change

common/api/appui-react.api.md

@@ -572,6 +572,8 @@ export class AppUiSettings implements UserSettingsProvider {
     // (undocumented)
     showWidgetIcon: UiStateEntry<boolean>;
     // (undocumented)
+    useToolAsToolSettingsLabel: UiStateEntry<boolean>;
+    // (undocumented)
     widgetOpacity: UiStateEntry<number>;
 }
 
@@ -1178,7 +1180,9 @@ export enum ConfigurableUiActionId {
     // (undocumented)
     SetViewOverlayDisplay = "configurableui:set-view-overlay-display",
     // (undocumented)
-    SetWidgetOpacity = "configurableui:set_widget_opacity"
+    SetWidgetOpacity = "configurableui:set_widget_opacity",
+    // (undocumented)
+    UseToolAsToolSettingsLabel = "configurableui:set-use-tool-as-tool-settings-label"
 }
 
 // @public
@@ -1193,6 +1197,7 @@ export const ConfigurableUiActions: {
     setAutoCollapseUnpinnedPanels: (autoCollapse: boolean) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.AutoCollapseUnpinnedPanels, boolean>;
     setViewOverlayDisplay: (displayViewOverlay: boolean) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.SetViewOverlayDisplay, boolean>;
     setAnimateToolSettings: (animateToolSettings: boolean) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.AnimateToolSettings, boolean>;
+    setUseToolAsToolSettingsLabel: (useToolAsToolSettingsLabel: boolean) => import("../redux/redux-ts").ActionWithPayload<ConfigurableUiActionId.UseToolAsToolSettingsLabel, boolean>;
 };
 
 // @public
@@ -1301,6 +1306,8 @@ export interface ConfigurableUiState {
     // (undocumented)
     useDragInteraction: boolean;
     // (undocumented)
+    useToolAsToolSettingsLabel: boolean;
+    // (undocumented)
     viewOverlayDisplay: boolean;
     // (undocumented)
     widgetOpacity: number;
@@ -2379,7 +2386,7 @@ export class FrameworkAccuDraw extends AccuDraw implements UserSettingsProvider
 export const FrameworkReducer: (state: import("./redux-ts").CombinedReducerState<{
     configurableUiState: typeof ConfigurableUiReducer;
     sessionState: typeof SessionStateReducer;
-}>, action: import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetSnapMode, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetTheme, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetToolPrompt, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetWidgetOpacity, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetDragInteraction, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetFrameworkVersion, import("../UiFramework").FrameworkVersionId>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetShowWidgetIcon, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.AutoCollapseUnpinnedPanels, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetViewOverlayDisplay, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.AnimateToolSettings, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetActiveIModelId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetAvailableSelectionScopes, import("./redux-ts").DeepReadonlyArray<import("./SessionState").PresentationSelectionScope>>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultIModelViewportControlId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultViewId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultViewState, any>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetNumItemsSelected, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetIModelConnection, any>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetSelectionScope, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.UpdateCursorMenu, import("./redux-ts").DeepReadonlyObject<import("./SessionState").CursorMenuData>>>) => import("./redux-ts").CombinedReducerState<{
+}>, action: import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetSnapMode, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetTheme, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetToolPrompt, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetWidgetOpacity, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetDragInteraction, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetFrameworkVersion, import("../UiFramework").FrameworkVersionId>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetShowWidgetIcon, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.AutoCollapseUnpinnedPanels, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.SetViewOverlayDisplay, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.AnimateToolSettings, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("../configurableui/state").ConfigurableUiActionId.UseToolAsToolSettingsLabel, boolean>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetActiveIModelId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetAvailableSelectionScopes, import("./redux-ts").DeepReadonlyArray<import("./SessionState").PresentationSelectionScope>>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultIModelViewportControlId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultViewId, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetDefaultViewState, any>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetNumItemsSelected, number>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetIModelConnection, any>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.SetSelectionScope, string>> | import("./redux-ts").DeepReadonlyObject<import("./redux-ts").ActionWithPayload<import("./SessionState").SessionStateActionId.UpdateCursorMenu, import("./redux-ts").DeepReadonlyObject<import("./SessionState").CursorMenuData>>>) => import("./redux-ts").CombinedReducerState<{
     configurableUiState: typeof ConfigurableUiReducer;
     sessionState: typeof SessionStateReducer;
 }>;
@@ -3322,6 +3329,8 @@ export interface InitialAppUiSettings {
     // (undocumented)
     showWidgetIcon?: boolean;
     // (undocumented)
+    useToolAsToolSettingsLabel?: boolean;
+    // (undocumented)
     widgetOpacity: number;
 }
 
@@ -6909,6 +6918,8 @@ export class UiFramework {
     static setUiVersion(version: FrameworkVersionId): void;
     // (undocumented)
     static setUseDragInteraction(useDragInteraction: boolean): void;
+    // (undocumented)
+    static setUseToolAsToolSettingsLabel(value: boolean): void;
     static setViewOverlayDisplay(display: boolean): void;
     // (undocumented)
     static setWidgetOpacity(opacity: number): void;
@@ -6923,6 +6934,7 @@ export class UiFramework {
     static useDefaultPopoutUrl: boolean;
     // (undocumented)
     static get useDragInteraction(): boolean;
+    static get useToolAsToolSettingsLabel(): boolean;
     static get viewOverlayDisplay(): boolean;
     // @alpha (undocumented)
     static get widgetManager(): WidgetManager;
@@ -7071,7 +7083,7 @@ export const useDefaultToolbarItems: (manager: ToolbarItemsManager) => readonly
 export function useFrameworkVersion(): FrameworkVersionId;
 
 // @internal (undocumented)
-export function useFrontstageManager(frontstageDef: FrontstageDef): void;
+export function useFrontstageManager(frontstageDef: FrontstageDef, useToolAsToolSettingsLabel?: boolean): void;
 
 // @internal (undocumented)
 export const useGroupedItems: (items: ReadonlyArray<BackstageItem>) => GroupedItems;

common/api/summary/appui-react.exports.csv

@@ -692,7 +692,7 @@ internal;useDefaultBackstageItems: (manager: BackstageItemsManager) => readonly
 public;useDefaultStatusBarItems: (manager: StatusBarItemsManager_2) => readonly CommonStatusBarItem[]
 public;useDefaultToolbarItems: (manager: ToolbarItemsManager) => readonly CommonToolbarItem[]
 public;useFrameworkVersion(): FrameworkVersionId
-internal;useFrontstageManager(frontstageDef: FrontstageDef): void
+internal;useFrontstageManager(frontstageDef: FrontstageDef, useToolAsToolSettingsLabel?: boolean): void
 internal;useGroupedItems: (items: ReadonlyArray
 internal;useHorizontalToolSettingNodes(): ToolSettingsEntry[] | undefined
 public;useIsBackstageOpen: (manager: BackstageManager) => boolean

common/changes/@itwin/appui-react/raplemie-useToolAsToolSettingsLabel_2022-06-14-18-56.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Add option to display active tool name as the Tool Settings tab label.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

ui/appui-react/public/locales/en/UiFramework.json

@@ -168,7 +168,9 @@
       "autoCollapseUnpinnedPanelsTitle": "Auto Collapse Unpinned Panels",
       "autoCollapseUnpinnedPanelsDescription": "Collapse unpinned widget panels when mouse leaves panel boundary. If false, mouse down outside is required.",
       "animateToolSettingsTitle": "Animate Docked Tool Settings on appear",
-      "animateToolSettingsDescription": "Animate tool settings when they appear in the docked bar."
+      "animateToolSettingsDescription": "Animate tool settings when they appear in the docked bar.",
+      "useToolAsToolSettingsLabelTitle": "Use tool as tool settings label",
+      "useToolAsToolSettingsLabelDescription": "Use active tool name as the Tool Settings tab label, if false, will always be titled 'Tool Settings'."
    }
   },
   "tools": {
@@ -301,6 +303,9 @@
     "pin": "Pin"
   },
   "widget": {
+    "labels": {
+      "toolSettings": "Tool Settings"
+    },
     "tooltips": {
       "dockToolSettings": "Dock to top",
       "moreWidgets": "More widgets",

ui/appui-react/src/appui-react/UiFramework.ts

@@ -533,6 +533,16 @@ export class UiFramework {
     UiFramework.dispatchActionToStore(ConfigurableUiActionId.AnimateToolSettings, value, true);
   }
 
+  /** Use Tool Name As Tool Settings Widget Tab Label */
+  public static get useToolAsToolSettingsLabel(): boolean {
+    return UiFramework.frameworkState ? UiFramework.frameworkState.configurableUiState.useToolAsToolSettingsLabel : /* istanbul ignore next */ false;
+  }
+  public static setUseToolAsToolSettingsLabel(value: boolean) {
+    if (UiFramework.useToolAsToolSettingsLabel === value)
+      return;
+    UiFramework.dispatchActionToStore(ConfigurableUiActionId.UseToolAsToolSettingsLabel, value, true);
+  }
+
   /** @alpha */
   public static get autoCollapseUnpinnedPanels(): boolean {
     return UiFramework.frameworkState ? UiFramework.frameworkState.configurableUiState.autoCollapseUnpinnedPanels : /* istanbul ignore next */ false;

ui/appui-react/src/appui-react/configurableui/state.ts

@@ -29,6 +29,7 @@ export enum ConfigurableUiActionId {
   AutoCollapseUnpinnedPanels = "configurableui:set-auto-collapse-unpinned-panels",
   SetViewOverlayDisplay = "configurableui:set-view-overlay-display",
   AnimateToolSettings = "configurableui:set-animate-tool-settings",
+  UseToolAsToolSettingsLabel = "configurableui:set-use-tool-as-tool-settings-label",
 }
 
 /** The portion of state managed by the ConfigurableUiReducer.
@@ -46,6 +47,7 @@ export interface ConfigurableUiState {
   autoCollapseUnpinnedPanels: boolean;
   viewOverlayDisplay: boolean;
   animateToolSettings: boolean;
+  useToolAsToolSettingsLabel: boolean;
 }
 
 /** used on first call of ConfigurableUiReducer */
@@ -60,6 +62,7 @@ const initialState: ConfigurableUiState = {
   autoCollapseUnpinnedPanels: false,
   viewOverlayDisplay: true,
   animateToolSettings: false,
+  useToolAsToolSettingsLabel: false,
 };
 
 /** An object with a function that creates each ConfigurableUiReducer that can be handled by our reducer.
@@ -82,6 +85,7 @@ export const ConfigurableUiActions = {   // eslint-disable-line @typescript-esli
   setAutoCollapseUnpinnedPanels: (autoCollapse: boolean) => createAction(ConfigurableUiActionId.AutoCollapseUnpinnedPanels, autoCollapse),
   setViewOverlayDisplay: (displayViewOverlay: boolean) => createAction(ConfigurableUiActionId.SetViewOverlayDisplay, displayViewOverlay),
   setAnimateToolSettings: (animateToolSettings: boolean) => createAction(ConfigurableUiActionId.AnimateToolSettings, animateToolSettings),
+  setUseToolAsToolSettingsLabel: (useToolAsToolSettingsLabel: boolean) => createAction(ConfigurableUiActionId.UseToolAsToolSettingsLabel, useToolAsToolSettingsLabel),
 };
 
 /** Union of ConfigurableUi Redux actions
@@ -127,6 +131,9 @@ export function ConfigurableUiReducer(state: ConfigurableUiState = initialState,
     case ConfigurableUiActionId.AnimateToolSettings: {
       return { ...state, animateToolSettings: action.payload };
     }
+    case ConfigurableUiActionId.UseToolAsToolSettingsLabel: {
+      return { ...state, useToolAsToolSettingsLabel: action.payload };
+    }
   }
   return outState;
 }