fix: default Style tab upon widget selection

packages/dashboard/src/customization/propertiesSections/propertiesPanel/panel.spec.tsx

@@ -5,6 +5,7 @@ import {
   RenderResult,
   act,
   cleanup,
+  fireEvent,
   render,
   screen,
 } from '@testing-library/react';
@@ -14,7 +15,10 @@ import { Provider } from 'react-redux';
 import { PropertiesPanel } from './panel';
 import { configureDashboardStore } from '~/store';
 import { DashboardState } from '~/store/state';
-import { MOCK_LINE_CHART_WIDGET } from '../../../../testing/mocks';
+import {
+  MOCK_KPI_WIDGET,
+  MOCK_LINE_CHART_WIDGET,
+} from '../../../../testing/mocks';
 import { mockAssetDescription } from '../../../../testing/mocks/siteWiseSDK';
 import { SiteWiseAssetQuery } from '@iot-app-kit/source-iotsitewise';
 import { QueryWidget } from '~/customization/widgets/types';
@@ -148,13 +152,27 @@ describe(`${PropertiesPanel.name}`, () => {
     expect(screen.getByText('Axis')).toBeVisible();
     expect(screen.getByText('Settings')).toBeVisible();
   });
-
-  it('should render the style section', async () => {
+  it('should render the style section when switched between widgets', async () => {
     await renderTestComponentAsync();
 
     expect(screen.getByText('Style')).toBeVisible();
     expect(screen.getByText('Axis')).toBeVisible();
     expect(screen.getByText('Settings')).toBeVisible();
+
+    const thresholdsTab = screen.getByTestId('thresholds');
+    expect(thresholdsTab).toBeVisible();
+
+    fireEvent.click(thresholdsTab);
+    expect(thresholdsTab).toHaveFocus();
+    expect(screen.getByText('Add a threshold')).toBeVisible();
+
+    const options = {
+      widgets: [MOCK_KPI_WIDGET],
+      selectedWidgets: [MOCK_KPI_WIDGET],
+    };
+
+    await renderTestComponentAsync(options);
+    expect(screen.getByText('Settings')).toBeVisible();
   });
 
   it('should render an empty thresholds section', async () => {

packages/dashboard/src/customization/propertiesSections/propertiesPanel/panel.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import Box from '@cloudscape-design/components/box';
 import Tabs from '@cloudscape-design/components/tabs';
 import SpaceBetween from '@cloudscape-design/components/space-between';
@@ -8,14 +8,24 @@ import { StylesSection } from './styleTab';
 import { PropertiesAndAlarmsSettingsConfiguration } from '../propertiesAndAlarmsSettings';
 import { ThresholdSettingsConfiguration } from '../thresholdSettings';
 import { isJust } from '~/util/maybe';
+import { useSelectedWidgets } from '~/hooks/useSelectedWidgets';
 
 /** Panel element responsible for rendering chart configuration sections. */
 export const PropertiesPanel = () => {
   const selection = useSelection();
+  const selectedWidgets = useSelectedWidgets();
+  const selectedWidgetId = selectedWidgets[0]?.id;
+  const [activeTabId, setActiveTabId] = useState('style');
+
+  useLayoutEffect(() => {
+    setActiveTabId('style'); // Default "Style" tab upon widget selection
+  }, [selectedWidgetId]);
 
   return selection ? (
     <Box>
       <Tabs
+        onChange={({ detail }) => setActiveTabId(detail.activeTabId)}
+        activeTabId={activeTabId}
         disableContentPaddings
         tabs={[
           {