feat(knowledge): Adding create new hub and artifacts experience in knowledge wizard#8937
Open
preetriti1 wants to merge 2 commits intomainfrom
Open
feat(knowledge): Adding create new hub and artifacts experience in knowledge wizard#8937preetriti1 wants to merge 2 commits intomainfrom
preetriti1 wants to merge 2 commits intomainfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new “create hub / upload local artifacts” experience to the Knowledge wizard by adding a reusable file drop zone component and wiring upload + validation flows through the Knowledge Hub wizard and panels.
Changes:
- Added shared
UploadFile/UploadFileHandlertypes and implemented UI flows to upload a local file as a knowledge artifact. - Added a new
FileDropZonecomponent indesigner-uiand integrated it into the Knowledge “Add files” panel (including file list + name validation). - Updated “Create group” to validate hub names and show loading/creating states, plus added/updated unit tests and localization strings.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| libs/logic-apps-shared/src/utils/src/lib/models/knowledge.ts | Adds upload-related shared types (UploadFile, UploadFileHandler). |
| libs/designer/src/lib/ui/knowledge/wizard/knowledgehub.tsx | Wires upload handler into the wizard and passes selected hub into the panel. |
| libs/designer/src/lib/ui/knowledge/panel/styles.ts | Adds styles specific to the Add Files panel layout/table. |
| libs/designer/src/lib/ui/knowledge/panel/panelroot.tsx | Passes selected hub + upload handler into AddFilePanel. |
| libs/designer/src/lib/ui/knowledge/panel/addfile.tsx | Implements Add Files UX: drop zone, file table, validation, upload + error UI. |
| libs/designer/src/lib/ui/knowledge/panel/test/panelroot.spec.tsx | Expands panel routing tests and verifies props passed to child panels. |
| libs/designer/src/lib/ui/knowledge/panel/test/addfile.spec.tsx | Adds tests around new Add Files panel behaviors (drop zone, validation, modal). |
| libs/designer/src/lib/ui/knowledge/modals/styles.ts | Adds styling for updated Create Group modal layout. |
| libs/designer/src/lib/ui/knowledge/modals/creategroup.tsx | Adds hub-name validation and loading/creating UI to Create Group modal. |
| libs/designer/src/lib/ui/knowledge/modals/test/creategroup.spec.tsx | Adds tests for Create Group validation and loading/creating states. |
| libs/designer/src/lib/core/knowledge/utils/helper.ts | Adds upload helper + name validation helpers; adjusts create hub behavior. |
| libs/designer-ui/src/lib/index.ts | Exports the new filedropzone module. |
| libs/designer-ui/src/lib/filedropzone/styles.ts | Styling for the new FileDropZone component. |
| libs/designer-ui/src/lib/filedropzone/index.tsx | New drag/drop + browse file input component. |
| libs/designer-ui/src/lib/filedropzone/test/filedropzone.spec.tsx | Unit tests for FileDropZone interaction and filtering behavior. |
| apps/Standalone/src/knowledge/app/KnowledgeHub.tsx | Plumbs an upload implementation into KnowledgeHubWizard for Standalone. |
| Localize/lang/strings.json | Adds localized strings for new UI labels/messages. |
Comment on lines
+265
to
+270
| () => Object.keys(fileNames).filter((key) => fileNames[key]).length === selectedFiles.length, | ||
| [fileNames, selectedFiles.length] | ||
| ); | ||
|
|
||
| const handleDeleteFile = useCallback((file: UploadFile) => { | ||
| setSelectedFiles((prev) => prev.filter((f) => f.uuid !== file.uuid)); |
Comment on lines
+83
to
+86
| xhr.open('PUT', uri, true); | ||
| xhr.setRequestHeader('Content-Type', 'application/json'); | ||
| xhr.setRequestHeader('Authorization', `Bearer ${armToken}`); | ||
| xhr.setRequestHeader('Cache-Control', 'no-cache'); |
Comment on lines
+100
to
+108
| const handleCreate = useCallback( | ||
| async (e: React.MouseEvent<HTMLButtonElement>) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setIsCreating(true); | ||
| await createKnowledgeHub(resourceId, name, description); | ||
| onCreate?.(name, description); | ||
| setIsCreating(false); | ||
| }, |
Comment on lines
+158
to
+168
| const uploadFileToKnowledgeHub = async ( | ||
| siteResourceId: string, | ||
| hubName: string, | ||
| content: { file: UploadFile; name: string; description?: string }, | ||
| setIsLoading: (isLoading: boolean) => void | ||
| ): Promise<void> => { | ||
| const { file, name, description } = content; | ||
| const contentType = file.file.type || 'application/octet-stream'; | ||
|
|
||
| const uri = `https://management.azure.com${siteResourceId}/hostruntime/runtime/webhooks/workflow/api/management/knowledgehubs/${hubName}/knowledgeArtifacts/${name}?api-version=2018-11-01`; | ||
|
|
Comment on lines
+403
to
+425
| describe('Upload Functionality', () => { | ||
| it('calls onUploadArtifact when Add button is clicked', async () => { | ||
| mockOnUploadArtifact.mockResolvedValue({}); | ||
| renderComponent({ selectedHub: 'Group1' }); | ||
|
|
||
| // Add a file | ||
| const addFileButton = screen.getByTestId('add-file-button'); | ||
| fireEvent.click(addFileButton); | ||
|
|
||
| // Wait for file to be added | ||
| await waitFor(() => { | ||
| expect(screen.getByText('Files (1)')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| // Find and fill the name input (in FileList) | ||
| const nameInputs = screen.getAllByPlaceholderText('Name for the artifact'); | ||
| if (nameInputs.length > 0) { | ||
| fireEvent.change(nameInputs[0], { target: { value: 'TestArtifact' } }); | ||
| } | ||
|
|
||
| const comboboxes = screen.getAllByRole('combobox'); | ||
| expect(comboboxes.length).toBeGreaterThan(0); | ||
| // Note: The Add button will still be disabled because hasNonEmptyFileNames requires the internal state to be updated | ||
| // This test verifies the component renders correctly with files | ||
| }); |
Comment on lines
29
to
+35
| return panelView === KnowledgePanelView.AddFiles ? ( | ||
| <AddFilePanel resourceId={resourceId} mountNode={mountNode} /> | ||
| <AddFilePanel | ||
| resourceId={resourceId} | ||
| mountNode={mountNode} | ||
| selectedHub={selectedHub} | ||
| onUploadArtifact={onUploadArtifact as UploadFileHandler} | ||
| /> |
| {isDragging ? INTL_TEXT.draggingText : INTL_TEXT.mainText} | ||
| </Text> | ||
| <Text size={200} className={styles.subText}> | ||
| {INTL_TEXT.subText} |
| }, []); | ||
| const handleAddFiles = useCallback( | ||
| (hub?: KnowledgeHub) => { | ||
| setSelectedHub(hub?.id); |
Comment on lines
+249
to
+255
| onRenderItem: () => ( | ||
| <FileDropZone | ||
| accept={'.pdf,.doc,.docx,.ppt,..pptx,.xls,.xlsx,.txt,.md,.html'} | ||
| disabled={selectedFiles.length > 0} | ||
| isMultiUpload={false} | ||
| onAdd={(file) => setSelectedFiles((prev) => [...prev, file])} | ||
| /> |
|
📊 Coverage check completed. See workflow run for details. |
Elaina-Lee
approved these changes
Mar 19, 2026
takyyon
approved these changes
Mar 19, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Commit Type
Risk Level
What & Why
Added upload files component in designer-ui package.
Consumed new upload files component in AddFiles panel to be able to create artifacts from local files.
Passed in upload file function callback (multi part upload) from host portal. This will be implemented in host rather the package.
Updated all other components to enable create group and create artifacts in the wizard. Also added validation methods.
This is a new feature, so no breaking changes. Since development in backend and UI is in progress it looks like major API/versions are being changed but this is expected before a release.
Impact of Change
Test Plan
Contributors
@bonicaayala @ecfan @divyaswarnkar @bjbennet
Screenshots/Videos