fixes issue with dialog triggers, enables conversation list scrolling…

…, announce conversation creator (microsoft#184)
momuno · Oct 30, 2024 · d014275 · d014275
1 parent 8dd28f4
commit d014275
Show file tree

Hide file tree

Showing 34 changed files with 202 additions and 315 deletions.
diff --git a/workbench-app/src/components/App/DialogControl.tsx b/workbench-app/src/components/App/DialogControl.tsx
@@ -33,19 +33,21 @@ export const DialogControl: React.FC<DialogControlContent> = (props) => {
 
     return (
         <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-            <DialogTrigger>{trigger}</DialogTrigger>
+            <DialogTrigger disableButtonEnhancement>{trigger}</DialogTrigger>
             <DialogSurface className={classNames?.dialogSurface}>
                 <DialogBody>
                     {title && <DialogTitle>{title}</DialogTitle>}
                     {content && <DialogContent className={classNames?.dialogContent}>{content}</DialogContent>}
-                    <DialogActions>
-                        <DialogTrigger>
+                    <DialogActions fluid>
+                        <DialogTrigger disableButtonEnhancement>
                             <Button appearance={additionalActions ? 'secondary' : 'primary'}>
                                 {closeLabel ?? 'Close'}
                             </Button>
                         </DialogTrigger>
                         {additionalActions?.map((action, index) => (
-                            <DialogTrigger key={index}>{action}</DialogTrigger>
+                            <DialogTrigger key={index} disableButtonEnhancement>
+                                {action}
+                            </DialogTrigger>
                         ))}
                     </DialogActions>
                 </DialogBody>

diff --git a/.../src/components/AssistantServiceRegistrations/AssistantServiceRegistrationApiKeyReset.tsx b/.../src/components/AssistantServiceRegistrations/AssistantServiceRegistrationApiKeyReset.tsx
@@ -73,7 +73,7 @@ export const AssistantServiceRegistrationApiKeyReset: React.FC<AssistantServiceR
                     ),
                     closeLabel: 'Cancel',
                     additionalActions: [
-                        <DialogTrigger key="reset">
+                        <DialogTrigger key="reset" disableButtonEnhancement>
                             <Button appearance="primary" onClick={handleReset}>
                                 Reset
                             </Button>

diff --git a/...h-app/src/components/AssistantServiceRegistrations/AssistantServiceRegistrationCreate.tsx b/...h-app/src/components/AssistantServiceRegistrations/AssistantServiceRegistrationCreate.tsx
@@ -5,6 +5,7 @@ import {
     Checkbox,
     DialogOpenChangeData,
     DialogOpenChangeEvent,
+    DialogTrigger,
     Field,
     Input,
     makeStyles,
@@ -161,9 +162,11 @@ export const AssistantServiceRegistrationCreate: React.FC<AssistantServiceRegist
                     </>
                 }
                 additionalActions={[
-                    <Button key="save" appearance="primary" onClick={handleSave} disabled={!valid || submitted}>
-                        Save
-                    </Button>,
+                    <DialogTrigger key="save" disableButtonEnhancement>
+                        <Button appearance="primary" onClick={handleSave} disabled={!valid || submitted}>
+                            Save
+                        </Button>
+                    </DialogTrigger>,
                 ]}
                 closeLabel="Cancel"
             />

diff --git a/...h-app/src/components/AssistantServiceRegistrations/AssistantServiceRegistrationRemove.tsx b/...h-app/src/components/AssistantServiceRegistrations/AssistantServiceRegistrationRemove.tsx
@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+import { DialogTrigger } from '@fluentui/react-components';
 import { DeleteRegular } from '@fluentui/react-icons';
 import React from 'react';
 import { AssistantServiceRegistration } from '../../models/AssistantServiceRegistration';
@@ -42,12 +43,13 @@ export const AssistantServiceRegistrationRemove: React.FC<AssistantServiceRegist
                 ),
                 closeLabel: 'Cancel',
                 additionalActions: [
-                    <CommandButton
-                        key="delete"
-                        icon={<DeleteRegular />}
-                        label="Delete"
-                        onClick={handleAssistantServiceRegistrationRemove}
-                    />,
+                    <DialogTrigger key="delete" disableButtonEnhancement>
+                        <CommandButton
+                            icon={<DeleteRegular />}
+                            label="Delete"
+                            onClick={handleAssistantServiceRegistrationRemove}
+                        />
+                    </DialogTrigger>,
                 ],
             }}
         />

