avoid usage of to*Case + add project lint rule

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/warm-balloons-peel.md

@@ -0,0 +1,21 @@
+---
+'@backstage/catalog-model': patch
+'@backstage/cli-common': patch
+'@backstage/core-components': patch
+'@backstage/integration': patch
+'@backstage/test-utils-core': patch
+'@backstage/plugin-badges': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-home': patch
+'@backstage/plugin-ilert': patch
+'@backstage/plugin-kubernetes': patch
+'@backstage/plugin-search': patch
+'@backstage/plugin-shortcuts': patch
+'@backstage/plugin-sonarqube': patch
+'@backstage/plugin-user-settings': patch
+'@backstage/plugin-xcmetrics': patch
+---
+
+Avoid usage of `.to*Case()`, preferring `.toLocale*Case('en-US')` instead.

.eslintrc.js

@@ -34,5 +34,22 @@ module.exports = {
         onNonMatchingHeader: 'replace',
       },
     ],
+    'no-restricted-syntax': [
+      'error',
+      {
+        message:
+          "Avoid using .toLowerCase(), use .toLocaleLowerCase('en-US') instead. " +
+          'This rule can sometimes be ignored when converting text to be displayed to the user.',
+        selector:
+          "CallExpression[arguments.length=0] > MemberExpression[property.name='toLowerCase']",
+      },
+      {
+        message:
+          "Avoid using .toUpperCase(), use .toLocaleUpperCase('en-US') instead. " +
+          'This rule can sometimes be ignored when converting text to be displayed to the user.',
+        selector:
+          "CallExpression[arguments.length=0] > MemberExpression[property.name='toUpperCase']",
+      },
+    ],
   },
 };

packages/app/src/components/scaffolder/customScaffolderExtensions.tsx

