From 30d601f15260bfd62e733c2d9efe414c56c31670 Mon Sep 17 00:00:00 2001 From: Taras Mankovski Date: Tue, 10 Oct 2023 18:05:23 -0400 Subject: [PATCH 1/4] extractInitials without Regex lookbehind Signed-off-by: Taras Mankovski --- .../src/components/Avatar/util.test.ts | 2 +- .../core-components/src/components/Avatar/utils.ts | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/core-components/src/components/Avatar/util.test.ts b/packages/core-components/src/components/Avatar/util.test.ts index 6581df8b9a..70ed360bc3 100644 --- a/packages/core-components/src/components/Avatar/util.test.ts +++ b/packages/core-components/src/components/Avatar/util.test.ts @@ -36,6 +36,6 @@ describe('extractInitials', () => { }); it('limit the initials to two letters', async () => { - expect(extractInitials('John Jonathan Doe')).toEqual('JJ'); + expect(extractInitials('John Jonathan Doe')).toEqual('JD'); }); }); diff --git a/packages/core-components/src/components/Avatar/utils.ts b/packages/core-components/src/components/Avatar/utils.ts index 79627d5996..ad587e0e8e 100644 --- a/packages/core-components/src/components/Avatar/utils.ts +++ b/packages/core-components/src/components/Avatar/utils.ts @@ -27,9 +27,11 @@ export function stringToColor(str: string) { return color; } -export function extractInitials(value: string) { - return value - .match(/(? 1 ? names[names.length - 1] : ''; + return firstName && lastName + ? `${firstName.charAt(0)}${lastName.charAt(0)}` + : firstName.charAt(0); } From 7bdc1b0a12da6ba43141b442e9e8d7b9b0da437a Mon Sep 17 00:00:00 2001 From: Taras Mankovski Date: Tue, 10 Oct 2023 18:10:59 -0400 Subject: [PATCH 2/4] Added changeset Signed-off-by: Taras Mankovski --- .changeset/ninety-numbers-study.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/ninety-numbers-study.md diff --git a/.changeset/ninety-numbers-study.md b/.changeset/ninety-numbers-study.md new file mode 100644 index 0000000000..e77131fab9 --- /dev/null +++ b/.changeset/ninety-numbers-study.md @@ -0,0 +1,7 @@ +--- +'@backstage/core-components': patch +--- + +Fixed compatibility with Safari <16.3 by eliminating RegEx lookbehind in `extractInitials`. + +This PR also changed how initials are generated resulting in _John Jonathan Doe_ => _JD_ instead of _JJ_. From bdd6f9487afd0bd8eef37aaed31340ccc6ae82ca Mon Sep 17 00:00:00 2001 From: Taras Mankovski Date: Fri, 13 Oct 2023 10:14:17 -0400 Subject: [PATCH 3/4] Added lookbehind to accepted vale words Signed-off-by: Taras Mankovski --- .github/vale/Vocab/Backstage/accept.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/vale/Vocab/Backstage/accept.txt b/.github/vale/Vocab/Backstage/accept.txt index e6c0aa9632..1a028d1387 100644 --- a/.github/vale/Vocab/Backstage/accept.txt +++ b/.github/vale/Vocab/Backstage/accept.txt @@ -455,3 +455,4 @@ Pulumi Lightsail PR rebasing +lookbehind From a1c0ffd533c2cb528b7da68c084b513742e0287b Mon Sep 17 00:00:00 2001 From: Taras Mankovski Date: Fri, 13 Oct 2023 15:58:23 -0400 Subject: [PATCH 4/4] Added trim, test and removed unnecessary async Signed-off-by: Taras Mankovski --- .../src/components/Avatar/util.test.ts | 14 +++++++++----- .../core-components/src/components/Avatar/utils.ts | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/core-components/src/components/Avatar/util.test.ts b/packages/core-components/src/components/Avatar/util.test.ts index 70ed360bc3..98d0bd2550 100644 --- a/packages/core-components/src/components/Avatar/util.test.ts +++ b/packages/core-components/src/components/Avatar/util.test.ts @@ -17,25 +17,29 @@ import { extractInitials, stringToColor } from './utils'; describe('stringToColor', () => { - it('extract color', async () => { + it('extract color', () => { expect(stringToColor('Jenny Doe')).toEqual('#7809fa'); }); }); describe('extractInitials', () => { - it('extract initials', async () => { + it('extract initials', () => { expect(extractInitials('Jenny Doe')).toEqual('JD'); }); - it('extract unicode initials', async () => { + it('extract unicode initials', () => { expect(extractInitials('Petr Čech')).toEqual('PČ'); }); - it('extract single letter for short name', async () => { + it('extract single letter for short name', () => { expect(extractInitials('Doe')).toEqual('D'); }); - it('limit the initials to two letters', async () => { + it('limit the initials to two letters', () => { expect(extractInitials('John Jonathan Doe')).toEqual('JD'); }); + + it('removes spaces from beginning or the end', () => { + expect(extractInitials(' John Jonathan Doe ')).toEqual('JD'); + }); }); diff --git a/packages/core-components/src/components/Avatar/utils.ts b/packages/core-components/src/components/Avatar/utils.ts index ad587e0e8e..65e2be6afa 100644 --- a/packages/core-components/src/components/Avatar/utils.ts +++ b/packages/core-components/src/components/Avatar/utils.ts @@ -28,7 +28,7 @@ export function stringToColor(str: string) { } export function extractInitials(name: string) { - const names = name.split(' '); + const names = name.trim().split(' '); const firstName = names[0] ?? ''; const lastName = names.length > 1 ? names[names.length - 1] : ''; return firstName && lastName