diff --git a/workbench-app/src/components/Assistants/ApplyConfigButton.tsx b/workbench-app/src/components/Assistants/ApplyConfigButton.tsx
@@ -95,7 +95,7 @@ export const ApplyConfigButton: React.FC<ApplyConfigButtonProps> = (props) => {
                     ),
                     closeLabel: 'Cancel',
                     additionalActions: [
-                        <DialogTrigger key="apply">
+                        <DialogTrigger key="apply" disableButtonEnhancement>
                             <Button appearance="primary" onClick={handleApply}>
                                 Confirm
                             </Button>

diff --git a/workbench-app/src/components/Assistants/AssistantCreate.tsx b/workbench-app/src/components/Assistants/AssistantCreate.tsx
@@ -278,7 +278,7 @@ export const AssistantCreate: React.FC<AssistantCreateProps> = (props) => {
                             <DialogTrigger disableButtonEnhancement>
                                 <Button appearance="secondary">Cancel</Button>
                             </DialogTrigger>
-                            <DialogTrigger>
+                            <DialogTrigger disableButtonEnhancement>
                                 <Button
                                     disabled={!name || !assistantServiceId || submitted}
                                     appearance="primary"

diff --git a/workbench-app/src/components/Assistants/AssistantDelete.tsx b/workbench-app/src/components/Assistants/AssistantDelete.tsx
@@ -39,7 +39,7 @@ export const AssistantDelete: React.FC<AssistantDeleteProps> = (props) => {
                 ),
                 closeLabel: 'Cancel',
                 additionalActions: [
-                    <DialogTrigger key="delete">
+                    <DialogTrigger key="delete" disableButtonEnhancement>
                         <Button appearance="primary" onClick={handleDelete}>
                             Delete
                         </Button>

diff --git a/workbench-app/src/components/Assistants/AssistantDuplicate.tsx b/workbench-app/src/components/Assistants/AssistantDuplicate.tsx
@@ -40,7 +40,7 @@ export const AssistantDuplicate: React.FC<AssistantDuplicateProps> = (props) =>
                 content: <p>Are you sure you want to duplicate this assistant?</p>,
                 closeLabel: 'Cancel',
                 additionalActions: [
-                    <DialogTrigger key="duplicate">
+                    <DialogTrigger key="duplicate" disableButtonEnhancement>
                         <Button appearance="primary" onClick={duplicateAssistant}>
                             Duplicate
                         </Button>

diff --git a/workbench-app/src/components/Assistants/AssistantRemove.tsx b/workbench-app/src/components/Assistants/AssistantRemove.tsx
@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+import { DialogTrigger } from '@fluentui/react-components';
 import { PlugDisconnectedRegular } from '@fluentui/react-icons';
 import React from 'react';
 import { Conversation } from '../../models/Conversation';
@@ -52,12 +53,13 @@ export const AssistantRemove: React.FC<AssistantRemoveProps> = (props) => {
                 ),
                 closeLabel: 'Cancel',
                 additionalActions: [
-                    <CommandButton
-                        key="remove"
-                        icon={<PlugDisconnectedRegular />}
-                        label="Remove"
-                        onClick={handleAssistantRemove}
-                    />,
+                    <DialogTrigger key="remove" disableButtonEnhancement>
+                        <CommandButton
+                            icon={<PlugDisconnectedRegular />}
+                            label="Remove"
+                            onClick={handleAssistantRemove}
+                        />
+                    </DialogTrigger>,
                 ],
             }}
         />

diff --git a/workbench-app/src/components/Assistants/AssistantRename.tsx b/workbench-app/src/components/Assistants/AssistantRename.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { Field, Input } from '@fluentui/react-components';
+import { DialogTrigger, Field, Input } from '@fluentui/react-components';
 import { EditRegular } from '@fluentui/react-icons';
 import React from 'react';
 import { CommandButton } from '../App/CommandButton';
@@ -39,13 +39,14 @@ export const AssistantRename: React.FC<AssistantRenameProps> = (props) => {
                 ),
                 closeLabel: 'Cancel',
                 additionalActions: [
-                    <CommandButton
-                        key="rename"
-                        disabled={!name || submitted}
-                        label={submitted ? 'Renaming...' : 'Rename'}
-                        onClick={handleRename}
-                        appearance="primary"
-                    />,
+                    <DialogTrigger key="rename" disableButtonEnhancement>
+                        <CommandButton
+                            disabled={!name || submitted}
+                            label={submitted ? 'Renaming...' : 'Rename'}
+                            onClick={handleRename}
+                            appearance="primary"
+                        />
+                    </DialogTrigger>,
                 ],
             }}
         />

