ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-24 07:16:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

When dropping an unsupported file onto a notebook entry, tell the user it isnt supported (#7115)

Browse Source 
* handle unknown files and deal with copy/paste

* add some nice errors if couch pukes

* added how to adjust couchdb limits

* throw error on anntotation change

* keep blockquotes

* add test for blockquotes

* allow multi-file drop of images too

* add test for big files

* spell check

* check for null

* need to ignore console errors

* reorder tests so we can ignore console errors

* when creating new entry, ready it for editing

* fix tests and empty embeds

* fix tests

* found similar issue from notebooks in plots
This commit is contained in:
Scott Bell 2023-10-12 07:34:32 +02:00 committed by GitHub
parent a16a1d35b6
commit 26d3bd1e69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 257 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.cspell.json
View File

@ -483,7 +483,11 @@
"websockets",
"swgs",
"memlab",
"devmode"
"devmode",
"blockquote",
"blockquotes",
"Blockquote",
"Blockquotes"
],
"dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US"],
"ignorePaths": [

2
e2e/helper/notebookUtils.js
View File

@ -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);
}
/**

21
e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
View File

@ -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();
});
});

59
e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
View File

@ -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();
});
});

1
e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
View File

@ -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();

1
e2e/tests/performance/contract/notebook.contract.perf.spec.js
View File

@ -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'));

55
src/plugins/notebook/components/NotebookComponent.vue
View File

@ -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();

81
src/plugins/notebook/components/NotebookEntry.vue
View File

@ -31,6 +31,7 @@
@drop.capture="cancelEditMode"
@drop.prevent="dropOnEntry"
@click="selectAndEmitEntry($event, entry)"
@paste="addImageFromPaste"
>
<div class="c-ne__time-and-content">
<div class="c-ne__time-and-creator-and-delete">
@ -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 &gt back to > for markdown to do blockquotes
const restoredQuoteBrackets = sanitizeInput.replace(/&gt;/g, '>');
this.entry.text = restoredQuoteBrackets;
this.timestampAndUpdate();
},
selectAndEmitEntry(event, entry) {

55
src/plugins/notebook/utils/notebook-entries.js
View File

@ -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);

22
src/plugins/notebook/utils/notebook-image.js
View File

@ -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) {

20
src/plugins/persistence/couch/README.md
View File

@ -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 <http://127.0.0.1:5984/_utils/#/database/openmct/permissions>
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}));
```
```

3
src/plugins/plot/MctPlot.vue
View File

@ -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);
}
});