fleet/frontend/utilities/strings/stringUtils.ts
Jacob Shandling 204aa49ab9
UI: Title Case bug (#11786)
## Addresses #11737

- Write function to enforce Fleet sentence-casing standards
- Apply it to this bug

<img width="642" alt="Screenshot 2023-05-18 at 12 43 20 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/670f4f8d-1c23-4609-bb23-c38038e9bbd8">

*NOTE - this (the host details) endpoint currently returns label names
in Sentence Case – this solution deals with only the UI presentation,
but it might be worth changing the API response in the future:
<img width="369" alt="Screenshot 2023-05-18 at 12 48 58 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/27236524-9c0a-4818-8a74-f445b5765d94">

## Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [x] Changes file added for user-visible changes in `changes/` 
- [x] Added/updated tests
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-05-18 13:40:04 -07:00

51 lines
1.2 KiB
TypeScript

import { UserRole } from "interfaces/user";
/**
* Capitalizes the words of the string passed in.
* @param str un-capitalized string
*/
const capitalize = (str: string): string => {
return str.replace(/\b\w/g, (letter) => letter.toUpperCase());
};
const capitalizeRole = (str: UserRole): UserRole => {
if (str === "observer_plus") {
return "Observer+";
}
if (str === "gitops") {
return "GitOps";
}
return str.replace(/\b\w/g, (letter) => letter.toUpperCase()) as UserRole;
};
export const STYLIZATIONS_AND_ACRONYMS = [
"macOS",
"osquery",
"MySQL",
"MDM",
"REST",
"API",
"JSON",
];
// fleetdm.com/handbook/marketing/content-style-guide#sentence-case
// * doesn't recognize proper nouns!
export const enforceFleetSentenceCasing = (s: string) => {
const resArr = s.split(" ").map((word, i) => {
if (!STYLIZATIONS_AND_ACRONYMS.includes(word)) {
const lowered = word.toLowerCase();
if (i === 0) {
// title case the first word
return lowered[0].toUpperCase() + lowered.slice(1);
}
return lowered;
}
return word;
});
return resArr.join(" ").trim();
};
export default {
capitalize,
capitalizeRole,
};