diff --git a/.cspell.json b/.cspell.json index d09743f357..3716e48fea 100644 --- a/.cspell.json +++ b/.cspell.json @@ -483,7 +483,11 @@ "websockets", "swgs", "memlab", - "devmode" + "devmode", + "blockquote", + "blockquotes", + "Blockquote", + "Blockquotes" ], "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US"], "ignorePaths": [ diff --git a/e2e/helper/notebookUtils.js b/e2e/helper/notebookUtils.js index ae4e6bd39e..75571f8966 100644 --- a/e2e/helper/notebookUtils.js +++ b/e2e/helper/notebookUtils.js @@ -34,7 +34,6 @@ async function enterTextEntry(page, text) { await page.locator(NOTEBOOK_DROP_AREA).click(); // enter text - await page.getByLabel('Notebook Entry Display').last().click(); await page.getByLabel('Notebook Entry Input').last().fill(text); await commitEntry(page); } @@ -53,6 +52,7 @@ async function dragAndDropEmbed(page, notebookObject) { await page.click('button[title="Show selected item in tree"]'); // Drag and drop the SWG into the notebook await page.dragAndDrop(`text=${swg.name}`, NOTEBOOK_DROP_AREA); + await commitEntry(page); } /** diff --git a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js index fe68487377..81e858a88d 100644 --- a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js @@ -279,7 +279,7 @@ test.describe('Notebook entry tests', () => { // Click .c-notebook__drag-area await page.locator('.c-notebook__drag-area').click(); - await expect(page.getByLabel('Notebook Entry Display')).toBeVisible(); + await expect(page.getByLabel('Notebook Entry Input')).toBeVisible(); await expect(page.getByLabel('Notebook Entry', { exact: true })).toHaveClass(/is-selected/); }); test('When an object is dropped into a notebook, a new entry is created and it should be focused @unstable', async ({ @@ -514,10 +514,23 @@ test.describe('Notebook entry tests', () => { const childItem = page.locator('li:has-text("List Item 2") ol li:has-text("Order 2")'); await expect(childItem).toBeVisible(); - // Blocks - const blockTest = '```javascript\nconst foo = "bar";\nconst bar = "foo";\n```'; - await nbUtils.enterTextEntry(page, blockTest); + // Code Blocks + const codeblockTest = '```javascript\nconst foo = "bar";\nconst bar = "foo";\n```'; + await nbUtils.enterTextEntry(page, codeblockTest); const codeBlock = page.locator('code.language-javascript:has-text("const foo = \\"bar\\";")'); await expect(codeBlock).toBeVisible(); + + // Blockquotes + const blockquoteTest = + 'This is a quote by Mark Twain:\n> "The man with a new idea is a crank\n>until the idea succeeds."'; + await nbUtils.enterTextEntry(page, blockquoteTest); + const firstLineOfBlockquoteText = page.locator( + 'blockquote:has-text("The man with a new idea is a crank")' + ); + await expect(firstLineOfBlockquoteText).toBeVisible(); + const secondLineOfBlockquoteText = page.locator( + 'blockquote:has-text("until the idea succeeds")' + ); + await expect(secondLineOfBlockquoteText).toBeVisible(); }); }); diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js index e4b80b62ee..f3fa07f58b 100644 --- a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js @@ -188,12 +188,11 @@ test.describe('Snapshot image tests', () => { }, fileData); await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: dropTransfer }); - + await page.locator('.c-ne__save-button > button').click(); // be sure that entry was created await expect(page.getByText('favicon-96x96.png')).toBeVisible(); await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).click(); - // expect large image to be displayed await expect(page.getByRole('dialog').getByText('favicon-96x96.png')).toBeVisible(); @@ -215,3 +214,59 @@ test.describe('Snapshot image tests', () => { expect(await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).count()).toBe(1); }); }); + +test.describe('Snapshot image failure tests', () => { + test.use({ failOnConsoleError: false }); + test.beforeEach(async ({ page }) => { + //Navigate to baseURL + await page.goto('./', { waitUntil: 'domcontentloaded' }); + + // Create Notebook + await createDomainObjectWithDefaults(page, { + type: NOTEBOOK_NAME + }); + }); + + test('Get an error notification when dropping unknown file onto notebook entry', async ({ + page + }) => { + // fill Uint8Array array with some garbage data + const garbageData = new Uint8Array(100); + const fileData = Array.from(garbageData); + + const dropTransfer = await page.evaluateHandle((data) => { + const dataTransfer = new DataTransfer(); + const file = new File([new Uint8Array(data)], 'someGarbage.foo', { type: 'unknown/garbage' }); + dataTransfer.items.add(file); + return dataTransfer; + }, fileData); + + await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: dropTransfer }); + + // should have gotten a notification from OpenMCT that we couldn't add it + await expect(page.getByText('Unknown object(s) dropped and cannot embed')).toBeVisible(); + }); + + test('Get an error notification when dropping big files onto notebook entry', async ({ + page + }) => { + const garbageSize = 15 * 1024 * 1024; // 15 megabytes + + await page.addScriptTag({ + // make the garbage client side + content: `window.bigGarbageData = new Uint8Array(${garbageSize})` + }); + + const bigDropTransfer = await page.evaluateHandle(() => { + const dataTransfer = new DataTransfer(); + const file = new File([window.bigGarbageData], 'bigBoy.png', { type: 'image/png' }); + dataTransfer.items.add(file); + return dataTransfer; + }); + + await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: bigDropTransfer }); + + // should have gotten a notification from OpenMCT that we couldn't add it as it's too big + await expect(page.getByText('unable to embed')).toBeVisible(); + }); +}); diff --git a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js index 89f46c7d3c..b4c9270b00 100644 --- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js @@ -150,7 +150,6 @@ test.describe('Tagging in Notebooks @addInit', () => { await createNotebookEntryAndTags(page); await page.locator('text=To start a new entry, click here or drag and drop any object').click(); - await page.getByLabel('Notebook Entry Display').last().click(); await page.getByLabel('Notebook Entry Input').fill(`An entry without tags`); await page.locator('.c-ne__save-button > button').click(); diff --git a/e2e/tests/performance/contract/notebook.contract.perf.spec.js b/e2e/tests/performance/contract/notebook.contract.perf.spec.js index a2db7a0f3c..a2d811256e 100644 --- a/e2e/tests/performance/contract/notebook.contract.perf.spec.js +++ b/e2e/tests/performance/contract/notebook.contract.perf.spec.js @@ -131,7 +131,6 @@ test.describe('Performance tests', () => { await page.evaluate(() => window.performance.mark('new-notebook-entry-created')); // Enter Notebook Entry text - await page.getByLabel('Notebook Entry').last().click(); await page.getByLabel('Notebook Entry Input').last().fill('New Entry'); await page.locator('.c-ne__save-button').click(); await page.evaluate(() => window.performance.mark('new-notebook-entry-filled')); diff --git a/src/plugins/notebook/components/NotebookComponent.vue b/src/plugins/notebook/components/NotebookComponent.vue index 1593988583..4b08974866 100644 --- a/src/plugins/notebook/components/NotebookComponent.vue +++ b/src/plugins/notebook/components/NotebookComponent.vue @@ -625,21 +625,35 @@ export default { dropEvent.preventDefault(); dropEvent.stopImmediatePropagation(); - const localImageDropped = dropEvent.dataTransfer.files?.[0]?.type.includes('image'); - const imageUrl = dropEvent.dataTransfer.getData('URL'); + const dataTransferFiles = Array.from(dropEvent.dataTransfer.files); + const localImageDropped = dataTransferFiles.some((file) => file.type.includes('image')); const snapshotId = dropEvent.dataTransfer.getData('openmct/snapshot/id'); + const domainObjectData = dropEvent.dataTransfer.getData('openmct/domain-object-path'); + const imageUrl = dropEvent.dataTransfer.getData('URL'); if (localImageDropped) { - // local image dropped from disk (file) - const imageData = dropEvent.dataTransfer.files[0]; - const imageEmbed = await createNewImageEmbed(imageData, this.openmct, imageData?.name); - this.newEntry(imageEmbed); + // local image(s) dropped from disk (file) + const embeds = []; + await Promise.all( + dataTransferFiles.map(async (file) => { + if (file.type.includes('image')) { + const imageData = file; + const imageEmbed = await createNewImageEmbed( + imageData, + this.openmct, + imageData?.name + ); + embeds.push(imageEmbed); + } + }) + ); + this.newEntry(embeds); } else if (imageUrl) { // remote image dropped (URL) try { const response = await fetch(imageUrl); const imageData = await response.blob(); const imageEmbed = await createNewImageEmbed(imageData, this.openmct); - this.newEntry(imageEmbed); + this.newEntry([imageEmbed]); } catch (error) { this.openmct.notifications.alert(`Unable to add image: ${error.message} `); console.error(`Problem embedding remote image`, error); @@ -647,7 +661,7 @@ export default { } else if (snapshotId.length) { // snapshot object const snapshot = this.snapshotContainer.getSnapshot(snapshotId); - this.newEntry(snapshot.embedObject); + this.newEntry([snapshot.embedObject]); this.snapshotContainer.removeSnapshot(snapshotId); const namespace = this.domainObject.identifier.namespace; @@ -656,10 +670,9 @@ export default { namespace ); saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject); - } else { + } else if (domainObjectData) { // plain domain object - const data = dropEvent.dataTransfer.getData('openmct/domain-object-path'); - const objectPath = JSON.parse(data); + const objectPath = JSON.parse(domainObjectData); const bounds = this.openmct.time.bounds(); const snapshotMeta = { bounds, @@ -668,8 +681,15 @@ export default { openmct: this.openmct }; const embed = await createNewEmbed(snapshotMeta); - - this.newEntry(embed); + this.newEntry([embed]); + } else { + this.openmct.notifications.error( + `Unknown object(s) dropped and cannot embed. Try again with an image or domain object.` + ); + console.warn( + `Unknown object(s) dropped and cannot embed. Try again with an image or domain object.` + ); + return; } }, focusOnEntryId() { @@ -838,12 +858,12 @@ export default { getSelectedSectionId() { return this.selectedSection?.id; }, - async newEntry(embed, event) { + async newEntry(embeds, event) { this.startTransaction(); this.resetSearch(); const notebookStorage = this.createNotebookStorageObject(); this.updateDefaultNotebook(notebookStorage); - const id = await addNotebookEntry(this.openmct, this.domainObject, notebookStorage, embed); + const id = await addNotebookEntry(this.openmct, this.domainObject, notebookStorage, embeds); const element = this.$refs.notebookEntries.querySelector(`#${id}`); const entryAnnotations = this.notebookAnnotations[id] ?? {}; @@ -861,6 +881,11 @@ export default { this.filterAndSortEntries(); this.focusEntryId = id; this.selectedEntryId = id; + + // put entry into edit mode + this.$nextTick(() => { + element.dispatchEvent(new Event('click')); + }); }, orientationChange() { this.formatSidebar(); diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue index 99c93498e7..0f9a8c0c3b 100644 --- a/src/plugins/notebook/components/NotebookEntry.vue +++ b/src/plugins/notebook/components/NotebookEntry.vue @@ -31,6 +31,7 @@ @drop.capture="cancelEditMode" @drop.prevent="dropOnEntry" @click="selectAndEmitEntry($event, entry)" + @paste="addImageFromPaste" >
@@ -375,10 +376,40 @@ export default { openmct: this.openmct }; const newEmbed = await createNewEmbed(snapshotMeta); + if (!this.entry.embeds) { + this.entry.embeds = []; + } this.entry.embeds.push(newEmbed); this.manageEmbedLayout(); }, + async addImageFromPaste(event) { + const clipboardItems = Array.from( + (event.clipboardData || event.originalEvent.clipboardData).items + ); + const hasImage = clipboardItems.some( + (clipboardItem) => clipboardItem.type.includes('image') && clipboardItem.kind === 'file' + ); + // If the clipboard contained an image, prevent the paste event from reaching the textarea. + if (hasImage) { + event.preventDefault(); + } + await Promise.all( + Array.from(clipboardItems).map(async (clipboardItem) => { + const isImage = clipboardItem.type.includes('image') && clipboardItem.kind === 'file'; + if (isImage) { + const imageFile = clipboardItem.getAsFile(); + const imageEmbed = await createNewImageEmbed(imageFile, this.openmct, imageFile?.name); + if (!this.entry.embeds) { + this.entry.embeds = []; + } + this.entry.embeds.push(imageEmbed); + } + }) + ); + this.manageEmbedLayout(); + this.timestampAndUpdate(); + }, convertMarkDownToHtml(text) { let markDownHtml = this.marked.parse(text, { breaks: true, @@ -450,15 +481,30 @@ export default { }, async dropOnEntry(dropEvent) { dropEvent.stopImmediatePropagation(); + const dataTransferFiles = Array.from(dropEvent.dataTransfer.files); - const localImageDropped = dropEvent.dataTransfer.files?.[0]?.type.includes('image'); + const localImageDropped = dataTransferFiles.some((file) => file.type.includes('image')); const snapshotId = dropEvent.dataTransfer.getData('openmct/snapshot/id'); + const domainObjectData = dropEvent.dataTransfer.getData('openmct/domain-object-path'); const imageUrl = dropEvent.dataTransfer.getData('URL'); if (localImageDropped) { - // local image dropped from disk (file) - const imageData = dropEvent.dataTransfer.files[0]; - const imageEmbed = await createNewImageEmbed(imageData, this.openmct, imageData?.name); - this.entry.embeds.push(imageEmbed); + // local image(s) dropped from disk (file) + await Promise.all( + dataTransferFiles.map(async (file) => { + if (file.type.includes('image')) { + const imageData = file; + const imageEmbed = await createNewImageEmbed( + imageData, + this.openmct, + imageData?.name + ); + if (!this.entry.embeds) { + this.entry.embeds = []; + } + this.entry.embeds.push(imageEmbed); + } + }) + ); this.manageEmbedLayout(); } else if (imageUrl) { try { @@ -466,15 +512,21 @@ export default { const response = await fetch(imageUrl); const imageData = await response.blob(); const imageEmbed = await createNewImageEmbed(imageData, this.openmct); + if (!this.entry.embeds) { + this.entry.embeds = []; + } this.entry.embeds.push(imageEmbed); this.manageEmbedLayout(); } catch (error) { - this.openmct.notifications.alert(`Unable to add image: ${error.message} `); + this.openmct.notifications.error(`Unable to add image: ${error.message} `); console.error(`Problem embedding remote image`, error); } } else if (snapshotId.length) { // snapshot object const snapshot = this.snapshotContainer.getSnapshot(snapshotId); + if (!this.entry.embeds) { + this.entry.embeds = []; + } this.entry.embeds.push(snapshot.embedObject); this.snapshotContainer.removeSnapshot(snapshotId); @@ -484,11 +536,18 @@ export default { namespace ); saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject); - } else { + } else if (domainObjectData) { // plain domain object - const data = dropEvent.dataTransfer.getData('openmct/domain-object-path'); - const objectPath = JSON.parse(data); + const objectPath = JSON.parse(domainObjectData); await this.addNewEmbed(objectPath); + } else { + this.openmct.notifications.error( + `Unknown object(s) dropped and cannot embed. Try again with an image or domain object.` + ); + console.warn( + `Unknown object(s) dropped and cannot embed. Try again with an image or domain object.` + ); + return; } this.timestampAndUpdate(); @@ -574,7 +633,9 @@ export default { this.editMode = false; const rawEntryValue = $event.target.value; const sanitizeInput = sanitizeHtml(rawEntryValue, { allowedAttributes: [], allowedTags: [] }); - this.entry.text = sanitizeInput; + // change > back to > for markdown to do blockquotes + const restoredQuoteBrackets = sanitizeInput.replace(/>/g, '>'); + this.entry.text = restoredQuoteBrackets; this.timestampAndUpdate(); }, selectAndEmitEntry(event, entry) { diff --git a/src/plugins/notebook/utils/notebook-entries.js b/src/plugins/notebook/utils/notebook-entries.js index 0d9bdd4fa5..ddb40aa25c 100644 --- a/src/plugins/notebook/utils/notebook-entries.js +++ b/src/plugins/notebook/utils/notebook-entries.js @@ -125,30 +125,35 @@ export function createNewImageEmbed(image, openmct, imageName = '') { return new Promise((resolve) => { const reader = new FileReader(); reader.onloadend = async () => { - const base64Data = reader.result; - const blobUrl = URL.createObjectURL(image); - const imageDomainObject = createNotebookImageDomainObject(base64Data); - await saveNotebookImageDomainObject(openmct, imageDomainObject); - const imageThumbnailURL = await getThumbnailURLFromImageUrl(blobUrl); + try { + const base64Data = reader.result; + const blobUrl = URL.createObjectURL(image); + const imageDomainObject = createNotebookImageDomainObject(base64Data); + await saveNotebookImageDomainObject(openmct, imageDomainObject); + const imageThumbnailURL = await getThumbnailURLFromImageUrl(blobUrl); - const snapshot = { - fullSizeImageObjectIdentifier: imageDomainObject.identifier, - thumbnailImage: { - src: imageThumbnailURL - } - }; + const snapshot = { + fullSizeImageObjectIdentifier: imageDomainObject.identifier, + thumbnailImage: { + src: imageThumbnailURL + } + }; - const embedMetaData = { - bounds: openmct.time.bounds(), - link: null, - objectPath: null, - openmct, - userImage: true, - imageName - }; + const embedMetaData = { + bounds: openmct.time.bounds(), + link: null, + objectPath: null, + openmct, + userImage: true, + imageName + }; - const createdEmbed = await createNewEmbed(embedMetaData, snapshot); - resolve(createdEmbed); + const createdEmbed = await createNewEmbed(embedMetaData, snapshot); + resolve(createdEmbed); + } catch (error) { + console.error(`${error.message} - unable to embed image ${imageName}`, error); + openmct.notifications.error(`${error.message} -- unable to embed image ${imageName}`); + } }; reader.readAsDataURL(image); @@ -202,7 +207,7 @@ export async function addNotebookEntry( openmct, domainObject, notebookStorage, - embed = null, + passedEmbeds = [], entryText = '' ) { if (!openmct || !domainObject || !notebookStorage) { @@ -212,7 +217,9 @@ export async function addNotebookEntry( const date = openmct.time.now(); const configuration = domainObject.configuration; const entries = configuration.entries || {}; - const embeds = embed ? [embed] : []; + // if embeds isn't an array, make it one + const embedsNormalized = + passedEmbeds && !Array.isArray(passedEmbeds) ? [passedEmbeds] : passedEmbeds; const id = `entry-${uuid()}`; const [createdBy, createdByRole] = await Promise.all([ @@ -225,7 +232,7 @@ export async function addNotebookEntry( createdBy, createdByRole, text: entryText, - embeds + embeds: embedsNormalized }; const newEntries = addEntryIntoPage(notebookStorage, entries, entry); diff --git a/src/plugins/notebook/utils/notebook-image.js b/src/plugins/notebook/utils/notebook-image.js index a1db1871bd..224090bc60 100644 --- a/src/plugins/notebook/utils/notebook-image.js +++ b/src/plugins/notebook/utils/notebook-image.js @@ -54,13 +54,23 @@ export async function saveNotebookImageDomainObject(openmct, object) { await openmct.objects.save(object); } -export function updateNotebookImageDomainObject(openmct, identifier, fullSizeImage) { - openmct.objects.get(identifier).then((domainObject) => { - const configuration = domainObject.configuration; - configuration.fullSizeImageURL = fullSizeImage.src; - +export async function updateNotebookImageDomainObject(openmct, identifier, fullSizeImage) { + const domainObject = await openmct.objects.get(identifier); + const configuration = domainObject.configuration; + configuration.fullSizeImageURL = fullSizeImage.src; + try { + // making a transactions as we can't catch errors on mutations + if (!openmct.objects.isTransactionActive()) { + openmct.objects.startTransaction(); + } openmct.objects.mutate(domainObject, 'configuration', configuration); - }); + const transaction = openmct.objects.getActiveTransaction(); + await transaction.commit(); + openmct.objects.endTransaction(); + } catch (error) { + console.error(`${error.message} -- unable to save image`, error); + openmct.notifications.error(`${error.message} -- unable to save image`); + } } export function updateNamespaceOfDomainObject(object, namespace) { diff --git a/src/plugins/persistence/couch/README.md b/src/plugins/persistence/couch/README.md index 1e43b5efb4..c01c72d42e 100644 --- a/src/plugins/persistence/couch/README.md +++ b/src/plugins/persistence/couch/README.md @@ -60,21 +60,21 @@ While we highly recommend using the CouchDB docker-compose installation, it is s 1. Install CouchDB using: `brew install couchdb`. 2. Edit `/usr/local/etc/local.ini` and add the following settings: - ```txt + ```ini [admins] admin = youradminpassword ``` And set the server up for single node: - ```txt + ```ini [couchdb] single_node=true ``` Enable CORS - ```txt + ```ini [chttpd] enable_cors = true [cors] @@ -119,6 +119,18 @@ sh ./setup-couchdb.sh 5. Navigate to 6. Remove permission restrictions in CouchDB from Open MCT by deleting `_admin` roles for both `Admin` and `Member`. +## Document Sizes +CouchDB has size limits on both its internal documents, and its httpd interface. If dealing with larger documents in Open MCT (e.g., users adding images to notebook entries), you may to increase this limit. To do this, add the following to the two sections: +```ini + [couchdb] + max_document_size = 4294967296 ; approx 4 GB + + [chttpd] + max_http_request_size = 4294967296 ; approx 4 GB +``` + +If not present, add them under proper sections. The values are in bytes, and can be adjusted to whatever is appropriate for your use case. + # Configuring Open MCT to use CouchDB ## Configuration script @@ -230,4 +242,4 @@ To enable them in Open MCT, we need to configure the plugin `useDesignDocuments` ```js openmct.install(openmct.plugins.CouchDB({url: "http://localhost:5984/openmct", useDesignDocuments: true})); - ``` + ``` \ No newline at end of file diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue index ef047e9f5e..7f978d2687 100644 --- a/src/plugins/plot/MctPlot.vue +++ b/src/plugins/plot/MctPlot.vue @@ -1399,6 +1399,9 @@ export default { Object.keys(pointsInBoxBySeries).forEach((seriesKeyString) => { const pointsInBox = pointsInBoxBySeries[seriesKeyString]; if (pointsInBox && pointsInBox.length) { + if (!annotationsBySeries[seriesKeyString]) { + annotationsBySeries[seriesKeyString] = []; + } annotationsBySeries[seriesKeyString].push(...pointsInBox); } });