From ad0e22f7e84fd3a95f73df6d45e1bf1e4c2d41d3 Mon Sep 17 00:00:00 2001 From: XargsUK <51077147+XargsUK@users.noreply.github.com> Date: Mon, 3 Jul 2023 01:34:16 +0100 Subject: [PATCH 1/3] Implemented tilfinltd/aws-extend-switch-roles#290 Added checkbox option enableImageBorderColor to options.js and options.html When enabled, if image and color are both passed to the createRoleListItem function, then a 3px border is shown around the image. This required me to pass enableImageBorderColor value when createRoleListItem() is called in popup.js renderRoleList --- options.html | 1 + src/lib/create_role_list_item.js | 14 ++++++++------ src/options.js | 2 +- src/popup.js | 5 +++-- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/options.html b/options.html index 35efef1..9614f47 100644 --- a/options.html +++ b/options.html @@ -136,6 +136,7 @@

Settings

  • (Experimental, Supporters only)
  • (Experimental) (temporarily disabled)
    • +
  • Configuration storage: diff --git a/src/lib/create_role_list_item.js b/src/lib/create_role_list_item.js index c43fe75..03c62a2 100644 --- a/src/lib/create_role_list_item.js +++ b/src/lib/create_role_list_item.js @@ -1,17 +1,19 @@ -export function createRoleListItem(document, item, url, region, { hidesAccountId }, selectHandler) { +export function createRoleListItem(document, item, url, region, { hidesAccountId, enableImageBorderColor }, selectHandler) { const li = document.createElement('li'); const headSquare = document.createElement('span'); headSquare.textContent = ' '; headSquare.className = 'headSquare'; - if (item.color) { + if (item.image) { + headSquare.style.backgroundImage = `url('${item.image.replace(/"/g, '')}')`; + if (item.color && enableImageBorderColor) { + headSquare.style.border = `3px solid #${item.color}`; + } + } else if (item.color) { headSquare.style.backgroundColor = `#${item.color}`; - } else if (!item.image) { + } else { // set gray if both color and image are undefined headSquare.style.backgroundColor = '#aaaaaa'; } - if (item.image) { - headSquare.style.backgroundImage = `url('${item.image.replace(/"/g, '')}')`; - } const anchor = document.createElement('a'); anchor.href = "#"; diff --git a/src/options.js b/src/options.js index 7191eb1..614fc49 100644 --- a/src/options.js +++ b/src/options.js @@ -64,7 +64,7 @@ window.onload = function() { } } - const booleanSettings = ['hidesAccountId', 'showOnlyMatchingRoles', 'autoAssumeLastRole']; + const booleanSettings = ['hidesAccountId', 'showOnlyMatchingRoles', 'autoAssumeLastRole', 'enableImageBorderColor']; for (let key of booleanSettings) { elById(`${key}CheckBox`).onchange = function() { syncStorageRepo.set({ [key]: this.checked }); diff --git a/src/popup.js b/src/popup.js index fac7d30..b7e94d3 100644 --- a/src/popup.js +++ b/src/popup.js @@ -110,12 +110,13 @@ function main() { function loadFormList(curURL, userInfo, tabId) { const storageRepo = new SyncStorageRepository(chrome || browser) - storageRepo.get(['hidesAccountId', 'showOnlyMatchingRoles', 'configStorageArea', 'signinEndpointInHere']) + storageRepo.get(['hidesAccountId', 'showOnlyMatchingRoles', 'configStorageArea', 'signinEndpointInHere', 'enableImageBorderColor']) .then(data => { const hidesAccountId = data.hidesAccountId || false; const showOnlyMatchingRoles = data.showOnlyMatchingRoles || false; const configStorageArea = data.configStorageArea || 'sync'; const signinEndpointInHere = data.signinEndpointInHere || false; + const enableImageBorderColor = data.enableImageBorderColor || false; new StorageRepository(chrome || browser, configStorageArea).get(['profiles', 'profiles_1', 'profiles_2', 'profiles_3', 'profiles_4']) .then(data => { @@ -123,7 +124,7 @@ function loadFormList(curURL, userInfo, tabId) { const dps = new DataProfilesSplitter(); const profiles = dps.profilesFromDataSet(data); const profileSet = createProfileSet(profiles, userInfo, { showOnlyMatchingRoles }); - renderRoleList(profileSet.destProfiles, tabId, curURL, { hidesAccountId, signinEndpointInHere }); + renderRoleList(profileSet.destProfiles, tabId, curURL, { hidesAccountId, signinEndpointInHere, enableImageBorderColor }); setupRoleFilter(); } }) From 4678f74c2379b32bbf38a873d254b343dfbe63df Mon Sep 17 00:00:00 2001 From: XargsUK <51077147+XargsUK@users.noreply.github.com> Date: Mon, 3 Jul 2023 01:49:58 +0100 Subject: [PATCH 2/3] profile color+image test updated --- test/lib/create_role_list_item.test.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/test/lib/create_role_list_item.test.js b/test/lib/create_role_list_item.test.js index d4f3a08..99a8c63 100644 --- a/test/lib/create_role_list_item.test.js +++ b/test/lib/create_role_list_item.test.js @@ -97,7 +97,7 @@ background-image: url(https://www.exapmle.com/icon.png);"> prf { - it('returns li element', () => { + it('returns li element with image border color when enableImageBorderColor is true', () => { const item = { profile: 'prf', aws_account_id: '333344441111', @@ -106,13 +106,31 @@ background-image: url(https://www.exapmle.com/icon.png);"> prf {}); + const li = createRoleListItem(window.document, item, url, 'us-east-1', { enableImageBorderColor: true }, () => {}); + + const a = li.querySelector('a') + expect(a.innerHTML).to.eq(` prf333344441111`); + }); + }); + describe('profile has color and image', () => { + it('returns li element without color style when enableImageBorderColor is false', () => { + const item = { + profile: 'prf', + aws_account_id: '333344441111', + role_name: 'img-role', + color: 'ffaa22', + image: '"https://www.exapmle.com/icon.png"', + } + const url = 'https://console.aws.amazonaws.com/?region=us-east-1'; + const li = createRoleListItem(window.document, item, url, 'us-east-1', { enableImageBorderColor: false }, () => {}); + const a = li.querySelector('a') - expect(a.innerHTML).to.eq(` prf333344441111`); + expect(a.innerHTML).to.eq(` prf333344441111`); }); }); + + describe('profile has region', () => { it('returns li element', () => { From b263b859c4967dd76d2867b144a20d8e95f43fb3 Mon Sep 17 00:00:00 2001 From: XargsUK <51077147+XargsUK@users.noreply.github.com> Date: Mon, 3 Jul 2023 02:25:08 +0100 Subject: [PATCH 3/3] list item test change to hex --- test/lib/create_role_list_item.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/lib/create_role_list_item.test.js b/test/lib/create_role_list_item.test.js index 99a8c63..6ecaf67 100644 --- a/test/lib/create_role_list_item.test.js +++ b/test/lib/create_role_list_item.test.js @@ -109,10 +109,10 @@ background-image: url(https://www.exapmle.com/icon.png);"> prf {}); const a = li.querySelector('a') - expect(a.innerHTML).to.eq(` prf333344441111`); + expect(a.innerHTML).to.eq(` prf333344441111`); }); }); - + describe('profile has color and image', () => { it('returns li element without color style when enableImageBorderColor is false', () => { const item = {