mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
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. 
This commit is contained in:
Thomas Heartman
GitHub
parent
57d650ea52
commit
7eb00758e0
@ -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 (
|
||||
<HelpIcon
|
||||
htmlTooltip
|
||||
tooltip={
|
||||
<Box>
|
||||
<h3>Enforce a naming convention for feature flags</h3>
|
||||
<hr />
|
||||
<p>{`eg. [A-Za-z0-9]{2}[.][a-z]{4,12} matches 'a1.project'`}</p>
|
||||
<div className="scrollable">
|
||||
<h3>Brackets:</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>[abc]</td>
|
||||
<td>Match a single character a, b, or c</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[^abc]</td>
|
||||
<td>
|
||||
Match any character except a, b, or c
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[A-Za-z]</td>
|
||||
<td>
|
||||
Match any character from uppercase A to
|
||||
lowercase z
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>(ab|cd|ef)</td>
|
||||
<td>Match either ab, cd, or ef</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>(...)</td>
|
||||
<td>Capture anything enclosed</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Metacharacters</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>^</td>
|
||||
<td>Start of line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$</td>
|
||||
<td>End of line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>.</td>
|
||||
<td>Match any character</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\w</td>
|
||||
<td>Match a word chracter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\W</td>
|
||||
<td>Match a non-word character</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\d</td>
|
||||
<td>Match a digit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\D</td>
|
||||
<td>Match any non-digit character</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\s</td>
|
||||
<td>Match a whitespace character</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\S</td>
|
||||
<td>Match a non-whitespace character</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\b</td>
|
||||
<td>
|
||||
Match character at the beginning or end
|
||||
of a word
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\B</td>
|
||||
<td>
|
||||
Match a character not at beginning or
|
||||
end of a word
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\0</td>
|
||||
<td>Match a NUL character</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\t</td>
|
||||
<td>Match a tab character</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\xxx</td>
|
||||
<td>
|
||||
Match a character specified by octal
|
||||
number xxx
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\xdd</td>
|
||||
<td>
|
||||
Match a character specified by
|
||||
hexadecimal number dd
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\uxxxx</td>
|
||||
<td>
|
||||
Match a Unicode character specified by
|
||||
hexadecimal number xxxx
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Quantifiers</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>n+</td>
|
||||
<td>Match at least one n</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>n*</td>
|
||||
<td>Match zero or more n's</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>n?</td>
|
||||
<td>Match zero or one n</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>n{X}</td>
|
||||
<td>Match sequence of X n's</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{nxy}</td>
|
||||
<td>Match sequence of X to Y n's</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{nx}</td>
|
||||
<td>Match sequence of X or more n's</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>
|
||||
For example, the pattern{' '}
|
||||
<code>{'[a-z0-9]{2}\\.[a-z]{4,12}'}</code> matches
|
||||
'a1.project', but not 'a1.project.feature-1'.
|
||||
</p>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -352,7 +352,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
|
||||
<p>
|
||||
Define a{' '}
|
||||
<a
|
||||
href={`https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions`}
|
||||
href={`https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Cheatsheet`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user