From 4c16305257a1634a1ac3c480dfe8cd05efab7753 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Wed, 9 Mar 2022 05:00:14 -0500
Subject: [PATCH] fixes colorblind theme name and adds tests to prevent it
 happening again (#4525)

---
 .../insomnia-app/app/plugins/misc.test.ts     | 23 +++++++++++++++++++
 packages/insomnia-app/app/plugins/misc.ts     | 14 +++++++++++
 plugins/insomnia-plugin-core-themes/index.js  |  2 +-
 ...{dark-colorblind.js => colorblind-dark.js} |  2 +-
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 packages/insomnia-app/app/plugins/misc.test.ts
 rename plugins/insomnia-plugin-core-themes/themes/{dark-colorblind.js => colorblind-dark.js} (98%)

diff --git a/packages/insomnia-app/app/plugins/misc.test.ts b/packages/insomnia-app/app/plugins/misc.test.ts
new file mode 100644
index 000000000..25c2a6c34
--- /dev/null
+++ b/packages/insomnia-app/app/plugins/misc.test.ts
@@ -0,0 +1,23 @@
+import { validateThemeName } from './misc';
+
+describe('validateThemeName', () => {
+  it('will return valid names as-is', () => {
+    const name = 'default-dark';
+    const validName = validateThemeName(name);
+    expect(name).toEqual(validName);
+  });
+
+  it('will lowercase', () => {
+    const name = 'Default-dark';
+    const validName = validateThemeName(name);
+    expect(name).not.toEqual(validName);
+    expect(validName).toEqual('default-dark');
+  });
+
+  it('will replace spaces', () => {
+    const name = 'default dark';
+    const validName = validateThemeName(name);
+    expect(name).not.toEqual(validName);
+    expect(validName).toEqual('default-dark');
+  });
+});
diff --git a/packages/insomnia-app/app/plugins/misc.ts b/packages/insomnia-app/app/plugins/misc.ts
index add2bc266..0c2dbc654 100644
--- a/packages/insomnia-app/app/plugins/misc.ts
+++ b/packages/insomnia-app/app/plugins/misc.ts
@@ -60,11 +60,23 @@ type ThemeInner = ThemeBlock & {
 };
 
 export interface PluginTheme {
+  /** this name is used to generate CSS classes, and must be lower case and must not contain whitespace */
   name: string;
   displayName: string;
   theme: ThemeInner;
 }
 
+export const validateThemeName = (name: string) => {
+  const validName = name.replace(/\s/gm, '-').toLowerCase();
+  const isValid = name === validName;
+
+  if (!isValid) {
+    // `console.error`ing instead of throwing because this is a check that we had relatively late in the game and we don't want to break existing themes that might work (albeit, by accident)
+    console.error(`[theme] found an invalid theme name "${name}".  Try using ${validName}`);
+  }
+  return validName;
+};
+
 export async function generateThemeCSS(theme: PluginTheme) {
   const renderedTheme: ThemeInner = await render(
     theme.theme,
@@ -74,6 +86,8 @@ export async function generateThemeCSS(theme: PluginTheme) {
     theme.name,
   );
   const n = theme.name;
+  validateThemeName(theme.name);
+
   let css = '';
   // For the top-level variables, merge with the base theme to ensure that
   // we have everything we need.
diff --git a/plugins/insomnia-plugin-core-themes/index.js b/plugins/insomnia-plugin-core-themes/index.js
index fb742960d..3b848fa6a 100644
--- a/plugins/insomnia-plugin-core-themes/index.js
+++ b/plugins/insomnia-plugin-core-themes/index.js
@@ -15,5 +15,5 @@ module.exports.themes = [
   require('./themes/solarized'),
   require('./themes/solarized-dark'),
   require('./themes/high-contrast-light'),
-  require('./themes/dark-colorblind')
+  require('./themes/colorblind-dark')
 ];
diff --git a/plugins/insomnia-plugin-core-themes/themes/dark-colorblind.js b/plugins/insomnia-plugin-core-themes/themes/colorblind-dark.js
similarity index 98%
rename from plugins/insomnia-plugin-core-themes/themes/dark-colorblind.js
rename to plugins/insomnia-plugin-core-themes/themes/colorblind-dark.js
index 5dce97090..2c050ec0e 100644
--- a/plugins/insomnia-plugin-core-themes/themes/dark-colorblind.js
+++ b/plugins/insomnia-plugin-core-themes/themes/colorblind-dark.js
@@ -1,5 +1,5 @@
 module.exports = {
-	name: 'Dark Colorblind',
+	name: 'colorblind-dark',
 	displayName: 'Dark Colorblind',
 	theme: {
 		background: {