feat(ui): fix state bug in ToggleButton (#1180)

* add back useEffect fixing bug

* add back useEffect fixing bug

* add changeset

* add test

* mock handlers

* remove mock handlers

Author: guoda-puidokaite

.changeset/green-trees-cut.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Added `ToggleButton` and `SortButton` components.

packages/ui-components/src/components/ToggleButton/ToggleButton.component.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, ReactNode } from "react"
+import React, { useState, ReactNode, useEffect } from "react"
 import { Button, ButtonProps } from "../Button"
 
 type Option<T> = T | { value: T; label?: ReactNode }
@@ -24,8 +24,13 @@ export const ToggleButton = <T extends string | number>({
 }: ToggleButtonProps<T>) => {
   const extractValue = (option: Option<T>): T => (typeof option === "object" ? option.value : option)
 
-  const initialValue = value !== undefined ? value : extractValue(options[0])
-  const [currentValue, setCurrentValue] = useState<T>(initialValue)
+  const [currentValue, setCurrentValue] = useState<T>(value ?? extractValue(options[0]))
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setCurrentValue(value)
+    }
+  }, [value])
 
   const handleButtonClick = () => {
     const currentIndex = options.findIndex((opt) => extractValue(opt) === currentValue)

packages/ui-components/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -5,7 +5,6 @@
 
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
-
 import { ToggleButton } from "./ToggleButton.component"
 import { Icon } from "../Icon"
 import { KnownIcons } from "../Icon/Icon.component"

packages/ui-components/src/components/ToggleButton/ToggleButton.test.tsx

@@ -123,4 +123,19 @@ describe("ToggleButton Component", () => {
     expect(button).toHaveTextContent("option1")
     expect(handleChange).toHaveBeenCalledWith("option1")
   })
+
+  it("updates display when value prop is changed", async () => {
+    const options = ["option1", "option2"]
+    const { rerender } = render(<ToggleButton options={options} value="option1" />)
+
+    const button = screen.getByRole("button")
+    expect(button).toHaveTextContent("option1")
+
+    rerender(<ToggleButton options={options} value="option2" />)
+    expect(button).toHaveTextContent("option2")
+    await userEvent.click(button)
+    expect(button).toHaveTextContent("option1")
+    await userEvent.click(button)
+    expect(button).toHaveTextContent("option2")
+  })
 })