diff --git a/workbench-app/src/components/Conversations/ConversationCreate.tsx b/workbench-app/src/components/Conversations/ConversationCreate.tsx
@@ -4,6 +4,7 @@ import {
     Button,
     DialogOpenChangeData,
     DialogOpenChangeEvent,
+    DialogTrigger,
     Field,
     Input,
     makeStyles,
@@ -91,9 +92,11 @@ export const ConversationCreate: React.FC<ConversationCreateProps> = (props) =>
             }
             closeLabel="Cancel"
             additionalActions={[
-                <Button key="save" disabled={!title || submitted} appearance="primary" onClick={handleSave}>
-                    {submitted ? 'Saving...' : 'Save'}
-                </Button>,
+                <DialogTrigger key="save" disableButtonEnhancement>
+                    <Button disabled={!title || submitted} appearance="primary" onClick={handleSave}>
+                        {submitted ? 'Saving...' : 'Save'}
+                    </Button>
+                </DialogTrigger>,
             ]}
         />
     );

diff --git a/workbench-app/src/components/Conversations/ConversationDuplicate.tsx b/workbench-app/src/components/Conversations/ConversationDuplicate.tsx
@@ -29,7 +29,7 @@ const useConversationDuplicateControls = (ids: string[]) => {
         onDuplicate?: (conversationId: string) => void,
         onDuplicateError?: (error: Error) => void,
     ) => (
-        <DialogTrigger>
+        <DialogTrigger disableButtonEnhancement>
             <Button appearance="primary" onClick={() => duplicateConversations(onDuplicate, onDuplicateError)}>
                 Duplicate
             </Button>

diff --git a/workbench-app/src/components/Conversations/ConversationRemove.tsx b/workbench-app/src/components/Conversations/ConversationRemove.tsx
@@ -31,7 +31,7 @@ const useConversationRemoveControls = () => {
     const removeConversationForm = () => <p>Are you sure you want to remove this conversation from your list?</p>;
 
     const removeConversationButton = (conversationId: string, participantId: string, onRemove?: () => void) => (
-        <DialogTrigger>
+        <DialogTrigger disableButtonEnhancement>
             <Button appearance="primary" onClick={() => handleRemove(conversationId, participantId, onRemove)}>
                 Remove
             </Button>

diff --git a/workbench-app/src/components/Conversations/ConversationRename.tsx b/workbench-app/src/components/Conversations/ConversationRename.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { Button, Field, Input } from '@fluentui/react-components';
+import { Button, DialogTrigger, Field, Input } from '@fluentui/react-components';
 import { EditRegular } from '@fluentui/react-icons';
 import React from 'react';
 import { useUpdateConversationMutation } from '../../services/workbench';
@@ -40,9 +40,11 @@ export const useConversationRenameControls = (id: string, value: string) => {
     );
 
     const renameConversationButton = (onRename?: (id: string, value: string) => Promise<void>) => (
-        <Button disabled={!newTitle || submitted} onClick={() => handleRename(onRename)} appearance="primary">
-            {submitted ? 'Renaming...' : 'Rename'}
-        </Button>
+        <DialogTrigger disableButtonEnhancement>
+            <Button disabled={!newTitle || submitted} onClick={() => handleRename(onRename)} appearance="primary">
+                {submitted ? 'Renaming...' : 'Rename'}
+            </Button>
+        </DialogTrigger>
     );
 
     return {

diff --git a/workbench-app/src/components/Conversations/ConversationShareCreate.tsx b/workbench-app/src/components/Conversations/ConversationShareCreate.tsx
@@ -4,6 +4,7 @@ import {
     Button,
     DialogOpenChangeData,
     DialogOpenChangeEvent,
+    DialogTrigger,
     Field,
     Input,
     makeStyles,
@@ -126,9 +127,11 @@ export const ConversationShareCreate: React.FC<ConversationShareCreateProps> = (
             }
             closeLabel="Cancel"
             additionalActions={[
-                <Button key="create" disabled={!shareLabel || submitted} onClick={handleCreate} appearance="primary">
-                    {submitted ? 'Creating...' : 'Create'}
-                </Button>,
+                <DialogTrigger key="create" disableButtonEnhancement>
+                    <Button disabled={!shareLabel || submitted} onClick={handleCreate} appearance="primary">
+                        {submitted ? 'Creating...' : 'Create'}
+                    </Button>
+                </DialogTrigger>,
             ]}
         />
     );

diff --git a/workbench-app/src/components/Conversations/FileItem.tsx b/workbench-app/src/components/Conversations/FileItem.tsx
@@ -144,7 +144,7 @@ export const FileItem: React.FC<FileItemProps> = (props) => {
                                 ),
                                 closeLabel: 'Cancel',
                                 additionalActions: [
-                                    <DialogTrigger key="delete">
+                                    <DialogTrigger key="delete" disableButtonEnhancement>
                                         <Button appearance="primary" onClick={handleDelete}>
                                             Delete
                                         </Button>

diff --git a/workbench-app/src/components/Conversations/MessageDelete.tsx b/workbench-app/src/components/Conversations/MessageDelete.tsx
@@ -49,7 +49,7 @@ export const MessageDelete: React.FC<MessageDeleteProps> = (props) => {
                 ),
                 closeLabel: 'Cancel',
                 additionalActions: [
-                    <DialogTrigger key="delete">
+                    <DialogTrigger key="delete" disableButtonEnhancement>
                         <Button appearance="primary" onClick={handleDelete}>
                             Delete
                         </Button>

diff --git a/workbench-app/src/components/Conversations/RewindConversation.tsx b/workbench-app/src/components/Conversations/RewindConversation.tsx
@@ -111,12 +111,12 @@ export const RewindConversation: React.FC<RewindConversationProps> = (props) =>
                 ),
                 closeLabel: 'Cancel',
                 additionalActions: [
-                    <DialogTrigger key="rewind">
+                    <DialogTrigger key="rewind" disableButtonEnhancement>
                         <Button appearance="primary" onClick={handleRewind}>
                             Rewind
                         </Button>
                     </DialogTrigger>,
-                    <DialogTrigger key="rewindWithRedo">
+                    <DialogTrigger key="rewindWithRedo" disableButtonEnhancement>
                         <Button onClick={handleRewindWithRedo}>Rewind with Redo</Button>
                     </DialogTrigger>,
                 ],

diff --git a/workbench-app/src/components/Conversations/ShareRemove.tsx b/workbench-app/src/components/Conversations/ShareRemove.tsx
@@ -38,7 +38,7 @@ export const ShareRemove: React.FC<ShareRemoveProps> = (props) => {
                 content: <p>Are you sure you want to delete this share?</p>,
                 closeLabel: 'Cancel',
                 additionalActions: [
-                    <DialogTrigger key="delete">
+                    <DialogTrigger key="delete" disableButtonEnhancement>
                         <Button appearance="primary" onClick={handleDelete}>
                             Delete
                         </Button>

diff --git a/workbench-app/src/components/FrontDoor/Controls/NewConversationButton.tsx b/workbench-app/src/components/FrontDoor/Controls/NewConversationButton.tsx
@@ -16,7 +16,11 @@ export const NewConversationButton: React.FC = () => {
                 title: 'New Conversation',
                 content: createConversationForm(),
                 closeLabel: 'Cancel',
-                additionalActions: [<DialogTrigger key="create">{createConversationSubmitButton()}</DialogTrigger>],
+                additionalActions: [
+                    <DialogTrigger key="create" disableButtonEnhancement>
+                        {createConversationSubmitButton()}
+                    </DialogTrigger>,
+                ],
             }}
         />
     );