From f2499b46ec9fd91ad0b66e8b41cc1974b07fb210 Mon Sep 17 00:00:00 2001 From: Weston Dransfield Date: Mon, 28 Mar 2022 11:17:53 -0600 Subject: [PATCH] Add replacement chain context to file request refs MAT-804 flag=buttons_and_icons_root_account Test Plan: 1. Checkout g/288281 in canvas-rce-api 2. Build canvas JS bundles and canvas-rce 4. Navigate to a Canvas course 5. Create an assignment: "Assignment A" 6. In Assignment A, embed an Icon Maker Icon 7. Create another assignment: "Assignment B" 8. Embed the same Icon Maker Icon in Assignment B 9. Navigatge to Assignment A and edit the Icon Maker Icon. Make some notable change, check the "Apply changes to all instances of this..." box, and save the change 10. Navigate to Assignment B 11. Verify the change made in step 9 is applied to the Icon Maker Icon in Assignment B 12. Verify you can now edit the Icon Maker Icon in Assignment B without issue Change-Id: I5627f0ae158bd01313a185fd665d12880e3009b3 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/288280 Tested-by: Service Cloud Jenkins Reviewed-by: Gonzalo Penaranda QA-Review: Gonzalo Penaranda Product-Review: David Lyons --- .../components/__tests__/ButtonsTray.test.js | 19 +++++++++-- .../svg/__tests__/settings.test.js | 19 ++++++++++- .../instructure_buttons/svg/settings.js | 5 ++- packages/canvas-rce/src/rcs/api.js | 33 +++++++++++++++++-- 4 files changed, 70 insertions(+), 6 deletions(-) diff --git a/packages/canvas-rce/src/rce/plugins/instructure_buttons/components/__tests__/ButtonsTray.test.js b/packages/canvas-rce/src/rce/plugins/instructure_buttons/components/__tests__/ButtonsTray.test.js index 45eb647470d..d3c635761ba 100644 --- a/packages/canvas-rce/src/rce/plugins/instructure_buttons/components/__tests__/ButtonsTray.test.js +++ b/packages/canvas-rce/src/rce/plugins/instructure_buttons/components/__tests__/ButtonsTray.test.js @@ -295,7 +295,14 @@ describe('RCE "Buttons and Icons" Plugin > ButtonsTray', () => { ed = new FakeEditor() }) - const subject = () => render() + const subject = () => + render( + + ) it('loads the standard SVG metadata', async () => { const {getByLabelText, getAllByTestId} = subject() @@ -323,7 +330,15 @@ describe('RCE "Buttons and Icons" Plugin > ButtonsTray', () => { ed.setSelectedNode(ed.dom.select('#test-image')[0]) }) - const subject = () => render() + const subject = () => + render( + + ) beforeEach(() => { fetchMock.mock('*', { diff --git a/packages/canvas-rce/src/rce/plugins/instructure_buttons/svg/__tests__/settings.test.js b/packages/canvas-rce/src/rce/plugins/instructure_buttons/svg/__tests__/settings.test.js index 7c03fb163bc..35176ceca45 100644 --- a/packages/canvas-rce/src/rce/plugins/instructure_buttons/svg/__tests__/settings.test.js +++ b/packages/canvas-rce/src/rce/plugins/instructure_buttons/svg/__tests__/settings.test.js @@ -29,7 +29,11 @@ describe('useSvgSettings()', () => { beforeEach(() => { ed = new Editor() - rcs = {getFile: jest.fn(() => Promise.resolve({name: 'Test Button.svg'}))} + rcs = { + getFile: jest.fn(() => Promise.resolve({name: 'Test Button.svg'})), + contextType: 'course', + contextId: 1 + } RceApiSource.mockImplementation(() => rcs) }) @@ -251,6 +255,19 @@ describe('useSvgSettings()', () => { }) }) + it('uses replacement chain context info in request for file name', async () => { + const {result, waitForValueToChange} = renderHook(() => useSvgSettings(ed, editing, rcs)) + + await waitForValueToChange(() => { + return result.current[0] + }) + + expect(rcs.getFile).toHaveBeenCalledWith('1', { + replacement_chain_context_id: 1, + replacement_chain_context_type: 'course' + }) + }) + it('parses the SVG settings from the SVG metadata', async () => { const {result, waitForValueToChange} = renderHook(() => useSvgSettings(ed, editing, rcs)) diff --git a/packages/canvas-rce/src/rce/plugins/instructure_buttons/svg/settings.js b/packages/canvas-rce/src/rce/plugins/instructure_buttons/svg/settings.js index e54094ebb71..58165814ddd 100644 --- a/packages/canvas-rce/src/rce/plugins/instructure_buttons/svg/settings.js +++ b/packages/canvas-rce/src/rce/plugins/instructure_buttons/svg/settings.js @@ -103,7 +103,10 @@ export function useSvgSettings(editor, editing, rcsConfig) { const rcs = new RceApiSource(rcsConfig) - const fileData = await rcs.getFile(fileId) + const fileData = await rcs.getFile(fileId, { + replacement_chain_context_type: rcsConfig.contextType, + replacement_chain_context_id: rcsConfig.contextId + }) const fileName = fileData.name.replace(/\.[^\.]+$/, '') const metadataJson = JSON.parse(metadata) diff --git a/packages/canvas-rce/src/rcs/api.js b/packages/canvas-rce/src/rcs/api.js index 91ee2df539f..25a75c441e6 100644 --- a/packages/canvas-rce/src/rcs/api.js +++ b/packages/canvas-rce/src/rcs/api.js @@ -436,13 +436,42 @@ class RceApiSource { return this.apiFetch(uri, headers, {skipParse: true}) } - getFile(id) { + getFile(id, options = {}) { const headers = headerFor(this.jwt) const base = this.baseUri('file') - const uri = `${base}/${id}` + + // Valid query parameters for getFile + const {replacement_chain_context_type, replacement_chain_context_id} = options + + const uri = this.addParamsIfPresent(`${base}/${id}`, { + replacement_chain_context_type, + replacement_chain_context_id + }) + return this.apiFetch(uri, headers).then(normalizeFileData) } + // @private + addParamsIfPresent(uri, params) { + let url + + try { + url = new URL(uri) + } catch (e) { + // Just return the URI if it was invalid + return uri + } + + // Add all truthy parameters to the URL + for (const [name, value] of Object.entries(params)) { + if (!value) continue + + url.searchParams.append(name, value) + } + + return url.toString() + } + // @private async apiFetch(uri, headers, options) { if (!this.hasSession) {