Skip to content

Commit

Permalink
[production] disabled options settings in production mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@nxmatic
nxmatic committed Jul 12, 2024
1 parent 1e9baf1 commit c25557e
Show file tree
Hide file tree
Showing 8 changed files with 722 additions and 91 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@rollup/plugin-inject": "^5.0.5",
"chai": "^5.1.1",
"concurrently": "^8.2.2",
"cssnano": "^7.0.4",
"dotenv": "^16.4.5",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.29.1",
Expand Down
584 changes: 584 additions & 0 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/main/main-chrome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import ServiceWorker from './service-worker';
const buildTime = import.meta.env.VITE_BUILD_TIMESTAMP;
const buildVersion = import.meta.env.VITE_BUILD_VERSION;
const browserVendor = import.meta.env.VITE_BROWSER_VENDOR;
const developmentMode = import.meta.env.VITE_DEVELOPMENT_MODE;
const developmentMode = import.meta.env.VITE_DEVELOPMENT_MODE === 'true';

self.addEventListener('activate', new ServiceWorker(developmentMode, buildTime, buildVersion, browserVendor)
.asPromise()
Expand Down
19 changes: 11 additions & 8 deletions src/main/runtime-build-info.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable no-return-assign */
/* eslint-disable max-classes-per-file */
import ServiceWorkerComponent from './service-worker-component';

Expand Down Expand Up @@ -53,26 +54,28 @@ class DevelopmentMode extends ServiceWorkerComponent {
}

isEnabled() {
return this._isEnabled;
return this.asPromise().then((self) => self._isEnabled);
}

toggle() {
this._isEnabled = !this._isEnabled;
return this.asPromise().then((self) => (self._isEnabled = !self._isEnabled));
}

setFeatureFlag(flag, value) {
this._featureFlags[flag] = value;
return this.asPromise().then((self) => (self._featureFlags[flag] = value));
}

isFeatureFlagSet(flag) {
if (!this._featureFlags[flag]) {
return false;
}
return this._featureFlags[flag];
return this.asPromise().then((self) => {
if (!self._featureFlags[flag]) {
return false;
}
return self._featureFlags[flag];
});
}

toggleFeatureFlag(flag) {
this._featureFlags[flag] = !this._featureFlags[flag];
return this.asPromise().then((self) => (self._featureFlags[flag] = !self._featureFlags[flag]));
}

asConsole() {
Expand Down
16 changes: 16 additions & 0 deletions src/popup/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,22 @@ label[for="studio-package-name-input"] {
width: 380px;
}

/*==============================================================================
FORMS
==============================================================================*/

.read-only-form input,
.read-only-form textarea,
.read-only-form select {
background-color: #f3f3f3; /* Light grey background */
color: #666; /* Darker text */
border: 1px solid #ccc; /* Light grey border */
}

.read-only-form select {
pointer-events: none; /* Prevent opening dropdown */
}

/*==============================================================================
BUTTONS
==============================================================================*/
Expand Down
8 changes: 5 additions & 3 deletions src/popup/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,11 @@
<label for="highlight-input" id="highlight-label">Highlight JSON</label>
<input type="checkbox" id="highlight-input" class="form" name="highlight">
</div>
<span class="reset" id="reset"> &#128683;</span>
<span class="save" id="save"> &#128190;</span>
<span class="grant" id="grant"><i class="fas fa-lock"></i></span>
<div id="buttons">
<span class="reset" id="reset"> &#128683;</span>
<span class="save" id="save"> &#128190;</span>
<span class="grant" id="grant"><i class="fas fa-lock"></i></span>
</div>
</form>
</li>
</ul>
Expand Down
173 changes: 97 additions & 76 deletions src/popup/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ function loadPage(worker) {
if (!error) return;
let info = {
title: 'Oops...',
text: 'Something went wrong while loading!',
footer: 'Why do I have this issue?',
text: 'An internal error comes up while loading the popup!',
footer: 'Please open the JavaScript console for more details, use inspect for having access to.',
icon: 'error',
showConfirmButton: false,
};
Expand All @@ -74,7 +74,9 @@ function loadPage(worker) {
imageimageAlt: 'Error',
};
}

// log the error
console.error(error);
// advertise the user
Swal.fire(info);
};

Expand Down Expand Up @@ -242,32 +244,100 @@ function loadPage(worker) {
// process the page, should split this in multiple functions
// eslint-disable-next-line no-unused-vars
.then(({ connectUrl, connectCredentials, cookiesGranted }) => {
// bind the fields with the js worker
const pendingPromises = [];
$('#connect-url-input').val(connectUrl);

// Grant cookies permissions to connect if needed
// Define a variable in memory to keep track of the permission state
// eslint-disable-next-line no-unused-vars
let newCookiesGranted = cookiesGranted;
const onCookiesGranted = (granted) => {
const style = `<i class="fas fa-lock${granted ? '-open' : ''}"/>`;
$('#grant').html(style);
newCookiesGranted = granted;
};
onCookiesGranted(cookiesGranted);
$('#grant').click(() => {
const permissions = { origins: [`${connectUrl.origin}/*`], permissions: ['cookies'] };
chrome.permissions.contains(permissions)
.then((isGranted) => (
isGranted ? chrome.permissions.remove(permissions) : chrome.permissions.request(permissions)))
.then(() => chrome.permissions.contains(permissions))
.then((granted) => onCookiesGranted(granted))
.catch((error) => {
console.error('Error handling permissions', permissions, error);
// Handle the error appropriately in your extension
// For example, you might want to inform the user that the permissions cannot be modified

pendingPromises.push(worker.developmentMode
.isEnabled()
.then((isEnabled) => {
// Assuming isEnabled is already determined
const shouldBeReadOnly = !isEnabled;
// Toggle class for read-only styling
$('.server-main #options').toggleClass('read-only-form', shouldBeReadOnly);
// Disable all inputs, textareas, selects, and buttons
$('.server-main #options').find('input, textarea, select, button').prop('disabled', shouldBeReadOnly);
// Additionally, make inputs and textareas readonly if needed
$('.server-main #options').find('input, textarea').prop('readonly', shouldBeReadOnly);

// set values
$('#connect-url-input').val(connectUrl);

// toggle the buttons displaying
$('.server-main #options #buttons').toggle(isEnabled);
if (!isEnabled) return;

$('#save').click(() => {
const savingPromises = [];

// connect URL
savingPromises.push(Promise.resolve($('#connect-url-input'))
.then((inputField) => ($('#connect-url').hide(), { field: inputField, value: inputField.val() }))
.then(({ field, value }) => {
const registration = value.length !== 0
? worker.connectLocator.asRegistration(value)
: worker.connectLocator.asRegistration();
return registration
.then(({ location }) => (field.val(location), new URL(location)));
}));

// studio package name
savingPromises.push(Promise.resolve($('#studio-package-name-input'))
.then((selectBox) => (selectBox.length === 0 ? undefined : selectBox.val()))
.then((name) => {
if (!name) {
return undefined;
}
return worker.serverConnector
.registerDevelopedStudioProject(name)
.then(() => name);
}));

// highlight
savingPromises.push(worker.browserStore
.set({ highlight: $('#highlight-input').prop('checked') })
.then((store) => store.highlight));

Promise
.all(savingPromises)
.then(() => worker.componentInventory.reload());
});
});

$('#reset').click(() => {
Swal.fire({
title: 'Reset Options',
text: 'Click Reset to reset all options to default settings.',
showCancelButton: true,
confirmButtonText: 'Reset',
cancelButtonText: 'Cancel',
}).then((result) => {
if (!result.isConfirmed) return;
worker.componentInventory.reset();
});
});
// Grant cookies permissions to connect if needed
// Define a variable in memory to keep track of the permission state
// eslint-disable-next-line no-unused-vars
let newCookiesGranted = cookiesGranted;
const onCookiesGranted = (granted) => {
const style = `<i class="fas fa-lock${granted ? '-open' : ''}"/>`;
$('#grant').html(style);
newCookiesGranted = granted;
};
onCookiesGranted(cookiesGranted);
$('#grant').click(() => {
const permissions = { origins: [`${connectUrl.origin}/*`], permissions: ['cookies'] };
chrome.permissions.contains(permissions)
.then((isGranted) => (
isGranted ? chrome.permissions.remove(permissions) : chrome.permissions.request(permissions)))
.then(() => chrome.permissions.contains(permissions))
.then((granted) => onCookiesGranted(granted))
.catch((error) => {
console.error('Error handling permissions', permissions, error);
// Handle the error appropriately in your extension
// For example, you might want to inform the user that the permissions cannot be modified
});
});
}));

// update the page according to the feature flags
pendingPromises.push(worker.developmentMode
Expand Down Expand Up @@ -305,55 +375,6 @@ function loadPage(worker) {
$('#connect-url').toggle();
});

$('#save').click(() => {
const savingPromises = [];

// connect URL
savingPromises.push(Promise.resolve($('#connect-url-input'))
.then((inputField) => ($('#connect-url').hide(), { field: inputField, value: inputField.val() }))
.then(({ field, value }) => {
const registration = value.length !== 0
? worker.connectLocator.asRegistration(value)
: worker.connectLocator.asRegistration();
return registration
.then(({ location }) => (field.val(location), new URL(location)));
}));

// studio package name
savingPromises.push(Promise.resolve($('#studio-package-name-input'))
.then((selectBox) => (selectBox.length === 0 ? undefined : selectBox.val()))
.then((name) => {
if (!name) {
return undefined;
}
return worker.serverConnector
.registerDevelopedStudioProject(name)
.then(() => name);
}));

// highlight
savingPromises.push(worker.browserStore
.set({ highlight: $('#highlight-input').prop('checked') })
.then((store) => store.highlight));

Promise
.all(savingPromises)
.then(() => worker.componentInventory.reload());
});

$('#reset').click(() => {
Swal.fire({
title: 'Reset Options',
text: 'Click Reset to reset all options to default settings.',
showCancelButton: true,
confirmButtonText: 'Reset',
cancelButtonText: 'Cancel',
}).then((result) => {
if (!result.isConfirmed) return;
worker.componentInventory.reset();
});
});

// being resolved in promise for handles, better be bound in a dedicated class I think
let onUI;
let repository = 'default';
Expand Down
10 changes: 7 additions & 3 deletions vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/* eslint-disable no-cond-assign */
/* eslint-disable comma-dangle */
import copy from 'rollup-plugin-copy';
import cssnano from 'cssnano';
import dotenv from 'dotenv';
import inject from '@rollup/plugin-inject';
import fs from 'fs';
Expand Down Expand Up @@ -46,10 +47,13 @@ export default defineConfig(({ mode }) => {

const viteConfig = {
css: {
transformer: 'lightningcss'
transformer: 'lightningcss',
postcss: {
plugins: [cssnano(['default', { normalizeUrl: false }])],
},
},
build: {
base: './',
base: `/${buildEntry.root}/`,
assetsDir: './', // relative to outDir
outDir: `dist/${browserVendor}`,
copyPublicDir: buildEntry.copyPublicDir || false,
Expand All @@ -66,7 +70,7 @@ export default defineConfig(({ mode }) => {
output: {
dir: `dist/${browserVendor}/${buildEntry.root}`,
format: 'es',
inlineDynamicImports: false,
inlineDynamicImports: true,
assetFileNames: '[name]-[hash][extname]',
entryFileNames: () => {
if (buildEntry.root === 'main') {
Expand Down

0 comments on commit c25557e

Please sign in to comment.