Skip to content
This repository has been archived by the owner on Nov 7, 2022. It is now read-only.

Commit

Permalink
Merge pull request #291 from adobe/issue-290
Browse files Browse the repository at this point in the history
feat: advanced mode
  • Loading branch information
rofe authored Apr 12, 2022
2 parents a62bf08 + 27d4e09 commit 48e979b
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 3 deletions.
14 changes: 14 additions & 0 deletions src/sidekick/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,7 @@
background-color: var(--hlx-sk-dropdown-container-bg);
border-radius: var(--hlx-sk-button-border-radius);
box-shadow: var(--hlx-sk-shadow);
overflow: hidden;
}

.hlx-sk .dropdown button:hover,
Expand Down Expand Up @@ -589,6 +590,14 @@
display: none;
}

.hlx-sk-advanced-only {
display: none;
}

.hlx-sk.hlx-sk-advanced .hlx-sk-advanced-only {
display: initial;
}

.hlx-sk-hidden {
display: none !important;
}
Expand Down Expand Up @@ -769,6 +778,11 @@
content: "View";
}

.hlx-sk .env.dev .dropdown-toggle::before,
.hlx-sk .env .dev button::before {
content: "Development";
}

.hlx-sk .env.preview .dropdown-toggle::before,
.hlx-sk .env .preview button::before,
.hlx-sk .edit-preview button::before {
Expand Down
5 changes: 5 additions & 0 deletions src/sidekick/de.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@
content: "Ansicht";
}

.hlx-sk .env.dev .dropdown-toggle::before,
.hlx-sk .env .dev button::before {
content: "Entwicklung";
}

.hlx-sk .env.preview .dropdown-toggle::before,
.hlx-sk .env .preview button::before,
.hlx-sk .edit-preview button::before {
Expand Down
5 changes: 5 additions & 0 deletions src/sidekick/fr.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@
content: "Voir";
}

.hlx-sk .env.dev .dropdown-toggle::before,
.hlx-sk .env .dev button::before {
content: "Développement";
}

.hlx-sk .env.preview .dropdown-toggle::before,
.hlx-sk .env .preview button::before,
.hlx-sk .edit-preview button::before {
Expand Down
45 changes: 43 additions & 2 deletions src/sidekick/module.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@
* @prop {elemConfig[]} elements An array of elements to add (optional)
* @prop {Function} condition Determines whether to show this plugin (optional).
* This function is expected to return a boolean when called with the sidekick as argument.
* @prop {Function} advanced Show this plugin only in advanced mode (optional).
* This function is expected to return a boolean when called with the sidekick as argument.
* @prop {Function} callback A function called after adding the plugin (optional).
* This function is called with the sidekick and the newly added plugin as arguments.
*/
Expand Down Expand Up @@ -235,6 +237,7 @@
* @type {Object}
*/
const ENVS = {
dev: 'localhost',
preview: 'innerHost',
live: 'outerHost',
prod: 'host',
Expand Down Expand Up @@ -791,6 +794,25 @@
* @param {Sidekick} sk The sidekick
*/
function addEnvPlugins(sk) {
// dev
sk.add({
id: 'dev',
container: 'env',
condition: (sidekick) => sidekick.isEditor() || sidekick.isHelix(),
button: {
action: async (evt) => {
if (evt.target.classList.contains('pressed')) {
return;
}
sk.switchEnv('dev', newTab(evt));
},
isPressed: (sidekick) => sidekick.isDev(),
isEnabled: (sidekick) => sidekick.isDev()
|| (sidekick.status.preview && sidekick.status.preview.lastModified),
},
advanced: (sidekick) => !sidekick.isDev(),
});

// preview
sk.add({
id: 'preview',
Expand Down Expand Up @@ -824,6 +846,7 @@
isEnabled: (sidekick) => sidekick.isOuter()
|| (sidekick.status.live && sidekick.status.live.lastModified),
},
advanced: (sidekick) => !!sidekick.config.host,
});

// production
Expand Down Expand Up @@ -1514,6 +1537,18 @@
hideSpecialView(this);
revertPushDownContent(this);
},
keydown: ({ altKey }) => {
if (altKey) {
// enable advanced mode
this.root.classList.add('hlx-sk-advanced');
}
},
keyup: ({ altKey }) => {
if (!altKey) {
// disable advanced mode
this.root.classList.remove('hlx-sk-advanced');
}
},
},
});
this.status = {};
Expand Down Expand Up @@ -1761,6 +1796,7 @@
}),
this.featureContainer.firstElementChild,
);
if (this.isDev()) $envDropdown.classList.add('dev');
if (this.isInner()) $envDropdown.classList.add('preview');
if (this.isOuter()) $envDropdown.classList.add('live');
if (this.isProd()) $envDropdown.classList.add('prod');
Expand Down Expand Up @@ -1863,6 +1899,10 @@
button: $button,
}));
}
// check advanced mode
if (plugin.advanced && typeof plugin.advanced === 'function' && plugin.advanced(this)) {
$plugin.classList.add('hlx-sk-advanced-only');
}
if (typeof plugin.callback === 'function') {
plugin.callback(this, $plugin);
}
Expand Down Expand Up @@ -2308,7 +2348,7 @@
/**
* Switches to (or opens) a given environment.
* @param {string} targetEnv One of the following environments:
* <pre>edit</pre>, <pre>preview</pre>, <pre>live</pre> or <pre>prod</pre>
* <pre>dev</pre>, <pre>preview</pre>, <pre>live</pre> or <pre>prod</pre>
* @param {boolean} open=false <pre>true</pre> if environment should be opened in new tab
* @fires Sidekick#envswitched
* @returns {Sidekick} The sidekick
Expand All @@ -2329,7 +2369,8 @@
window.setTimeout(() => this.switchEnv(targetEnv, open), 1000);
return this;
}
let envUrl = `https://${config[hostType]}${status.webPath}`;
const envOrigin = targetEnv === 'dev' ? DEV_URL.origin : `https://${config[hostType]}`;
let envUrl = `${envOrigin}${status.webPath}`;
if (!this.isEditor()) {
envUrl += `${search}${hash}`;
}
Expand Down
2 changes: 1 addition & 1 deletion test/app.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe('Test sidekick bookmarklet', () => {
assert.strictEqual(innerHost, 'main--blog--adobe.hlx.page', `Unexpected innerHost: ${innerHost}`);
assert.strictEqual(outerHost, 'main--blog--adobe.hlx.live', `Unexpected outerHost: ${innerHost}`);
// check plugins
assert.strictEqual(plugins.length, 9, `Wrong number of plugins: ${plugins.length}`);
assert.strictEqual(plugins.length, 10, `Wrong number of plugins: ${plugins.length}`);
}).timeout(IT_DEFAULT_TIMEOUT);

it('Handles errors fetching status from admin API', async () => {
Expand Down
86 changes: 86 additions & 0 deletions test/dev.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/*
* Copyright 2021 Adobe. All rights reserved.
* This file is licensed to you 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 REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
/* eslint-env mocha */

