From 88c983a99bb20fdb4630a3f6316d5d615e13d65c Mon Sep 17 00:00:00 2001 From: Jordan Berger Date: Thu, 7 Mar 2024 16:51:40 -0700 Subject: [PATCH 1/8] Add style option to allow for file type narrowing --- packages/api/src/StyleOptions.ts | 5 +++++ packages/api/src/defaultStyleOptions.ts | 1 + packages/component/src/SendBox/UploadButton.tsx | 11 +++++++---- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts index e743bf2532..0a9e6ca908 100644 --- a/packages/api/src/StyleOptions.ts +++ b/packages/api/src/StyleOptions.ts @@ -258,6 +258,11 @@ type StyleOptions = { hideUploadButton?: boolean; microphoneButtonColorOnDictate?: string; sendBoxBackground?: string; + /** + * The file type that the attachment button should accept. + * @example 'image/*,.pdf' + */ + attachmentAccept?: string; /** Send box button: Icon color, defaults to subtle */ sendBoxButtonColor?: string; diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts index d1543dc7b3..97abc00341 100644 --- a/packages/api/src/defaultStyleOptions.ts +++ b/packages/api/src/defaultStyleOptions.ts @@ -95,6 +95,7 @@ const DEFAULT_OPTIONS: Required = { hideUploadButton: false, microphoneButtonColorOnDictate: '#F33', sendBoxBackground: 'White', + attachmentAccept: '*', // Send box buttons sendBoxButtonColor: undefined, diff --git a/packages/component/src/SendBox/UploadButton.tsx b/packages/component/src/SendBox/UploadButton.tsx index 87bc821362..cfbe7b9928 100644 --- a/packages/component/src/SendBox/UploadButton.tsx +++ b/packages/component/src/SendBox/UploadButton.tsx @@ -3,13 +3,14 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React, { FC, useCallback, useRef } from 'react'; -import AttachmentIcon from './Assets/AttachmentIcon'; -import connectToWebChat from '../connectToWebChat'; +import { useStyleOptions } from 'botframework-webchat-api/lib/hooks'; import downscaleImageToDataURL from '../Utils/downscaleImageToDataURL/index'; -import IconButton from './IconButton'; +import connectToWebChat from '../connectToWebChat'; +import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject'; import useSendFiles from '../hooks/useSendFiles'; import useStyleSet from '../hooks/useStyleSet'; -import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject'; +import AttachmentIcon from './Assets/AttachmentIcon'; +import IconButton from './IconButton'; const { useDisabled, useLocalizer } = hooks; @@ -95,6 +96,7 @@ type UploadButtonProps = { const UploadButton: FC = ({ className }) => { const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet(); + const [{ attachmentAccept }] = useStyleOptions(); const [disabled] = useDisabled(); const inputRef = useRef(); const localize = useLocalizer(); @@ -122,6 +124,7 @@ const UploadButton: FC = ({ className }) => { return (
Date: Fri, 8 Mar 2024 08:24:35 -0700 Subject: [PATCH 2/8] Rename and add multi upload prop --- packages/api/src/StyleOptions.ts | 9 +++++++-- packages/api/src/defaultStyleOptions.ts | 3 ++- packages/component/src/SendBox/UploadButton.tsx | 6 +++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts index 0a9e6ca908..79c8c3cfb2 100644 --- a/packages/api/src/StyleOptions.ts +++ b/packages/api/src/StyleOptions.ts @@ -258,11 +258,16 @@ type StyleOptions = { hideUploadButton?: boolean; microphoneButtonColorOnDictate?: string; sendBoxBackground?: string; + /** - * The file type that the attachment button should accept. + * The comma-delimited file types that the upload button should accept. * @example 'image/*,.pdf' */ - attachmentAccept?: string; + uploadFileTypes?: string; + /** + * If true, the upload button will accept multiple files. + */ + uploadMultiple?: boolean; /** Send box button: Icon color, defaults to subtle */ sendBoxButtonColor?: string; diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts index 97abc00341..2606028072 100644 --- a/packages/api/src/defaultStyleOptions.ts +++ b/packages/api/src/defaultStyleOptions.ts @@ -95,7 +95,8 @@ const DEFAULT_OPTIONS: Required = { hideUploadButton: false, microphoneButtonColorOnDictate: '#F33', sendBoxBackground: 'White', - attachmentAccept: '*', + uploadFileTypes: '*', + uploadMultiple: true, // Send box buttons sendBoxButtonColor: undefined, diff --git a/packages/component/src/SendBox/UploadButton.tsx b/packages/component/src/SendBox/UploadButton.tsx index cfbe7b9928..3fcb9e5c45 100644 --- a/packages/component/src/SendBox/UploadButton.tsx +++ b/packages/component/src/SendBox/UploadButton.tsx @@ -96,7 +96,7 @@ type UploadButtonProps = { const UploadButton: FC = ({ className }) => { const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet(); - const [{ attachmentAccept }] = useStyleOptions(); + const [{ uploadFileTypes, uploadMultiple }] = useStyleOptions(); const [disabled] = useDisabled(); const inputRef = useRef(); const localize = useLocalizer(); @@ -124,11 +124,11 @@ const UploadButton: FC = ({ className }) => { return (
Date: Fri, 8 Mar 2024 08:24:53 -0700 Subject: [PATCH 3/8] Fix launch config type --- .vscode/launch.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 064e105086..8a476bb025 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -5,7 +5,7 @@ "version": "0.2.0", "configurations": [ { - "type": "edge", + "type": "msedge", "request": "launch", "name": "Launch Microsoft Edge", "url": "http://localhost:5000/samples/", From 63056295e1190c01e333093c94895e9cddc6140d Mon Sep 17 00:00:00 2001 From: ms-jb Date: Mon, 11 Mar 2024 09:55:15 -0600 Subject: [PATCH 4/8] Add e2e test to validate --- .../html/attachment.allowedFileTypes.html | 38 +++++++++++++++++++ __tests__/html/attachment.allowedFileTypes.js | 6 +++ 2 files changed, 44 insertions(+) create mode 100644 __tests__/html/attachment.allowedFileTypes.html create mode 100644 __tests__/html/attachment.allowedFileTypes.js diff --git a/__tests__/html/attachment.allowedFileTypes.html b/__tests__/html/attachment.allowedFileTypes.html new file mode 100644 index 0000000000..88f3546d97 --- /dev/null +++ b/__tests__/html/attachment.allowedFileTypes.html @@ -0,0 +1,38 @@ + + + + + + + + + +
+ + + diff --git a/__tests__/html/attachment.allowedFileTypes.js b/__tests__/html/attachment.allowedFileTypes.js new file mode 100644 index 0000000000..a9987e7163 --- /dev/null +++ b/__tests__/html/attachment.allowedFileTypes.js @@ -0,0 +1,6 @@ +/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */ + +describe('Attachment', () => { + test('with allowed file types', () => + runHTML('attachment.allowedFileTypes.html')); +}); From 5ed4b0dc1d01bf331049107e8054fe6dc6868505 Mon Sep 17 00:00:00 2001 From: ms-jb Date: Tue, 19 Mar 2024 10:22:05 -0600 Subject: [PATCH 5/8] Resolve comments --- __tests__/html/attachment.allowedFileTypes.html | 4 ++-- packages/api/src/StyleOptions.ts | 4 +++- packages/api/src/defaultStyleOptions.ts | 4 ++-- packages/component/src/SendBox/UploadButton.tsx | 7 +++---- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/__tests__/html/attachment.allowedFileTypes.html b/__tests__/html/attachment.allowedFileTypes.html index 88f3546d97..43954df30e 100644 --- a/__tests__/html/attachment.allowedFileTypes.html +++ b/__tests__/html/attachment.allowedFileTypes.html @@ -18,7 +18,7 @@ directLine, store: testHelpers.createStore(), styleOptions: { - uploadFileTypes: 'image/*', + uploadAccept: 'image/*', uploadMultiple: false } }, @@ -28,7 +28,7 @@ await pageConditions.uiConnected(); // Validate the element has the correct file types - const input = document.querySelector('input[type="file"]'); + const input = pageElements.uploadButton() expect(input).toHaveProperty('accept', 'image/*'); expect(input).toHaveProperty('multiple', false); diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts index 79c8c3cfb2..251432b47e 100644 --- a/packages/api/src/StyleOptions.ts +++ b/packages/api/src/StyleOptions.ts @@ -261,11 +261,13 @@ type StyleOptions = { /** * The comma-delimited file types that the upload button should accept. + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept * @example 'image/*,.pdf' */ - uploadFileTypes?: string; + uploadAccept?: string; /** * If true, the upload button will accept multiple files. + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple */ uploadMultiple?: boolean; diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts index 2606028072..fb2e75572f 100644 --- a/packages/api/src/defaultStyleOptions.ts +++ b/packages/api/src/defaultStyleOptions.ts @@ -95,8 +95,8 @@ const DEFAULT_OPTIONS: Required = { hideUploadButton: false, microphoneButtonColorOnDictate: '#F33', sendBoxBackground: 'White', - uploadFileTypes: '*', - uploadMultiple: true, + uploadAccept: undefined, + uploadMultiple: undefined, // Send box buttons sendBoxButtonColor: undefined, diff --git a/packages/component/src/SendBox/UploadButton.tsx b/packages/component/src/SendBox/UploadButton.tsx index 3fcb9e5c45..cd14eba1d8 100644 --- a/packages/component/src/SendBox/UploadButton.tsx +++ b/packages/component/src/SendBox/UploadButton.tsx @@ -3,7 +3,6 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React, { FC, useCallback, useRef } from 'react'; -import { useStyleOptions } from 'botframework-webchat-api/lib/hooks'; import downscaleImageToDataURL from '../Utils/downscaleImageToDataURL/index'; import connectToWebChat from '../connectToWebChat'; import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject'; @@ -12,7 +11,7 @@ import useStyleSet from '../hooks/useStyleSet'; import AttachmentIcon from './Assets/AttachmentIcon'; import IconButton from './IconButton'; -const { useDisabled, useLocalizer } = hooks; +const { useDisabled, useLocalizer, useStyleOptions } = hooks; const ROOT_STYLE = { '&.webchat__upload-button': { @@ -96,7 +95,7 @@ type UploadButtonProps = { const UploadButton: FC = ({ className }) => { const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet(); - const [{ uploadFileTypes, uploadMultiple }] = useStyleOptions(); + const [{ uploadAccept, uploadMultiple }] = useStyleOptions(); const [disabled] = useDisabled(); const inputRef = useRef(); const localize = useLocalizer(); @@ -124,7 +123,7 @@ const UploadButton: FC = ({ className }) => { return (
Date: Tue, 19 Mar 2024 10:38:55 -0600 Subject: [PATCH 6/8] Revert to true --- packages/api/src/defaultStyleOptions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts index fb2e75572f..9b4ed3efda 100644 --- a/packages/api/src/defaultStyleOptions.ts +++ b/packages/api/src/defaultStyleOptions.ts @@ -96,7 +96,7 @@ const DEFAULT_OPTIONS: Required = { microphoneButtonColorOnDictate: '#F33', sendBoxBackground: 'White', uploadAccept: undefined, - uploadMultiple: undefined, + uploadMultiple: true, // Send box buttons sendBoxButtonColor: undefined, From e57ca0b924f0b08c2fb4498f2f670ec8d415893b Mon Sep 17 00:00:00 2001 From: ms-jb Date: Tue, 19 Mar 2024 10:47:07 -0600 Subject: [PATCH 7/8] Resolve e2e test --- __tests__/html/attachment.allowedFileTypes.html | 6 +++--- packages/test/page-object/src/globals/pageElements/index.js | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/__tests__/html/attachment.allowedFileTypes.html b/__tests__/html/attachment.allowedFileTypes.html index 43954df30e..42467e6582 100644 --- a/__tests__/html/attachment.allowedFileTypes.html +++ b/__tests__/html/attachment.allowedFileTypes.html @@ -28,9 +28,9 @@ await pageConditions.uiConnected(); // Validate the element has the correct file types - const input = pageElements.uploadButton() - expect(input).toHaveProperty('accept', 'image/*'); - expect(input).toHaveProperty('multiple', false); + const uploadButton = pageElements.uploadButton() + expect(uploadButton).toHaveProperty('accept', 'image/*'); + expect(uploadButton).toHaveProperty('multiple', false); }); diff --git a/packages/test/page-object/src/globals/pageElements/index.js b/packages/test/page-object/src/globals/pageElements/index.js index ac707b33e2..099ed68c33 100644 --- a/packages/test/page-object/src/globals/pageElements/index.js +++ b/packages/test/page-object/src/globals/pageElements/index.js @@ -19,6 +19,7 @@ import transcript from './transcript'; import transcriptLiveRegion from './transcriptLiveRegion'; import transcriptScrollable from './transcriptScrollable'; import transcriptTerminator from './transcriptTerminator'; +import uploadButton from './uploadButton'; export { activeActivity, @@ -41,5 +42,6 @@ export { transcript, transcriptLiveRegion, transcriptScrollable, - transcriptTerminator + transcriptTerminator, + uploadButton }; From c85ffac65ac9cdcd353e2291f9b2378d24e782a7 Mon Sep 17 00:00:00 2001 From: ms-jb Date: Wed, 20 Mar 2024 10:11:30 -0600 Subject: [PATCH 8/8] Added changelog entry --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 537eeeabe8..e2910656b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Resolves [#5081](https://github.com/microsoft/BotFramework-WebChat/issues/5081). Added `uploadAccept` and `uploadMultiple` style options, by [@ms-jb](https://github.com/ms-jb) + ### Changed - Moved pull request validation pipeline to GitHub Actions, by [@compulim](https://github.com/compulim), in PR [#4976](https://github.com/microsoft/BotFramework-WebChat/pull/4976)