ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-30 08:04:03 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

[Restricted Notebook] Creating new Restricted Notebook type (#5173)

Browse Source 
* added/removed status for locked, will not work with current one status per domain object setup
* setting restricted right away based on nb type
* added confirmation dialog for locking a page

* Styling for restricted Notebook
- Markup, CSS and content changes for lock button and locked message.
- Removed "Note book Type" property from NotebookType.js.
* have a version of entry template that has no listeners for locked items
* cleaning up page and section components
* making sure basic notebook stuff is installed at least once
* updating data transfer values for locked page entries, fixing page and section selection from edits
* adding locked flag to search result entries
* fixing uneditable section/page names
* cleaning up updateName function for page/section names
* removing install of restricted notebook
* updating confirmation dialog
* updating tests for new export structur
- New symbols glyph and SVG for the Shift Log. IMPORTANT: OVERRIDE ANY MERGE CONFLICTS WITH THIS COMMIT!

* made create button items dynamic each time the button is clicked, this will pick up any new types added after the create menu is created

* removing dynamic create menu list

* found a way to add the plugin before openmct.start is called
* making create items dynamic to include types added after openmct is started
* more e2e tests for restricted notebook

* updates from PR reviews, also fixed error in mct-tree thrown by not checking for an element

* plain notebook tests

* More testcase definition

* actually removing notebook object to test

* removing dupes

* checking if agent exists before relying on it... it was breaking tests with errors

* updating for new browser agent code

* fixing linting errors

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
Co-authored-by: unlikelyzero <jchill2@gmail.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
This commit is contained in:
Jamie V 2022-06-04 09:06:07 -07:00 committed by GitHub
parent 584d11a2ef
commit 9fbb695379
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 1175 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
e2e/tests/plugins/notebook/addInitRestrictedNotebook.js Normal file
View File

@ -0,0 +1,30 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2022, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
// this will be called from the test suite with
// await page.addInitScript({ path: path.join(__dirname, 'addInitRestrictedNotebook.js') });
// it will install the RestrictedNotebook since it is not installed by default
document.addEventListener('DOMContentLoaded', () => {
const openmct = window.openmct;
openmct.install(openmct.plugins.RestrictedNotebook('CUSTOM_NAME'));
});

198
e2e/tests/plugins/notebook/notebook.e2e.spec.js Normal file
View File

@ -0,0 +1,198 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2022, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*
This test suite is dedicated to tests which verify the basic operations surrounding Notebooks.
*/
const { test } = require('../../../fixtures');
test.describe('Notebook CRUD Operations', () => {
test.fixme('Can create a Notebook Object', async ({ page }) => {
//Create domain object
//Newly created notebook should have one Section and one page, 'Unnamed Section'/'Unnamed Page'
});
test.fixme('Can update a Notebook Object', async ({ page }) => {});
test.fixme('Can view a perviously created Notebook Object', async ({ page }) => {});
test.fixme('Can Delete a Notebook Object', async ({ page }) => {
// Other than non-persistible objects
});
});
test.describe('Default Notebook', () => {
// General Default Notebook statements
// ## Useful commands:
// 1. - To check default notebook:
// `JSON.parse(localStorage.getItem('notebook-storage'));`
// 1. - Clear default notebook:
// `localStorage.setItem('notebook-storage', null);`
test.fixme('A newly created Notebook is automatically set as the default notebook if no other notebooks exist', async ({ page }) => {
//Create new notebook
//Verify Default Notebook Characteristics
});
test.fixme('A newly created Notebook is automatically set as the default notebook if at least one other notebook exists', async ({ page }) => {
//Create new notebook A
//Create second notebook B
//Verify Non-Default Notebook A Characteristics
//Verify Default Notebook B Characteristics
});
test.fixme('If a default notebook is deleted, the second most recent notebook becomes the default', async ({ page }) => {
//Create new notebook A
//Create second notebook B
//Delete Notebook B
//Verify Default Notebook A Characteristics
});
});
test.describe('Notebook section tests', () => {
//The following test cases are associated with Notebook Sections
test.fixme('New sections are automatically named Unnamed Section with Unnamed Page', async ({ page }) => {
//Create new notebook A
//Add section
//Verify new section and new page details
});
test.fixme('Section selection operations and associated behavior', async ({ page }) => {
//Create new notebook A
//Add Sections until 6 total with no default section/page
//Select 3rd section
//Delete 4th section
//3rd section is still selected
//Delete 3rd section
//1st section is selected
//Set 3rd section as default
//Delete 2nd section
//3rd section is still default
//Delete 3rd section
//1st is selected and there is no default notebook
});
});
test.describe('Notebook page tests', () => {
//The following test cases are associated with Notebook Pages
test.fixme('Page selection operations and associated behavior', async ({ page }) => {
//Create new notebook A
//Delete existing Page
//New 'Unnamed Page' automatically created
//Create 6 total Pages without a default page
//Select 3rd
//Delete 3rd
//First is now selected
//Set 3rd as default
//Select 2nd page
//Delete 2nd page
//3rd (default) is now selected
//Set 3rd as default page
//Select 3rd (default) page
//Delete 3rd page
//First is now selected and there is no default notebook
});
});
test.describe('Notebook search tests', () => {
test.fixme('Can search for a single result', async ({ page }) => {});
test.fixme('Can search for many results', async ({ page }) => {});
test.fixme('Can search for new and recently modified entries', async ({ page }) => {});
test.fixme('Can search for section text', async ({ page }) => {});
test.fixme('Can search for page text', async ({ page }) => {});
test.fixme('Can search for entry text', async ({ page }) => {});
});
test.describe('Notebook entry tests', () => {
test.fixme('When a new entry is created, it should be focused', async ({ page }) => {});
test.fixme('When a telemetry object is dropped into a notebook, a new entry is created and it should be focused', async ({ page }) => {
// Drag and drop any telmetry object on 'drop object'
// new entry gets created with telemtry object
});
test.fixme('When a telemetry object is dropped into a notebooks existing entry, it should be focused', async ({ page }) => {
// Drag and drop any telemetry object onto existing entry
// Entry updated with object and snapshot
});
test.fixme('new entries persist through navigation events without save', async ({ page }) => {});
test.fixme('previous and new entries can be deleted', async ({ page }) => {});
});
test.describe('Snapshot Menu tests', () => {
test.fixme('When no default notebook is selected, Snapshot Menu dropdown should only have a single option', async ({ page }) => {
// There should be no default notebook
// Clear default notebook if exists using `localStorage.setItem('notebook-storage', null);`
// refresh page
// Click on 'Notebook Snaphot Menu'
// 'save to Notebook Snapshots' should be only option there
});
test.fixme('When default notebook is updated selected, Snapshot Menu dropdown should list it as the newest option', async ({ page }) => {
// Create 2a notebooks
// Set Notebook A as Default
// Open Snapshot Menu and note that Notebook A is listed
// Close Snapshot Menu
// Set Default Notebook to Notebook B
// Open Snapshot Notebook and note that Notebook B is listed
// Select Default Notebook Option and verify that Snapshot is added to Notebook B
});
test.fixme('Can add Snapshots via Snapshot Menu and details are correct', async ({ page }) => {
//Note this should be a visual test, too
// Create Telemetry object
// Create A notebook with many pages and sections.
// Set page and section defaults to be between first and last of many. i.e. 3 of 5
// Navigate to Telemetry object
// Select Default Notebook Option and verify that Snapshot is added to Notebook A
// Verify Snapshot Details appear correctly
});
test.fixme('Snapshots adjust time conductor', async ({ page }) => {
// Create Telemetry object
// Set Telemetry object's timeconductor to Fixed time with Start and Endtimes are recorded
// Embed Telemetry object into notebook
// Set Time Conductor to Local clock
// Click into embedded telemetry object and verify object appears with same fixed time from record
});
});
test.describe('Snapshot Container tests', () => {
test.fixme('5 Snapshots can be added to a container', async ({ page }) => {});
test.fixme('5 Snapshots can be added to a container and Deleted with Delete All action', async ({ page }) => {});
test.fixme('A snapshot can be Deleted from Container', async ({ page }) => {});
test.fixme('A snapshot can be Previewed from Container', async ({ page }) => {});
test.fixme('A snapshot Container can be open and closed', async ({ page }) => {});
test.fixme('Can add object to Snapshot container and pull into notebook and create a new entry', async ({ page }) => {
//Create Notebook
//Create Telemetry Object
//From Telemetry Object, use 'save to Notebook Snapshots'
//Snapshots indicator should blink, click on it to view snapshots
//Navigate to Notebook
//Drag and Drop onto droppable area for new entry
//New Entry created with given snapshot added
//Snapshot removed from container?
});
test.fixme('Can add object to Snapshot container and pull into notebook and existing entry', async ({ page }) => {
//Create Notebook
//Create Telemetry Object
//From Telemetry Object, use 'save to Notebook Snapshots'
//Snapshots indicator should blink, click on it to view snapshots
//Navigate to Notebook
//Drag and Drop into exiting entry
//Existing Entry updated with given snapshot
//Snapshot removed from container?
});
test.fixme('Verify Embedded options for PNG, JPG, and Annotate work correctly', async ({ page }) => {
//Add snapshot to container
//Verify PNG, JPG, and Annotate buttons work correctly
});
});

264
e2e/tests/plugins/notebook/restrictedNotebook.e2e.spec.js Normal file
View File

@ -0,0 +1,264 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2022, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
const { test } = require('../../../fixtures');
const { expect } = require('@playwright/test');
const path = require('path');
const TEST_TEXT = 'Testing text for entries.';
const TEST_TEXT_NAME = 'Test Page';
const CUSTOM_NAME = 'CUSTOM_NAME';
const COMMIT_BUTTON_TEXT = 'button:has-text("Commit Entries")';
const SINE_WAVE_GENERATOR = 'text=Unnamed Sine Wave Generator';
const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area';
/**
* @param {import('@playwright/test').Page} page
*/
async function startAndAddNotebookObject(page) {
// eslint-disable-next-line no-undef
await page.addInitScript({ path: path.join(__dirname, 'addInitRestrictedNotebook.js') });
//Go to baseURL
await page.goto('/', { waitUntil: 'networkidle' });
//Click the Create button
await page.click('button:has-text("Create")');
// Click text=CUSTOME_NAME
await page.click(`text=${CUSTOM_NAME}`); // secondarily tests renamability also
// Click text=OK
await Promise.all([
page.waitForNavigation({waitUntil: 'networkidle'}),
page.click('text=OK')
]);
return;
}
/**
* @param {import('@playwright/test').Page} page
*/
async function enterTextEntry(page) {
// Click .c-notebook__drag-area
await page.locator(NOTEBOOK_DROP_AREA).click();
// enter text
await page.locator('div.c-ne__text').click();
await page.locator('div.c-ne__text').fill(TEST_TEXT);
await page.locator('div.c-ne__text').press('Enter');
return;
}
/**
* @param {import('@playwright/test').Page} page
*/
async function dragAndDropEmbed(page) {
// Click button:has-text("Create")
await page.locator('button:has-text("Create")').click();
// Click li:has-text("Sine Wave Generator")
await page.locator('li:has-text("Sine Wave Generator")').click();
// Click form[name="mctForm"] >> text=My Items
await page.locator('form[name="mctForm"] >> text=My Items').click();
// Click text=OK
await page.locator('text=OK').click();
// Click text=Open MCT My Items >> span >> nth=3
await page.locator('text=Open MCT My Items >> span').nth(3).click();
// Click text=Unnamed CUSTOM_NAME
await Promise.all([
page.waitForNavigation(),
page.locator('text=Unnamed CUSTOM_NAME').click()
]);
await page.dragAndDrop(SINE_WAVE_GENERATOR, NOTEBOOK_DROP_AREA);
return;
}
/**
* @param {import('@playwright/test').Page} page
*/
async function lockPage(page) {
const commitButton = page.locator(COMMIT_BUTTON_TEXT);
await commitButton.click();
// confirmation dialog click
await page.locator('text=Lock Page').click();
// waiting for mutation of locked page
await new Promise((resolve, reject) => {
setTimeout(resolve, 1000);
});
return;
}
/**
* @param {import('@playwright/test').Page} page
*/
async function openContextMenuRestrictedNotebook(page) {
// Click text=Open MCT My Items (This expands the My Items folder to show it's chilren in the tree)
await page.locator('text=Open MCT My Items >> span').nth(3).click();
// Click a:has-text("Unnamed CUSTOM_NAME")
await page.locator(`a:has-text("Unnamed ${CUSTOM_NAME}")`).click({
button: 'right'
});
return;
}
test.describe('Restricted Notebook', () => {
test.beforeEach(async ({ page }) => {
await startAndAddNotebookObject(page);
});
test('Can be renamed', async ({ page }) => {
await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText(`Unnamed ${CUSTOM_NAME}`);
});
test('Can be deleted if there are no locked pages', async ({ page }) => {
await openContextMenuRestrictedNotebook(page);
const menuOptions = page.locator('.c-menu ul');
await expect.soft(menuOptions).toContainText('Remove');
const restrictedNotebookTreeObject = page.locator(`a:has-text("Unnamed ${CUSTOM_NAME}")`);
// notbook tree object exists
expect.soft(await restrictedNotebookTreeObject.count()).toEqual(1);
// Click text=Remove
await page.locator('text=Remove').click();
// Click text=OK
await Promise.all([
page.waitForNavigation(/*{ url: 'http://localhost:8080/#/browse/mine?tc.mode=fixed&tc.startBound=1653671067340&tc.endBound=1653672867340&tc.timeSystem=utc&view=grid' }*/),
page.locator('text=OK').click()
]);
// has been deleted
expect.soft(await restrictedNotebookTreeObject.count()).toEqual(0);
});
test('Can be locked if at least one page has one entry', async ({ page }) => {
await enterTextEntry(page);
const commitButton = page.locator(COMMIT_BUTTON_TEXT);
expect.soft(await commitButton.count()).toEqual(1);
});
});
test.describe('Restricted Notebook with at least one entry and with the page locked', () => {
test.beforeEach(async ({ page }) => {
await startAndAddNotebookObject(page);
await enterTextEntry(page);
await lockPage(page);
// open sidebar
await page.locator('button.c-notebook__toggle-nav-button').click();
});
test('Locked page should now be in a locked state', async ({ page }) => {
// main lock message on page
const lockMessage = page.locator('text=This page has been committed and cannot be modified or removed');
expect.soft(await lockMessage.count()).toEqual(1);
// lock icon on page in sidebar
const pageLockIcon = page.locator('ul.c-notebook__pages li div.icon-lock');
expect.soft(await pageLockIcon.count()).toEqual(1);
// no way to remove a restricted notebook with a locked page
await openContextMenuRestrictedNotebook(page);
const menuOptions = page.locator('.c-menu ul');
await expect.soft(menuOptions).not.toContainText('Remove');
});
test('Can still: add page, rename, add entry, delete unlocked pages', async ({ page }) => {
// Click text=Page Add >> button
await Promise.all([
page.waitForNavigation(),
page.locator('text=Page Add >> button').click()
]);
// Click text=Unnamed Page >> nth=1
await page.locator('text=Unnamed Page').nth(1).click();
// Press a with modifiers
await page.locator('text=Unnamed Page').nth(1).fill(TEST_TEXT_NAME);
// expect to be able to rename unlocked pages
const newPageElement = page.locator(`text=${TEST_TEXT_NAME}`);
const newPageCount = await newPageElement.count();
await newPageElement.press('Enter'); // exit contenteditable state
expect.soft(newPageCount).toEqual(1);
// enter test text
await enterTextEntry(page);
// expect new page to be lockable
const commitButton = page.locator(COMMIT_BUTTON_TEXT);
expect.soft(await commitButton.count()).toEqual(1);
// Click text=Unnamed PageTest Page >> button
await page.locator('text=Unnamed PageTest Page >> button').click();
// Click text=Delete Page
await page.locator('text=Delete Page').click();
// Click text=Ok
await Promise.all([
page.waitForNavigation(),
page.locator('text=Ok').click()
]);
// deleted page, should no longer exist
const deletedPageElement = page.locator(`text=${TEST_TEXT_NAME}`);
expect.soft(await deletedPageElement.count()).toEqual(0);
});
});
test.describe('Restricted Notebook with a page locked and with an embed', () => {
test.beforeEach(async ({ page }) => {
await startAndAddNotebookObject(page);
await dragAndDropEmbed(page);
});
test('Allows embeds to be deleted if page unlocked', async ({ page }) => {
// Click .c-ne__embed__name .c-popup-menu-button
await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu
const embedMenu = page.locator('body >> .c-menu');
await expect.soft(embedMenu).toContainText('Remove This Embed');
});
test('Disallows embeds to be deleted if page locked', async ({ page }) => {
await lockPage(page);
// Click .c-ne__embed__name .c-popup-menu-button
await page.locator('.c-ne__embed__name .c-popup-menu-button').click(); // embed popup menu
const embedMenu = page.locator('body >> .c-menu');
await expect.soft(embedMenu).not.toContainText('Remove This Embed');
});
});

4
e2e/tests/recycled_storage.json
View File

@ -6,11 +6,11 @@
"localStorage": [
{
"name": "tcHistory",
"value": "{\"utc\":[{\"start\":1651513945533,\"end\":1651515745533}]}"
"value": "{\"utc\":[{\"start\":1652301954635,\"end\":1652303754635}]}"
},
{
"name": "mct",
"value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"c0f99e39-85e7-4ef7-99b1-ef52d4ed69b2\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1651515746374,\"modified\":1651515746374},\"c0f99e39-85e7-4ef7-99b1-ef52d4ed69b2\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"c0f99e39-85e7-4ef7-99b1-ef52d4ed69b2\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"e35a066b-eb0e-4b05-a4c9-cc31dc202572\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1651515746373,\"location\":\"mine\",\"persisted\":1651515746373}}"
"value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1652303756008,\"modified\":1652303756007},\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"73f2d9ae-d1f3-4561-b7fc-ecd5df557249\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1652303755999,\"location\":\"mine\",\"persisted\":1652303756002}}"
},
{
"name": "mct-tree-expanded",

1
e2e/tests/visual/default.visual.spec.js
View File

@ -192,7 +192,6 @@ test('Visual - Save Successful Banner', async ({ page }) => {
//Wait until Save Banner is gone
await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
await percySnapshot(page, 'Banner message gone');
});
test('Visual - Display Layout Icon is correct', async ({ page }) => {

88
src/plugins/notebook/NotebookType.js Normal file
View File

@ -0,0 +1,88 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2022, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
import { IMAGE_MIGRATION_VER } from '../notebook/utils/notebook-migration';
export default class NotebookType {
constructor(name, description, icon) {
this.name = name;
this.description = description;
this.cssClass = icon;
this.creatable = true;
this.form = [
{
key: 'defaultSort',
name: 'Entry Sorting',
control: 'select',
options: [
{
name: 'Newest First',
value: "newest"
},
{
name: 'Oldest First',
value: "oldest"
}
],
cssClass: 'l-inline',
property: [
"configuration",
"defaultSort"
]
},
{
key: 'sectionTitle',
name: 'Section Title',
control: 'textfield',
cssClass: 'l-inline',
required: true,
property: [
"configuration",
"sectionTitle"
]
},
{
key: 'pageTitle',
name: 'Page Title',
control: 'textfield',
cssClass: 'l-inline',
required: true,
property: [
"configuration",
"pageTitle"
]
}
];
}
initialize(domainObject) {
domainObject.configuration = {
defaultSort: 'oldest',
entries: {},
imageMigrationVer: IMAGE_MIGRATION_VER,
pageTitle: 'Page',
sections: [],
sectionTitle: 'Section',
type: 'General'
};
}
}

72
src/plugins/notebook/NotebookViewProvider.js Normal file
View File

@ -0,0 +1,72 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2022, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
import Vue from 'vue';
import Notebook from './components/Notebook.vue';
import Agent from '@/utils/agent/Agent';
export default class NotebookViewProvider {
constructor(openmct, name, key, type, cssClass, snapshotContainer) {
this.openmct = openmct;
this.key = key;
this.name = `${name} View`;
this.type = type;
this.cssClass = cssClass;
this.snapshotContainer = snapshotContainer;
}
canView(domainObject) {
return domainObject.type === this.type;
}
view(domainObject) {
let component;
let openmct = this.openmct;
let snapshotContainer = this.snapshotContainer;
let agent = new Agent(window);
return {
show(container) {
component = new Vue({
el: container,
components: {
Notebook
},
provide: {
openmct,
snapshotContainer,
agent
},
data() {
return {
domainObject
};
},
template: '<Notebook :domain-object="domainObject"></Notebook>'
});
},
destroy() {
component.$destroy();
}
};
}
}

72
src/plugins/notebook/components/Notebook.vue
View File

@ -21,7 +21,10 @@
*****************************************************************************/
<template>
<div class="c-notebook">
<div
class="c-notebook"
:class="[{'c-notebook--restricted' : isRestricted }]"
>
<div class="c-notebook__head">
<Search
class="c-notebook__search"
@ -119,6 +122,7 @@
</div>
</div>
<div
v-if="selectedPage && !selectedPage.isLocked"
class="c-notebook__drag-area icon-plus"
@click="newEntry()"
@dragover="dragOver"
@ -129,6 +133,13 @@
To start a new entry, click here or drag and drop any object
</span>
</div>
<div
v-if="selectedPage && selectedPage.isLocked"
class="c-notebook__page-locked"
>
<div class="icon-lock"></div>
<div class="c-notebook__page-locked__message">This page has been committed and cannot be modified or removed</div>
</div>
<div
v-if="selectedSection && selectedPage"
ref="notebookEntries"
@ -142,12 +153,24 @@
:selected-page="selectedPage"
:selected-section="selectedSection"
:read-only="false"
:is-locked="selectedPage.isLocked"
@cancelEdit="cancelTransaction"
@editingEntry="startTransaction"
@deleteEntry="deleteEntry"
@updateEntry="updateEntry"
/>
</div>
<div
v-if="showLockButton"
class="c-notebook__commit-entries-control"
>
<button
class="c-button c-button--major commit-button icon-lock"
title="Commit entries and lock this page from further changes"
@click="lockPage()"
>
<span class="c-button__label">Commit Entries</span>
</button></div>
</div>
</div>
</div>
@ -161,7 +184,7 @@ import Sidebar from './Sidebar.vue';
import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSectionId, setDefaultNotebookPageId } from '../utils/notebook-storage';
import { addNotebookEntry, createNewEmbed, getEntryPosById, getNotebookEntries, mutateObject } from '../utils/notebook-entries';
import { saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from '../utils/notebook-image';
import { NOTEBOOK_VIEW_TYPE } from '../notebook-constants';
import { isNotebookViewType, RESTRICTED_NOTEBOOK_TYPE } from '../notebook-constants';
import { debounce } from 'lodash';
import objectLink from '../../../ui/mixins/object-link';
@ -192,6 +215,7 @@ export default {
selectedPageId: this.getSelectedPageId(),
defaultSort: this.domainObject.configuration.defaultSort,
focusEntryId: null,
isRestricted: this.domainObject.type === RESTRICTED_NOTEBOOK_TYPE,
search: '',
searchResults: [],
showTime: this.domainObject.configuration.showTime || 0,
@ -241,6 +265,11 @@ export default {
}
return this.sections[0];
},
showLockButton() {
const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
return entries && entries.length > 0 && this.isRestricted && !this.selectedPage.isLocked;
}
},
watch: {
@ -282,7 +311,7 @@ export default {
},
methods: {
changeSectionPage(newParams, oldParams, changedParams) {
if (newParams.view !== NOTEBOOK_VIEW_TYPE) {
if (isNotebookViewType(newParams.view)) {
return;
}
@ -348,6 +377,43 @@ export default {
this.removeDefaultClass(this.domainObject.identifier);
clearDefaultNotebook();
},
lockPage() {
let prompt = this.openmct.overlays.dialog({
iconClass: 'alert',
message: "This action will lock this page and disallow any new entries, or editing of existing entries. Do you want to continue?",
buttons: [
{
label: 'Lock Page',
callback: () => {
let sections = this.getSections();
this.selectedPage.isLocked = true;
// cant be default if it's locked
if (this.selectedPage.id === this.defaultPageId) {
this.cleanupDefaultNotebook();
}
if (!this.selectedSection.isLocked) {
this.selectedSection.isLocked = true;
}
mutateObject(this.openmct, this.domainObject, 'configuration.sections', sections);
if (!this.domainObject.locked) {
mutateObject(this.openmct, this.domainObject, 'locked', true);
}
prompt.dismiss();
}
}, {
label: 'Cancel',
callback: () => {
prompt.dismiss();
}
}
]
});
},
setSectionAndPageFromUrl() {
let sectionId = this.getSectionIdFromUrl() || this.getDefaultSectionId() || this.getSelectedSectionId();
let pageId = this.getPageIdFromUrl() || this.getDefaultPageId() || this.getSelectedPageId();

24
src/plugins/notebook/components/NotebookEmbed.vue
View File

@ -51,6 +51,12 @@ export default {
return {};
}
},
isLocked: {
type: Boolean,
default() {
return false;
}
},
isSnapshotContainer: {
type: Boolean,
default() {
@ -79,6 +85,15 @@ export default {
: this.embed.snapshot.src;
}
},
watch: {
isLocked(value) {
if (value === true) {
let index = this.popupMenuItems.findIndex((item) => item.id === 'removeEmbed');
this.$delete(this.popupMenuItems, index);
}
}
},
mounted() {
this.addPopupMenuItems();
this.imageExporter = new ImageExporter(this.openmct);
@ -86,17 +101,24 @@ export default {
methods: {
addPopupMenuItems() {
const removeEmbed = {
id: 'removeEmbed',
cssClass: 'icon-trash',
name: this.removeActionString,
callback: this.getRemoveDialog.bind(this)
};
const preview = {
id: 'preview',
cssClass: 'icon-eye-open',
name: 'Preview',
callback: this.previewEmbed.bind(this)
};
this.popupMenuItems = [removeEmbed, preview];
this.popupMenuItems = [preview];
if (!this.isLocked) {
this.popupMenuItems.unshift(removeEmbed);
}
},
annotateSnapshot() {
const annotateVue = new Vue({

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

@ -23,6 +23,7 @@
<template>
<div
class="c-notebook__entry c-ne has-local-controls has-tag-applier"
:class="{ 'locked': isLocked }"
@dragover="changeCursor"
@drop.capture="cancelEditMode"
@drop.prevent="dropOnEntry"
@ -53,12 +54,12 @@
/>
</div>
</template>
<template v-else>
<template v-else-if="!isLocked">
<div
:id="entry.id"
class="c-ne__text c-ne__input"
tabindex="0"
contenteditable
contenteditable="true"
@focus="editingEntry()"
@blur="updateEntryValue($event)"
@keydown.enter.exact.prevent
@ -67,6 +68,18 @@
>
</div>
</template>
<template v-else>
<div
:id="entry.id"
class="c-ne__text"
contenteditable="false"
tabindex="0"
v-text="entry.text"
>
</div>
</template>
<TagEditor
:domain-object="domainObject"
:annotation-query="annotationQuery"
@ -74,11 +87,13 @@
:annotation-search-type="openmct.objects.SEARCH_TYPES.NOTEBOOK_ANNOTATIONS"
:target-specific-details="{entryId: entry.id}"
/>
<div class="c-snapshots c-ne__embeds">
<NotebookEmbed
v-for="embed in entry.embeds"
:key="embed.id"
:embed="embed"
:is-locked="isLocked"
@removeEmbed="removeEmbed"
@updateEmbed="updateEmbed"
/>
@ -86,7 +101,7 @@
</div>
</div>
<div
v-if="!readOnly"
v-if="!readOnly && !isLocked"
class="c-ne__local-controls--hidden"
>
<button
@ -172,6 +187,12 @@ export default {
default() {
return true;
}
},
isLocked: {
type: Boolean,
default() {
return false;
}
}
},
computed: {
@ -229,15 +250,21 @@ export default {
this.openmct.editor.cancel();
}
},
changeCursor() {
changeCursor(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
if (!this.isLocked) {
event.dataTransfer.dropEffect = 'copy';
} else {
event.dataTransfer.dropEffect = 'none';
event.dataTransfer.effectAllowed = 'none';
}
},
deleteEntry() {
this.$emit('deleteEntry', this.entry.id);
},
async dropOnEntry($event) {
event.stopImmediatePropagation();
$event.stopImmediatePropagation();
const snapshotId = $event.dataTransfer.getData('openmct/snapshot/id');
if (snapshotId.length) {

2
src/plugins/notebook/components/PageCollection.vue
View File

@ -1,5 +1,5 @@
<template>
<ul class="c-list">
<ul class="c-list c-notebook__pages">
<li
v-for="page in pages"
:key="page.id"

68
src/plugins/notebook/components/PageComponent.vue
View File

@ -1,17 +1,33 @@
<template>
<div
class="c-list__item js-list__item"
:class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
:class="[{
'is-selected': isSelected,
'is-notebook-default' : (defaultPageId === page.id),
'icon-lock' : page.isLocked
}]"
:data-id="page.id"
@click="selectPage"
>
<span
class="c-list__item__name js-list__item__name"
:data-id="page.id"
@keydown.enter="updateName"
@blur="updateName"
>{{ page.name.length ? page.name : `Unnamed ${pageTitle}` }}</span>
<PopupMenu :popup-menu-items="popupMenuItems" />
<template v-if="!page.isLocked">
<div
class="c-list__item__name js-list__item__name"
:data-id="page.id"
:contenteditable="true"
@keydown.enter="updateName"
@blur="updateName"
>{{ pageName }}</div>
<PopupMenu
:popup-menu-items="popupMenuItems"
/>
</template>
<template v-else>
<div
class="c-list__item__name js-list__item__name"
:data-id="page.id"
:contenteditable="false"
>{{ pageName }}</div>
</template>
</div>
</template>
@ -55,16 +71,13 @@ export default {
computed: {
isSelected() {
return this.selectedPageId === this.page.id;
}
},
watch: {
page(newPage) {
this.toggleContentEditable(newPage);
},
pageName() {
return this.page.name.length ? this.page.name : `Unnamed ${this.pageTitle}`;
}
},
mounted() {
this.addPopupMenuItems();
this.toggleContentEditable();
},
methods: {
addPopupMenuItems() {
@ -95,38 +108,31 @@ export default {
},
selectPage(event) {
const target = event.target;
const page = target.closest('.js-list__item');
const input = page.querySelector('.js-list__item__name');
const id = target.dataset.id;
if (page.className.indexOf('is-selected') > -1) {
input.contentEditable = true;
input.classList.add('c-input-inline');
if (!this.page.isLocked) {
const page = target.closest('.js-list__item');
const input = page.querySelector('.js-list__item__name');
return;
if (page.className.indexOf('is-selected') > -1) {
input.classList.add('c-input-inline');
return;
}
}
const id = target.dataset.id;
if (!id) {
return;
}
this.$emit('selectPage', id);
},
toggleContentEditable(page = this.page) {
const pageTitle = this.$el.querySelector('span');
pageTitle.contentEditable = page.isSelected;
},
updateName(event) {
const target = event.target;
const name = target.textContent.toString();
target.contentEditable = false;
target.classList.remove('c-input-inline');
if (this.page.name === name) {
return;
}
if (name === '') {
if (name === '' || this.page.name === name) {
return;
}

1
src/plugins/notebook/components/SearchResults.vue
View File

@ -33,6 +33,7 @@
:read-only="true"
:selected-page="result.page"
:selected-section="result.section"
:is-locked="result.page.isLocked"
@editingEntry="editingEntry"
@cancelEdit="cancelEdit"
@changeSectionPage="changeSectionPage"

2
src/plugins/notebook/components/SectionCollection.vue
View File

@ -1,5 +1,5 @@
<template>
<ul class="c-list">
<ul class="c-list c-notebook__sections">
<li
v-for="section in sections"
:key="section.id"

49
src/plugins/notebook/components/SectionComponent.vue
View File

@ -8,10 +8,14 @@
<span
class="c-list__item__name js-list__item__name"
:data-id="section.id"
contenteditable="true"
@keydown.enter="updateName"
@blur="updateName"
>{{ section.name.length ? section.name : `Unnamed ${sectionTitle}` }}</span>
<PopupMenu :popup-menu-items="popupMenuItems" />
>{{ sectionName }}</span>
<PopupMenu
v-if="!section.isLocked"
:popup-menu-items="popupMenuItems"
/>
</div>
</template>
@ -55,16 +59,13 @@ export default {
computed: {
isSelected() {
return this.selectedSectionId === this.section.id;
}
},
watch: {
section(newSection) {
this.toggleContentEditable(newSection);
},
sectionName() {
return this.section.name.length ? this.section.name : `Unnamed ${this.sectionTitle}`;
}
},
mounted() {
this.addPopupMenuItems();
this.toggleContentEditable();
},
methods: {
addPopupMenuItems() {
@ -96,39 +97,31 @@ export default {
},
selectSection(event) {
const target = event.target;
const section = target.closest('.js-list__item');
const input = section.querySelector('.js-list__item__name');
if (section.className.indexOf('is-selected') > -1) {
input.contentEditable = true;
input.classList.add('c-input-inline');
return;
}
const id = target.dataset.id;
if (!this.section.isLocked) {
const section = target.closest('.js-list__item');
const input = section.querySelector('.js-list__item__name');
if (section.className.indexOf('is-selected') > -1) {
input.classList.add('c-input-inline');
return;
}
}
if (!id) {
return;
}
this.$emit('selectSection', id);
},
toggleContentEditable(section = this.section) {
const sectionTitle = this.$el.querySelector('span');
sectionTitle.contentEditable = section.isSelected;
},
updateName(event) {
const target = event.target;
target.contentEditable = false;
target.classList.remove('c-input-inline');
const name = target.textContent.trim();
if (this.section.name === name) {
return;
}
if (name === '') {
if (name === '' || this.section.name === name) {
return;
}

37
src/plugins/notebook/components/Sidebar.vue
View File

@ -4,16 +4,15 @@
<div class="c-sidebar__header-w">
<div class="c-sidebar__header">
<span class="c-sidebar__header-label">{{ sectionTitle }}</span>
<button
class="c-icon-button c-icon-button--major icon-plus"
@click="addSection"
>
<span class="c-list-button__label">Add</span>
</button>
</div>
</div>
<div class="c-sidebar__contents-and-controls">
<button
class="c-list-button"
@click="addSection"
>
<span class="c-button c-list-button__button icon-plus"></span>
<span class="c-list-button__label">Add {{ sectionTitle }}</span>
</button>
<SectionCollection
class="c-sidebar__contents"
:default-section-id="defaultSectionId"
@ -31,21 +30,17 @@
<div class="c-sidebar__header-w">
<div class="c-sidebar__header">
<span class="c-sidebar__header-label">{{ pageTitle }}</span>
<button
class="c-icon-button c-icon-button--major icon-plus"
@click="addPage"
>
<span class="c-icon-button__label">Add</span>
</button>
</div>
<button
class="c-click-icon c-click-icon--major icon-x-in-circle"
@click="toggleNav"
></button>
</div>
<div class="c-sidebar__contents-and-controls">
<button
class="c-list-button"
@click="addPage"
>
<span class="c-button c-list-button__button icon-plus"></span>
<span class="c-list-button__label">Add {{ pageTitle }}</span>
</button>
<PageCollection
ref="pageCollection"
class="c-sidebar__contents"
@ -63,6 +58,12 @@
/>
</div>
</div>
<div class="c-sidebar__right-edge">
<button
class="c-icon-button c-icon-button--major icon-line-horz"
@click="toggleNav"
></button>
</div>
</div>
</template>

44
src/plugins/notebook/components/sidebar.scss
View File

@ -3,19 +3,18 @@
background: $sideBarBg;
display: flex;
justify-content: stretch;
max-width: 300px;
max-width: 600px;
&.c-drawer--push.is-expanded {
margin-right: $interiorMargin;
width: 50%;
width: 30%;
}
&.c-drawer--overlays.is-expanded {
width: 95%;
}
> * {
// Hardcoded for two columns
&__pane {
background: $sideBarBg;
display: flex;
flex: 1 1 50%;
@ -31,32 +30,30 @@
}
}
&__pane {
> * + * { margin-top: $interiorMargin; }
&__right-edge {
flex: 0 0 auto;
padding: $interiorMarginSm;
}
&__header-w {
// Wraps header, used for page pane with collapse button
// Wraps header, used for page pane with collapse buttons
display: flex;
flex: 0 0 auto;
background: $sideBarHeaderBg;
align-items: center;
.c-icon-button {
font-size: 0.8em;
color: $colorBodyFg;
}
}
&__header {
color: $sideBarHeaderFg;
display: flex;
align-items: center;
flex: 1 1 auto;
padding: $interiorMargin;
padding: $interiorMarginSm $interiorMargin;
text-transform: uppercase;
> * {
&-label {
@include ellipsize();
flex: 1 1 auto;
}
}
@ -66,17 +63,8 @@
flex-direction: column;
flex: 1 1 auto;
> * {
margin: auto $interiorMargin $interiorMargin $interiorMargin;
&:first-child {
border-bottom: 1px solid $colorInteriorBorder;
flex: 0 0 auto;
}
+ * {
margin-top: $interiorMargin;
}
> * + * {
margin-top: $interiorMargin;
}
}
@ -87,12 +75,6 @@
padding: auto $interiorMargin;
}
.c-list-button {
.c-button {
font-size: 0.8em;
}
}
.c-list__item {
@include hover() {
[class*="__menu-indicator"] {

4
src/plugins/notebook/monkeyPatchObjectAPIForNotebooks.js
View File

@ -1,10 +1,10 @@
import {NOTEBOOK_TYPE} from './notebook-constants';
import { isNotebookType } from './notebook-constants';
export default function (openmct) {
const apiSave = openmct.objects.save.bind(openmct.objects);
openmct.objects.save = async (domainObject) => {
if (domainObject.type !== NOTEBOOK_TYPE) {
if (!isNotebookType(domainObject)) {
return apiSave(domainObject);
}

13
src/plugins/notebook/notebook-constants.js
View File

@ -1,5 +1,18 @@
export const NOTEBOOK_TYPE = 'notebook';
export const RESTRICTED_NOTEBOOK_TYPE = 'restricted-notebook';
export const EVENT_SNAPSHOTS_UPDATED = 'SNAPSHOTS_UPDATED';
export const NOTEBOOK_DEFAULT = 'DEFAULT';
export const NOTEBOOK_SNAPSHOT = 'SNAPSHOT';
export const NOTEBOOK_VIEW_TYPE = 'notebook-vue';
export const RESTRICTED_NOTEBOOK_VIEW_TYPE = 'restricted-notebook-vue';
export const NOTEBOOK_INSTALLED_KEY = '_NOTEBOOK_PLUGIN_INSTALLED';
export const RESTRICTED_NOTEBOOK_INSTALLED_KEY = '_RESTRICTED_NOTEBOOK_PLUGIN_INSTALLED';
// these only deals with constants, figured this could skip going into a utils file
export function isNotebookType(domainObject) {
return [NOTEBOOK_TYPE, RESTRICTED_NOTEBOOK_TYPE].includes(domainObject.type);
}
export function isNotebookViewType(view) {
return [NOTEBOOK_VIEW_TYPE, RESTRICTED_NOTEBOOK_VIEW_TYPE].includes(view);
}

297
src/plugins/notebook/plugin.js
View File

@ -1,178 +1,155 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2022, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
import CopyToNotebookAction from './actions/CopyToNotebookAction';
import Notebook from './components/Notebook.vue';
import NotebookSnapshotIndicator from './components/NotebookSnapshotIndicator.vue';
import NotebookViewProvider from './NotebookViewProvider';
import NotebookType from './NotebookType';
import SnapshotContainer from './snapshot-container';
import monkeyPatchObjectAPIForNotebooks from './monkeyPatchObjectAPIForNotebooks.js';
import { notebookImageMigration, IMAGE_MIGRATION_VER } from '../notebook/utils/notebook-migration';
import { NOTEBOOK_TYPE } from './notebook-constants';
import { notebookImageMigration } from '../notebook/utils/notebook-migration';
import {
NOTEBOOK_TYPE,
RESTRICTED_NOTEBOOK_TYPE,
NOTEBOOK_VIEW_TYPE,
RESTRICTED_NOTEBOOK_VIEW_TYPE,
NOTEBOOK_INSTALLED_KEY,
RESTRICTED_NOTEBOOK_INSTALLED_KEY
} from './notebook-constants';
import Vue from 'vue';
import Agent from '@/utils/agent/Agent';
export default function NotebookPlugin() {
let notebookSnapshotContainer;
function getSnapshotContainer(openmct) {
if (!notebookSnapshotContainer) {
notebookSnapshotContainer = new SnapshotContainer(openmct);
}
return notebookSnapshotContainer;
}
function addLegacyNotebookGetInterceptor(openmct) {
openmct.objects.addGetInterceptor({
appliesTo: (identifier, domainObject) => {
return domainObject && domainObject.type === NOTEBOOK_TYPE;
},
invoke: (identifier, domainObject) => {
notebookImageMigration(openmct, domainObject);
return domainObject;
}
});
}
function installBaseNotebookFunctionality(openmct) {
// only need to do this once
if (openmct[NOTEBOOK_INSTALLED_KEY] || openmct[RESTRICTED_NOTEBOOK_INSTALLED_KEY]) {
return;
}
const snapshotContainer = getSnapshotContainer(openmct);
const notebookSnapshotImageType = {
name: 'Notebook Snapshot Image Storage',
description: 'Notebook Snapshot Image Storage object',
creatable: false,
initialize: domainObject => {
domainObject.configuration = {
fullSizeImageURL: undefined,
thumbnailImageURL: undefined
};
}
};
openmct.types.addType('notebookSnapshotImage', notebookSnapshotImageType);
openmct.actions.register(new CopyToNotebookAction(openmct));
const notebookSnapshotIndicator = new Vue ({
components: {
NotebookSnapshotIndicator
},
provide: {
openmct,
snapshotContainer
},
template: '<NotebookSnapshotIndicator></NotebookSnapshotIndicator>'
});
const indicator = {
element: notebookSnapshotIndicator.$mount().$el,
key: 'notebook-snapshot-indicator',
priority: openmct.priority.DEFAULT
};
openmct.indicators.add(indicator);
monkeyPatchObjectAPIForNotebooks(openmct);
}
function NotebookPlugin(name = 'Notebook') {
return function install(openmct) {
if (openmct._NOTEBOOK_PLUGIN_INSTALLED) {
if (openmct[NOTEBOOK_INSTALLED_KEY]) {
return;
} else {
openmct._NOTEBOOK_PLUGIN_INSTALLED = true;
}
openmct.actions.register(new CopyToNotebookAction(openmct));
const agent = new Agent(window);
const notebookType = {
name: 'Notebook',
description: 'Create and save timestamped notes with embedded object snapshots.',
creatable: true,
cssClass: 'icon-notebook',
initialize: domainObject => {
domainObject.configuration = {
defaultSort: 'oldest',
entries: {},
imageMigrationVer: IMAGE_MIGRATION_VER,
pageTitle: 'Page',
sections: [],
sectionTitle: 'Section',
type: 'General'
};
},
form: [
{
key: 'defaultSort',
name: 'Entry Sorting',
control: 'select',
options: [
{
name: 'Newest First',
value: "newest"
},
{
name: 'Oldest First',
value: "oldest"
}
],
cssClass: 'l-inline',
property: [
"configuration",
"defaultSort"
]
},
{
key: 'type',
name: 'Note book Type',
control: 'textfield',
cssClass: 'l-inline',
property: [
"configuration",
"type"
]
},
{
key: 'sectionTitle',
name: 'Section Title',
control: 'textfield',
cssClass: 'l-inline',
required: true,
property: [
"configuration",
"sectionTitle"
]
},
{
key: 'pageTitle',
name: 'Page Title',
control: 'textfield',
cssClass: 'l-inline',
required: true,
property: [
"configuration",
"pageTitle"
]
}
]
};
const icon = 'icon-notebook';
const description = 'Create and save timestamped notes with embedded object snapshots.';
const snapshotContainer = getSnapshotContainer(openmct);
addLegacyNotebookGetInterceptor(openmct);
const notebookType = new NotebookType(name, description, icon);
openmct.types.addType(NOTEBOOK_TYPE, notebookType);
const notebookSnapshotImageType = {
name: 'Notebook Snapshot Image Storage',
description: 'Notebook Snapshot Image Storage object',
creatable: false,
initialize: domainObject => {
domainObject.configuration = {
fullSizeImageURL: undefined,
thumbnailImageURL: undefined
};
}
};
openmct.types.addType('notebookSnapshotImage', notebookSnapshotImageType);
const notebookView = new NotebookViewProvider(openmct, name, NOTEBOOK_VIEW_TYPE, NOTEBOOK_TYPE, icon, snapshotContainer);
openmct.objectViews.addProvider(notebookView);
const snapshotContainer = new SnapshotContainer(openmct);
const notebookSnapshotIndicator = new Vue ({
components: {
NotebookSnapshotIndicator
},
provide: {
openmct,
snapshotContainer
},
template: '<NotebookSnapshotIndicator></NotebookSnapshotIndicator>'
});
const indicator = {
element: notebookSnapshotIndicator.$mount().$el,
key: 'notebook-snapshot-indicator',
priority: openmct.priority.DEFAULT
};
installBaseNotebookFunctionality(openmct);
openmct.indicators.add(indicator);
openmct.objectViews.addProvider({
key: 'notebook-vue',
name: 'Notebook View',
cssClass: 'icon-notebook',
canView: function (domainObject) {
return domainObject.type === 'notebook';
},
view: function (domainObject) {
let component;
return {
show(container) {
component = new Vue({
el: container,
components: {
Notebook
},
provide: {
agent,
openmct,
snapshotContainer
},
data() {
return {
domainObject
};
},
template: '<Notebook :domain-object="domainObject"></Notebook>'
});
},
destroy() {
component.$destroy();
}
};
}
});
openmct.objects.addGetInterceptor({
appliesTo: (identifier, domainObject) => {
return domainObject && domainObject.type === 'notebook';
},
invoke: (identifier, domainObject) => {
notebookImageMigration(openmct, domainObject);
return domainObject;
}
});
monkeyPatchObjectAPIForNotebooks(openmct);
openmct[NOTEBOOK_INSTALLED_KEY] = true;
};
}
function RestrictedNotebookPlugin(name = 'Notebook Shift Log') {
return function install(openmct) {
if (openmct[RESTRICTED_NOTEBOOK_INSTALLED_KEY]) {
return;
}
const icon = 'icon-notebook-shift-log';
const description = 'Create and save timestamped notes with embedded object snapshots with the ability to commit and lock pages.';
const snapshotContainer = getSnapshotContainer(openmct);
const notebookType = new NotebookType(name, description, icon);
openmct.types.addType(RESTRICTED_NOTEBOOK_TYPE, notebookType);
const notebookView = new NotebookViewProvider(openmct, name, RESTRICTED_NOTEBOOK_VIEW_TYPE, RESTRICTED_NOTEBOOK_TYPE, icon, snapshotContainer);
openmct.objectViews.addProvider(notebookView);
installBaseNotebookFunctionality(openmct);
openmct[RESTRICTED_NOTEBOOK_INSTALLED_KEY] = true;
};
}
export {
NotebookPlugin,
RestrictedNotebookPlugin
};

4
src/plugins/notebook/pluginSpec.js
View File

@ -21,7 +21,7 @@
*****************************************************************************/
import { createOpenMct, createMouseEvent, resetApplicationState } from 'utils/testing';
import notebookPlugin from './plugin';
import { NotebookPlugin } from './plugin';
import Vue from 'vue';
describe("Notebook plugin:", () => {
@ -55,7 +55,7 @@ describe("Notebook plugin:", () => {
child = document.createElement('div');
element.appendChild(child);
openmct.install(notebookPlugin());
openmct.install(NotebookPlugin());
originalAnnotations = openmct.annotation.getNotebookAnnotation;
// eslint-disable-next-line require-await
openmct.annotation.getNotebookAnnotation = async function () {

4
src/plugins/persistence/couch/CouchObjectProvider.js
View File

@ -22,7 +22,7 @@
import CouchDocument from "./CouchDocument";
import CouchObjectQueue from "./CouchObjectQueue";
import { NOTEBOOK_TYPE } from '../../notebook/notebook-constants.js';
import { isNotebookType } from '../../notebook/notebook-constants.js';
const REV = "_rev";
const ID = "_id";
@ -185,7 +185,7 @@ class CouchObjectProvider {
this.objectQueue[key] = new CouchObjectQueue(undefined, response[REV]);
}
if (object.type === NOTEBOOK_TYPE) {
if (isNotebookType(object)) {
//Temporary measure until object sync is supported for all object types
//Always update notebook revision number because we have realtime sync, so always assume it's the latest.
this.objectQueue[key].updateRevision(response[REV]);

3
src/plugins/plugins.js
View File

@ -186,7 +186,8 @@ define([
plugins.SummaryWidget = SummaryWidget;
plugins.TelemetryMean = TelemetryMean;
plugins.URLIndicator = URLIndicatorPlugin;
plugins.Notebook = Notebook.default;
plugins.Notebook = Notebook.NotebookPlugin;
plugins.RestrictedNotebook = Notebook.RestrictedNotebookPlugin;
plugins.DisplayLayout = DisplayLayoutPlugin.default;
plugins.FormActions = FormActions;
plugins.FolderView = FolderView;

2
src/styles/_constants-espresso.scss
View File

@ -94,7 +94,7 @@ $shellPanePad: $interiorMargin, 7px;
$drawerBg: lighten($colorBodyBg, 5%);
$drawerFg: lighten($colorBodyFg, 5%);
$sideBarBg: $drawerBg;
$sideBarHeaderBg: rgba($colorBodyFg, 0.2);
$sideBarHeaderBg: rgba($colorBodyFg, 0.1);
$sideBarHeaderFg: rgba($colorBodyFg, 0.7);
// Status colors, mainly used for messaging and item ancillary symbols

BIN
src/styles/fonts/Open-MCT-Symbols-16px.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Open-MCT-Symbols-16px.woff
View File

Binary file not shown.

116
src/styles/notebook.scss
View File

@ -45,13 +45,13 @@
&__nav {
flex: 0 0 auto;
* {
overflow: hidden;
}
}
.c-sidebar {
background: $sideBarBg;
.c-sidebar__pane {
flex-basis: 50%;
}
@ -75,8 +75,10 @@
flex: 1 1 auto;
flex-direction: column;
width: 100%;
> * {
flex: 0 0 auto;
+ * {
margin-top: $interiorMargin;
}
@ -111,18 +113,23 @@
flex: 1 1 auto;
}
&__page-locked,
&__drag-area {
// TODO: recast this element to use c-drop-hint element
background: rgba($colorKey, 0.1);
border: 1px dashed rgba($colorKey, 0.7);
border-radius: $controlCr;
color: rgba($colorBodyFg, 0.7);
padding: 10px;
cursor: pointer;
&:before {
margin-right: 7px !important;
}
}
&__drag-area {
background: rgba($colorKey, 0.1);
border: 1px dashed rgba($colorKey, 0.7);
color: $colorKey;
cursor: pointer;
justify-content: center;
[class*="__label"] {
font-style: italic;
@ -131,7 +138,7 @@
&:hover {
background: rgba($colorKey, 0.2);
color: $colorBodyFg;
//color: $colorBodyFg;
}
&.drag-active,
@ -151,6 +158,7 @@
display: flex;
flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
line-height: 220%;
> * {
flex: 0 0 auto;
}
@ -162,9 +170,11 @@
overflow: hidden;
white-space: nowrap;
font-size: $headerFontSize;
> * {
// Section
flex: 0 0 auto;
+ * {
// Page
display: inline;
@ -188,6 +198,13 @@
[class*="__entry"] + [class*="__entry"] {
margin-top: $interiorMarginSm;
}
.commit-button {
@include cButton();
position: absolute;
right: 5px;
bottom: 5px;
}
}
/***** SEARCH RESULTS */
@ -218,6 +235,30 @@
}
}
}
/***** RESTRICTED NOTEBOOK */
&__page-locked {
background: rgba($colorAlert, 0.2);
display: flex;
padding: 5px;
> * + * {
margin-left: $interiorMargin;
}
[class*='icon'] {
flex: 0 0 auto;
}
[class*='__message'] {
flex: 1 1 auto;
}
}
&__commit-entries-control {
display: flex;
justify-content: flex-end;
}
}
.is-notebook-default,
@ -287,9 +328,9 @@
flex-direction: column;
flex: 1 1 auto;
> * + * {
margin-top: $interiorMargin;
}
> [class*="__"] + [class*="__"] {
margin-top: $interiorMarginSm;
}
}
&__text {
@ -311,8 +352,8 @@
padding-right: $p;
@include hover {
&:not(:focus) {
background: rgba($colorBodyFg, 0.2);
&:not(:focus, .locked) {
background: rgba($colorBodyFg, 0.1);
}
}
@ -412,6 +453,7 @@
@include snapThumb();
}
}
/****************************** SNAPSHOTTING */
// LEGACY: TODO: refactor these names
.t-contents,
@ -426,7 +468,10 @@
color: $colorBodyFg;
padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
.l-sticky-headers .l-tabular-body { overflow: auto; }
.l-sticky-headers .l-tabular-body {
overflow: auto;
}
.l-browse-bar {
display: none; // Suppress browse-bar when snapshotting from view-large overlay
+ * {
@ -470,6 +515,7 @@
> * {
flex: 1 1 auto;
&:first-child {
flex: 0 0 auto;
}
@ -507,13 +553,19 @@
display: flex;
flex-direction: column;
position: absolute;
top: $m; right: 0; bottom: $m; left: 0; // LEGACY, deal with .editor border-radius clipping stuff
top: $m;
right: 0;
bottom: $m;
left: 0; // LEGACY, deal with .editor border-radius clipping stuff
}
#snap-annotation-wrapper,
#snap-annotation-bar {
position: relative;
top: auto; right: auto; bottom: auto; left: auto;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
#snap-annotation-wrapper {
@ -541,7 +593,9 @@
> div {
display: contents;
> * + * { margin-left: $interiorMargin !important; }
> * + * {
margin-left: $interiorMargin !important;
}
}
.ptro-tool-controls {
@ -613,7 +667,7 @@
}
.ptro-color-active-control {
background: $colorBtnMajorBg !important;
background: $colorBtnMajorBg !important;
color: $colorBtnMajorFg !important;
}
@ -631,7 +685,10 @@
/****************************** MOBILE */
body.mobile {
.c-notebook__drag-area { display: none; }
.c-notebook__drag-area {
display: none;
}
.c-notebook__entry {
[class*="local-controls"] {
display: none;
@ -664,3 +721,26 @@ body.mobile {
$c: $colorOk;
@include pulseProp($animName: flashSnapshot, $dur: 500ms, $iter: infinite, $prop: background, $valStart: rgba($c, 0.4), $valEnd: rgba($c, 0));
}
/****************************** RESTRICTED NOTEBOOK / SHIFT LOG */
.c-notebook--restricted {
.c-notebook__pages {
.c-list__item {
// Can display lock icon when a page is committed.
&:before {
$s: 0.8em;
color: $colorAlert;
display: block;
font-size: $s;
width: $s;
margin-right: $interiorMarginSm;
}
&:not([class*='lock']) {
&:before {
content: '';
}
}
}
}
}

42
src/ui/layout/CreateButton.vue
View File

@ -19,32 +19,18 @@ import objectUtils from 'objectUtils';
export default {
inject: ['openmct'],
data: function () {
let items = [];
this.openmct.types.listKeys().forEach(key => {
let menuItem = this.openmct.types.get(key).definition;
if (menuItem.creatable) {
let menuItemTemplate = {
cssClass: menuItem.cssClass,
name: menuItem.name,
description: menuItem.description,
onItemClicked: () => this.create(key)
};
items.push(menuItemTemplate);
}
});
return {
items: items,
menuItems: {},
selectedMenuItem: {},
opened: false
};
},
computed: {
sortedItems() {
return this.items.slice().sort((a, b) => {
let items = this.getItems();
return items.sort((a, b) => {
if (a.name < b.name) {
return -1;
} else if (a.name > b.name) {
@ -56,6 +42,26 @@ export default {
}
},
methods: {
getItems() {
let keys = this.openmct.types.listKeys();
keys.forEach(key => {
if (!this.menuItems[key]) {
let typeDef = this.openmct.types.get(key).definition;
if (typeDef.creatable) {
this.menuItems[key] = {
cssClass: typeDef.cssClass,
name: typeDef.name,
description: typeDef.description,
onItemClicked: () => this.create(key)
};
}
}
});
return Object.values(this.menuItems);
},
showCreateMenu() {
const elementBoundingClientRect = this.$refs.createButton.getBoundingClientRect();
const x = elementBoundingClientRect.x;

24
src/ui/layout/mct-tree.scss
View File

@ -6,7 +6,9 @@
flex: 1 1 auto;
overflow: auto;
> * + * { margin-top: $interiorMargin; }
> * + * {
margin-top: $interiorMargin;
}
&__search {
flex: 0 0 auto;
@ -59,7 +61,6 @@
@include userSelectNone();
overflow-x: hidden;
overflow-y: auto;
padding-right: $interiorMarginSm;
.icon-arrow-nav-to-parent {
visibility: hidden;
@ -71,6 +72,7 @@
li {
position: relative;
&[class*="__item-h"] {
display: block;
width: 100%;
@ -82,7 +84,6 @@
}
&__item {
border-radius: $controlCr;
display: flex;
align-items: center;
cursor: pointer;
@ -107,12 +108,14 @@
color: $colorItemTreeSelectedFg;
}
}
&.is-new {
animation-name: animTemporaryHighlight;
animation-timing-function: ease-out;
animation-duration: 3s;
animation-iteration-count: 1;
}
&.is-context-clicked {
box-shadow: inset $colorItemTreeSelectedBg 0 0 0 1px;
}
@ -128,11 +131,15 @@
}
.c-tree {
padding-right: $interiorMarginSm;
.c-tree {
margin-left: 15px;
}
&__item {
border-radius: $smallCr;
[class*="view-control"] {
padding: 2px 10px;
}
@ -161,6 +168,7 @@
@include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
height: $mobileTreeItemH;
margin-bottom: $interiorMarginSm;
[class*="view-control"] {
width: ceil($mobileTreeItemH * 0.5);
}
@ -202,10 +210,11 @@
.c-tree {
&__item {
body.mobile & {
body.mobile & {
@include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
height: $mobileTreeItemH;
margin-bottom: $interiorMarginSm;
[class*="view-control"] {
width: ceil($mobileTreeItemH * 0.5);
}
@ -218,9 +227,9 @@
}
.c-list {
padding-right: $interiorMargin;
&__item {
border-radius: $smallCr;
&__name {
$p: $interiorMarginSm;
@include ellipsize();
@ -254,7 +263,8 @@
content: '';
display: block;
position: absolute;
left: 50%; top: 50%;
left: 50%;
top: 50%;
height: $dimension;
width: $dimension;
}

6
src/ui/layout/mct-tree.vue
View File

@ -448,7 +448,7 @@ export default {
},
scrollTo(navigationPath) {
if (this.isItemInView(navigationPath)) {
if (!this.$refs.scrollable || this.isItemInView(navigationPath)) {
return;
}
@ -467,6 +467,10 @@ export default {
}
},
scrollEndEvent() {
if (!this.$refs.srcrollable) {
return;
}
this.$nextTick(() => {
if (this.scrollToPath) {
if (!this.isItemInView(this.scrollToPath)) {