@@ -26,7 +26,7 @@ export const LowerCaseValuePickerFieldExtension = scaffolderPlugin.provide(
     name: 'LowerCaseValuePicker',
     component: TextValuePicker,
     validation: (value: string, validation: FieldValidation) => {
-      if (value.toLowerCase() !== value) {
+      if (value.toLocaleLowerCase('en-US') !== value) {
         validation.addError('Only lowercase values are allowed.');
       }
     },

packages/catalog-model/src/entity/ref.ts

@@ -248,7 +248,9 @@ export function stringifyEntityRef(
     name = ref.name;
   }
 
-  return `${kind.toLowerCase()}:${namespace.toLowerCase()}/${name.toLowerCase()}`;
+  return `${kind.toLocaleLowerCase('en-US')}:${namespace.toLocaleLowerCase(
+    'en-US',
+  )}/${name.toLocaleLowerCase('en-US')}`;
 }
 
 /**
@@ -296,8 +298,10 @@ export function compareEntityToRef(
   }
 
   return (
-    entityKind.toLowerCase() === refKind.toLowerCase() &&
-    entityNamespace.toLowerCase() === refNamespace.toLowerCase() &&
-    entityName.toLowerCase() === refName.toLowerCase()
+    entityKind.toLocaleLowerCase('en-US') ===
+      refKind.toLocaleLowerCase('en-US') &&
+    entityNamespace.toLocaleLowerCase('en-US') ===
+      refNamespace.toLocaleLowerCase('en-US') &&
+    entityName.toLocaleLowerCase('en-US') === refName.toLocaleLowerCase('en-US')
   );
 }

packages/cli-common/src/paths.ts

@@ -115,7 +115,7 @@ export function findPaths(searchDir: string): Paths {
   // Drive letter can end up being lowercased here on Windows, bring back to uppercase for consistency
   const targetDir = fs
     .realpathSync(process.cwd())
-    .replace(/^[a-z]:/, str => str.toUpperCase());
+    .replace(/^[a-z]:/, str => str.toLocaleUpperCase('en-US'));
 
   // Lazy load this as it will throw an error if we're not inside the Backstage repo.
   let ownRoot = '';

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -193,8 +193,8 @@ export const WorkaroundNavLink = React.forwardRef<
   let { pathname: toPathname } = useResolvedPath(to);
 
   if (!caseSensitive) {
-    locationPathname = locationPathname.toLowerCase();
-    toPathname = toPathname.toLowerCase();
+    locationPathname = locationPathname.toLocaleLowerCase('en-US');
+    toPathname = toPathname.toLocaleLowerCase('en-US');
   }
 
   let isActive = locationPathname === toPathname;

packages/integration/src/github/GithubCredentialsProvider.ts

@@ -141,7 +141,9 @@ class GithubAppManager {
   private async getInstallationData(owner: string): Promise<InstallationData> {
     const allInstallations = await this.getInstallations();
     const installation = allInstallations.find(
-      inst => inst.account?.login?.toLowerCase() === owner.toLowerCase(),
+      inst =>
+        inst.account?.login?.toLocaleLowerCase('en-US') ===
+        owner.toLocaleLowerCase('en-US'),
     );
     if (installation) {
       return {

packages/test-utils-core/src/testUtils/Keyboard.js

@@ -87,7 +87,7 @@ export class Keyboard {
     const attrs = [...element.attributes]
       .map(attr => `${attr.name}="${attr.value}"`)
       .join(' ');
-    return `<${element.nodeName.toLowerCase()} ${attrs}>`;
+    return `<${element.nodeName.toLocaleLowerCase('en-US')} ${attrs}>`;
   }
 
   get focused() {

plugins/badges/src/api/BadgesClient.ts

@@ -61,9 +61,10 @@ export class BadgesClient implements BadgesApi {
 
   private getEntityRouteParams(entity: Entity) {
     return {
-      kind: entity.kind.toLowerCase(),
+      kind: entity.kind.toLocaleLowerCase('en-US'),
       namespace:
-        entity.metadata.namespace?.toLowerCase() ?? ENTITY_DEFAULT_NAMESPACE,
+        entity.metadata.namespace?.toLocaleLowerCase('en-US') ??
+        ENTITY_DEFAULT_NAMESPACE,
       name: entity.metadata.name,
     };
   }

plugins/catalog-react/src/components/EntityRefLink/format.ts

@@ -44,10 +44,13 @@ export function formatEntityRefTitle(
     namespace = undefined;
   }
 
-  kind = kind.toLowerCase();
+  kind = kind.toLocaleLowerCase('en-US');
 
   return `${serializeEntityRef({
-    kind: defaultKind && defaultKind.toLowerCase() === kind ? undefined : kind,
+    kind:
+      defaultKind && defaultKind.toLocaleLowerCase('en-US') === kind
+        ? undefined
+        : kind,
     name,
     namespace,
   })}`;

plugins/catalog-react/src/hooks/useRelatedEntities.ts

@@ -39,8 +39,12 @@ export function useRelatedEntities(
       entity.relations &&
       entity.relations.filter(
         r =>
-          (!type || r.type.toLowerCase() === type.toLowerCase()) &&
-          (!kind || r.target.kind.toLowerCase() === kind.toLowerCase()),
+          (!type ||
+            r.type.toLocaleLowerCase('en-US') ===
+              type.toLocaleLowerCase('en-US')) &&
+          (!kind ||
+            r.target.kind.toLocaleLowerCase('en-US') ===
+              kind.toLocaleLowerCase('en-US')),
       );
 
     if (!relations) {
@@ -54,7 +58,7 @@ export function useRelatedEntities(
     // `filter=kind=component,namespace=default,name=example1,example2`
     const relationsByKindAndNamespace: EntityRelation[][] = Object.values(
       groupBy(relations, ({ target }) => {
-        return `${target.kind}:${target.namespace}`.toLowerCase();
+        return `${target.kind}:${target.namespace}`.toLocaleLowerCase('en-US');
       }),
     );
 

plugins/catalog-react/src/routes.ts

@@ -39,9 +39,10 @@ export const entityRouteRef = entityRoute;
 // entity instance
 export function entityRouteParams(entity: Entity) {
   return {
-    kind: entity.kind.toLowerCase(),
+    kind: entity.kind.toLocaleLowerCase('en-US'),
     namespace:
-      entity.metadata.namespace?.toLowerCase() ?? ENTITY_DEFAULT_NAMESPACE,
+      entity.metadata.namespace?.toLocaleLowerCase('en-US') ??
+      ENTITY_DEFAULT_NAMESPACE,
     name: entity.metadata.name,
   } as const;
 }

plugins/catalog-react/src/utils/getEntityRelations.ts

@@ -31,7 +31,9 @@ export function getEntityRelations(
 
   if (filter?.kind) {
     entityNames = entityNames?.filter(
-      e => e.kind.toLowerCase() === filter.kind.toLowerCase(),
+      e =>
+        e.kind.toLocaleLowerCase('en-US') ===
+        filter.kind.toLocaleLowerCase('en-US'),
     );
   }
 

plugins/catalog/src/components/EntitySwitch/conditions.ts

@@ -17,7 +17,9 @@
 import { Entity, ComponentEntity } from '@backstage/catalog-model';
 
 function strCmp(a: string | undefined, b: string | undefined): boolean {
-  return Boolean(a && a?.toLowerCase() === b?.toLowerCase());
+  return Boolean(
+    a && a?.toLocaleLowerCase('en-US') === b?.toLocaleLowerCase('en-US'),
+  );
 }
 
 export function isKind(kind: string) {

plugins/cost-insights/src/utils/grammar.ts

@@ -26,7 +26,7 @@ export const indefiniteArticleOf = (
   articles: [string, string],
   word: string,
 ) => {
-  const firstChar = word.charAt(0).toLowerCase();
+  const firstChar = word.charAt(0).toLocaleLowerCase('en-US');
   return firstChar in vowels
     ? `${articles[1]} ${word}`
     : `${articles[0]} ${word}`;

plugins/home/package.json

@@ -28,6 +28,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "@types/react": "*",
+    "lodash": "^4.17.21",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "6.0.0-beta.0",

plugins/home/src/homePageComponents/RandomJoke/Settings.tsx

@@ -22,6 +22,7 @@ import {
 } from '@material-ui/core';
 import React from 'react';
 import { useRandomJoke, JokeType } from './Context';
+import upperFirst from 'lodash/upperFirst';
 
 export const Settings = () => {
   const { type, handleChangeType } = useRandomJoke();
@@ -39,7 +40,7 @@ export const Settings = () => {
             key={t}
             value={t}
             control={<Radio />}
-            label={`${t.slice(0, 1).toUpperCase()}${t.slice(1)}`}
+            label={upperFirst(t)}
           />
         ))}
       </RadioGroup>

plugins/ilert/src/components/UptimeMonitorsPage/UptimeMonitorCheckType.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { UptimeMonitor } from '../../types';
 import Typography from '@material-ui/core/Typography';
@@ -27,12 +28,14 @@ export const UptimeMonitorCheckType = ({
       return (
         <Typography
           noWrap
+          // eslint-disable-next-line no-restricted-syntax
         >{`${uptimeMonitor.checkType.toUpperCase()} 🇩🇪`}</Typography>
       );
     default:
       return (
         <Typography
           noWrap
+          // eslint-disable-next-line no-restricted-syntax
         >{`${uptimeMonitor.checkType.toUpperCase()} 🇺🇸`}</Typography>
       );
   }

plugins/kubernetes/src/utils/owner.ts

@@ -61,8 +61,8 @@ export const getMatchingHpa = (
 ): V1HorizontalPodAutoscaler | undefined => {
   return hpas.find(hpa => {
     return (
-      (hpa.spec?.scaleTargetRef?.kind ?? '').toLowerCase() ===
-        ownerKind.toLowerCase() &&
+      (hpa.spec?.scaleTargetRef?.kind ?? '').toLocaleLowerCase('en-US') ===
+        ownerKind.toLocaleLowerCase('en-US') &&
       (hpa.spec?.scaleTargetRef?.name ?? '') ===
         (ownerName ?? 'unknown-deployment')
     );

plugins/search/src/components/LegacySearchPage/LegacySearchResult.tsx

@@ -155,8 +155,9 @@ export const SearchResult = ({ searchQuery }: SearchResultProps) => {
           ? entity.spec?.lifecycle
           : undefined,
       url: `/catalog/${
-        entity.metadata.namespace?.toLowerCase() || ENTITY_DEFAULT_NAMESPACE
-      }/${entity.kind.toLowerCase()}/${entity.metadata.name}`,
+        entity.metadata.namespace?.toLocaleLowerCase('en-US') ||
+        ENTITY_DEFAULT_NAMESPACE
+      }/${entity.kind.toLocaleLowerCase('en-US')}/${entity.metadata.name}`,
     }));
   }, []);
 

plugins/shortcuts/src/ShortcutItem.tsx

@@ -41,8 +41,10 @@ const useStyles = makeStyles({
 const getIconText = (title: string) =>
   title.split(' ').length === 1
     ? // If there's only one word, keep the first two characters
+      // eslint-disable-next-line no-restricted-syntax
       title[0].toUpperCase() + title[1].toLowerCase()
     : // If there's more than one word, take the first character of the first two words
+      // eslint-disable-next-line no-restricted-syntax
       title
         .replace(/\B\W/g, '')
         .split(' ')

plugins/sonarqube/src/api/SonarQubeClient.ts

@@ -138,11 +138,13 @@ export class SonarQubeClient implements SonarQubeApi {
       getIssuesUrl: identifier =>
         `${this.baseUrl}project/issues?id=${encodeURIComponent(
           componentKey,
-        )}&types=${identifier.toUpperCase()}&resolved=false`,
+        )}&types=${identifier.toLocaleUpperCase('en-US')}&resolved=false`,
       getComponentMeasuresUrl: identifier =>
         `${this.baseUrl}component_measures?id=${encodeURIComponent(
           componentKey,
-        )}&metric=${identifier.toLowerCase()}&resolved=false&view=list`,
+        )}&metric=${identifier.toLocaleLowerCase(
+          'en-US',
+        )}&resolved=false&view=list`,
       getSecurityHotspotsUrl: () =>
         `${this.baseUrl}project/security_hotspots?id=${encodeURIComponent(
           componentKey,

plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx

@@ -77,12 +77,12 @@ export const UserSettingsFeatureFlags = () => {
 
   const filterInputParts = filterInput
     .split(/\s/)
-    .map(part => part.trim().toLowerCase());
+    .map(part => part.trim().toLocaleLowerCase('en-US'));
 
   filterInputParts.forEach(
     part =>
       (filteredFeatureFlags = filteredFeatureFlags.filter(featureFlag =>
-        featureFlag.name.toLowerCase().includes(part),
+        featureFlag.name.toLocaleLowerCase('en-US').includes(part),
       )),
   );
 

plugins/xcmetrics/package.json

@@ -28,6 +28,7 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
+    "lodash": "^4.17.21",
     "luxon": "^2.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

plugins/xcmetrics/src/utils/format.ts

@@ -15,6 +15,7 @@
  */
 import { DateTime, Duration } from 'luxon';
 import { BuildStatus } from '../api';
+import upperFirst from 'lodash/upperFirst';
 
 export const formatDuration = (seconds: number) => {
   const duration = Duration.fromObject({
@@ -48,5 +49,4 @@ export const formatPercentage = (number: number) => {
   return `${Math.round(number * 100)} %`;
 };
 
-export const formatStatus = (status: BuildStatus) =>
-  status[0].toUpperCase() + status.slice(1);
+export const formatStatus = (status: BuildStatus) => upperFirst(status);