From 7eb00758e06f2fffbfef5be2cbc1f7f6497f8c63 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Thu, 14 Sep 2023 08:09:01 +0200 Subject: [PATCH] refactor: simplify flag naming tooltip (#4685) This PR simplifies the flag naming tooltip considerably. It now only contains an example of a pattern and what it will match. It also updates the link in the form section description to point directly to a regex cheat sheet instead of a general regex reference document. There's a few reasons for doing this: 1. The text preceding the input already explains what the pattern does and explains that it is a regex. 2. The text preceding the input also contains a link to a regex cheat sheet (which is arguably a better place to explain regexes than a tooltip). 3. The tooltip was very long. While a lot of the information there was useful, it would also be hard to use. Imagine a user checking the tooltip, scrolling all the way down, but accidentally moving the mouse a bit and the tooltip disappearing. They would have to scroll all the way down again. Or maybe they need to remember what it was they just looked at. It would be more useful to have the information on a separate page. 4. The tooltip is not accessible by keyboard. This means that users who use a keyboard to navigate the UI would not be able to scroll or otherwise navigate the tooltip, potentially leaving them in the dark. ![image](https://github.com/Unleash/unleash/assets/17786332/88a74ad9-181a-44ba-9eb9-4818c081442f) --- .../ProjectForm/FeatureFlagNamingTooltip.tsx | 156 +----------------- .../Project/ProjectForm/ProjectForm.tsx | 2 +- 2 files changed, 6 insertions(+), 152 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectForm/FeatureFlagNamingTooltip.tsx b/frontend/src/component/project/Project/ProjectForm/FeatureFlagNamingTooltip.tsx index 81edeb5f5e..0c2b463d9a 100644 --- a/frontend/src/component/project/Project/ProjectForm/FeatureFlagNamingTooltip.tsx +++ b/frontend/src/component/project/Project/ProjectForm/FeatureFlagNamingTooltip.tsx @@ -3,162 +3,16 @@ import { FC } from 'react'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; export const FeatureFlagNamingTooltip: FC = () => { - const X = 'X'; - const nx = 'n{X,}'; - const nxy = 'n{X,Y}'; return ( -

Enforce a naming convention for feature flags

-
-

{`eg. [A-Za-z0-9]{2}[.][a-z]{4,12} matches 'a1.project'`}

-
-

Brackets:

- - - - - - - - - - - - - - - - - - - - - - - -
[abc]Match a single character a, b, or c
[^abc] - Match any character except a, b, or c -
[A-Za-z] - Match any character from uppercase A to - lowercase z -
(ab|cd|ef)Match either ab, cd, or ef
(...)Capture anything enclosed
-

Metacharacters

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
^Start of line
$End of line
.Match any character
\wMatch a word chracter
\WMatch a non-word character
\dMatch a digit
\DMatch any non-digit character
\sMatch a whitespace character
\SMatch a non-whitespace character
\b - Match character at the beginning or end - of a word -
\B - Match a character not at beginning or - end of a word -
\0Match a NUL character
\tMatch a tab character
\xxx - Match a character specified by octal - number xxx -
\xdd - Match a character specified by - hexadecimal number dd -
\uxxxx - Match a Unicode character specified by - hexadecimal number xxxx -
-

Quantifiers

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
n+Match at least one n
n*Match zero or more n's
n?Match zero or one n
n{X}Match sequence of X n's
{nxy}Match sequence of X to Y n's
{nx}Match sequence of X or more n's
-
+

+ For example, the pattern{' '} + {'[a-z0-9]{2}\\.[a-z]{4,12}'} matches + 'a1.project', but not 'a1.project.feature-1'. +

} /> diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx index e481572d4c..d153d8e771 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx @@ -352,7 +352,7 @@ const ProjectForm: React.FC = ({

Define a{' '}