'use strict';

const assert = require('assert');

const {
IT_DEFAULT_TIMEOUT,
startBrowser,
stopBrowser,
} = require('./utils.js');
const { SidekickTest } = require('./SidekickTest.js');

describe('Test dev plugin', () => {
beforeEach(startBrowser);
afterEach(stopBrowser);

it('Dev plugin hidden by default', async () => {
const { plugins } = await new SidekickTest().run();
assert.ok(
plugins.find((p) => p.id === 'dev' && p.classes.includes('hlx-sk-advanced-only')),
'Dev plugin not hidden by default',
);
}).timeout(IT_DEFAULT_TIMEOUT);

it('Dev plugin switches to dev from gdrive URL', async () => {
const { popupOpened } = await new SidekickTest({
setup: 'pages',
url: 'https://docs.google.com/document/d/2E1PNphAhTZAZrDjevM0BX7CZr7KjomuBO6xE1TUo9NU/edit',
plugin: 'dev',
pluginSleep: 2000,
}).run();
assert.strictEqual(
popupOpened,
'http://localhost:3000/creativecloud/en/test',
'Dev URL not opened',
);
}).timeout(IT_DEFAULT_TIMEOUT);

it('Dev plugin switches to dev from onedrive URL', async () => {
const { popupOpened } = await new SidekickTest({
url: 'https://adobe.sharepoint.com/:w:/r/sites/TheBlog/_layouts/15/Doc.aspx?sourcedoc=%7BE8EC80CB-24C3-4B95-B082-C51FD8BC8760%7D&file=bla.docx&action=default&mobileredirect=true',
plugin: 'dev',
pluginSleep: 2000,
}).run();
assert.strictEqual(
popupOpened,
'http://localhost:3000/en/topics/bla',
'Dev URL not opened',
);
}).timeout(IT_DEFAULT_TIMEOUT);

it('Dev plugin switches to dev from preview URL', async () => {
const { requestsMade } = await new SidekickTest({
plugin: 'dev',
}).run();
assert.strictEqual(
requestsMade.pop().url,
'http://localhost:3000/en/topics/bla',
'Dev URL not opened',
);
}).timeout(IT_DEFAULT_TIMEOUT);

it('Dev plugin switches to dev from production URL', async () => {
const { requestsMade } = await new SidekickTest({
url: 'https://blog.adobe.com/en/topics/bla',
plugin: 'dev',
}).run();
assert.strictEqual(
requestsMade.pop().url,
'http://localhost:3000/en/topics/bla',
'Live URL not opened',
);
}).timeout(IT_DEFAULT_TIMEOUT);
});
10 changes: 10 additions & 0 deletions test/live.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,16 @@ describe('Test live plugin', () => {
assert.ok(plugins.find((p) => p.id === 'live'), 'Live plugin not found');
}).timeout(IT_DEFAULT_TIMEOUT);

it('Live plugin hidden with production host', async () => {
const test = new SidekickTest();
test.sidekickConfig.host = 'blog.adobe.com';
const { plugins } = await test.run();
assert.ok(
plugins.find((p) => p.id === 'live' && p.classes.includes('hlx-sk-advanced-only')),
'Live plugin not hidden with production host',
);
}).timeout(IT_DEFAULT_TIMEOUT);

it('Live plugin switches to live from gdrive URL', async () => {
const { popupOpened } = await new SidekickTest({
setup: 'pages',
Expand Down

0 comments on commit 48e979b

Please sign in to comment.