From f8fff3dbdf13a4f419d01b57000f74b2b2eb641f Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 6 Aug 2024 17:25:22 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20allow=20opening?=
 =?UTF-8?q?=20Settings=20dialog=20in=20a=20controlled=20way?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I am not hundred percent sure it respects @manuhabitela's guidelines,
but for the options menu, I would need to trigger a dialog in a controlled way.

I tried to have the minimal impact on the existing settings dialog.
---
 .../controls/Options/OptionsMenu.tsx          | 54 +++++++++++--------
 .../settings/components/SettingsDialog.tsx    |  8 +--
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
index 0fb6dc40..f3ab8910 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
@@ -4,12 +4,14 @@ import {
   RiQuestionLine,
   RiSettings3Line,
 } from '@remixicon/react'
+import { useState } from 'react'
 import { styled } from '@/styled-system/jsx'
 import {
   Menu as RACMenu,
   MenuItem as RACMenuItem,
   Popover as RACPopover,
 } from 'react-aria-components'
+import { SettingsDialog } from '@/features/settings'
 
 // Styled components to be refactored
 const StyledMenu = styled(RACMenu, {
@@ -60,29 +62,35 @@ const StyledPopover = styled(RACPopover, {
 
 export const OptionsMenu = () => {
   const { t } = useTranslation('rooms')
-
+  const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false)
   return (
-    <StyledPopover>
-      <StyledMenu>
-        <StyledMenuItem
-          href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
-          target="_blank"
-        >
-          <RiQuestionLine size={18} />
-          {t('options.items.support')}
-        </StyledMenuItem>
-        <StyledMenuItem
-          href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-          target="_blank"
-        >
-          <RiFeedbackLine size={18} />
-          {t('options.items.feedbacks')}
-        </StyledMenuItem>
-        <StyledMenuItem onAction={() => alert('delete')}>
-          <RiSettings3Line size={18} />
-          {t('options.items.settings')}
-        </StyledMenuItem>
-      </StyledMenu>
-    </StyledPopover>
+    <>
+      <StyledPopover>
+        <StyledMenu>
+          <StyledMenuItem
+            href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
+            target="_blank"
+          >
+            <RiQuestionLine size={18} />
+            {t('options.items.support')}
+          </StyledMenuItem>
+          <StyledMenuItem
+            href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+            target="_blank"
+          >
+            <RiFeedbackLine size={18} />
+            {t('options.items.feedbacks')}
+          </StyledMenuItem>
+          <StyledMenuItem onAction={() => setIsSettingsDialogOpen(true)}>
+            <RiSettings3Line size={18} />
+            {t('options.items.settings')}
+          </StyledMenuItem>
+        </StyledMenu>
+      </StyledPopover>
+      <SettingsDialog
+        isOpen={isSettingsDialogOpen}
+        onOpenChange={(v) => setIsSettingsDialogOpen(v)}
+      />
+    </>
   )
 }
diff --git a/src/frontend/src/features/settings/components/SettingsDialog.tsx b/src/frontend/src/features/settings/components/SettingsDialog.tsx
index 69a65182..ea4aabfa 100644
--- a/src/frontend/src/features/settings/components/SettingsDialog.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialog.tsx
@@ -1,12 +1,14 @@
 import { useTranslation } from 'react-i18next'
 import { useLanguageLabels } from '@/i18n/useLanguageLabels'
-import { Dialog, Field, H } from '@/primitives'
+import { Dialog, type DialogProps, Field, H } from '@/primitives'
 
-export const SettingsDialog = () => {
+export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
+
+export const SettingsDialog = (props: SettingsDialogProps) => {
   const { t, i18n } = useTranslation('settings')
   const { languagesList, currentLanguage } = useLanguageLabels()
   return (
-    <Dialog title={t('dialog.heading')}>
+    <Dialog title={t('dialog.heading')} {...props}>
       <H lvl={2}>{t('language.heading')}</H>
       <Field
         type="select"