Add support for customizing the extension install registry URL (#4503)

src/renderer/components/+extensions/attempt-install-by-info/attempt-install-by-info.tsx

@@ -36,32 +36,39 @@ export interface ExtensionInfo {
 }
 
 export interface Dependencies {
-  attemptInstall: (request: InstallRequest, d: ExtendableDisposer) => Promise<void>
+  attemptInstall: (request: InstallRequest, d: ExtendableDisposer) => Promise<void>;
+  getBaseRegistryUrl: () => Promise<string>;
 }
 
-export const attemptInstallByInfo = ({ attemptInstall }: Dependencies) => async ({
+export const attemptInstallByInfo = ({ attemptInstall, getBaseRegistryUrl }: Dependencies) => async ({
   name,
   version,
   requireConfirmation = false,
 }: ExtensionInfo) => {
   const disposer = ExtensionInstallationStateStore.startPreInstall();
-  const registryUrl = new URLParse("https://registry.npmjs.com")
-    .set("pathname", name)
-    .toString();
-  const { promise } = downloadJson({ url: registryUrl });
-  const json = await promise.catch(console.error);
+  const baseUrl = await getBaseRegistryUrl();
+  const registryUrl = new URLParse(baseUrl).set("pathname", name).toString();
+  let json: any;
 
-  if (
-    !json ||
-    json.error ||
-    typeof json.versions !== "object" ||
-    !json.versions
-  ) {
-    const message = json?.error ? `: ${json.error}` : "";
+  try {
+    json = await downloadJson({ url: registryUrl }).promise;
 
-    Notifications.error(
-      `Failed to get registry information for that extension${message}`,
-    );
+    if (!json || json.error || typeof json.versions !== "object" || !json.versions) {
+      const message = json?.error ? `: ${json.error}` : "";
+
+      Notifications.error(`Failed to get registry information for that extension${message}`);
+
+      return disposer();
+    }
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      // assume invalid JSON
+      console.warn("Set registry has invalid json", { url: baseUrl }, error);
+      Notifications.error("Failed to get valid registry information for that extension. Registry did not return valid JSON");
+    } else {
+      console.error("Failed to download registry information", error);
+      Notifications.error(`Failed to get valid registry information for that extension. ${error}`);
+    }
 
     return disposer();
   }

src/renderer/components/+extensions/extensions.tsx

@@ -68,6 +68,10 @@ class NonInjectedExtensions extends React.Component<Dependencies> {
     makeObservable(this);
   }
 
+  get dependencies() {
+    return this.props.dependencies;
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       reaction(() => this.props.userExtensions.get().length, (curSize, prevSize) => {

src/renderer/components/+extensions/get-base-registry-url/get-base-registry-url.injectable.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Injectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { UserStore } from "../../../../common/user-store";
+import { Dependencies, getBaseRegistryUrl } from "./get-base-registry-url";
+
+const getBaseRegistryUrlInjectable: Injectable<() => Promise<string>, Dependencies> = {
+  getDependencies: () => ({
+    // TODO: use injection
+    getRegistryUrlPreference: () => UserStore.getInstance().extensionRegistryUrl,
+  }),
+
+  instantiate: getBaseRegistryUrl,
+  lifecycle: lifecycleEnum.singleton,
+};
+
+export default getBaseRegistryUrlInjectable;

src/renderer/components/+extensions/get-base-registry-url/get-base-registry-url.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import { defaultExtensionRegistryUrl, ExtensionRegistry, ExtensionRegistryLocation } from "../../../../common/user-store/preferences-helpers";
+import { promiseExecFile } from "../../../utils";
+import { Notifications } from "../../notifications";
+
+export interface Dependencies {
+  getRegistryUrlPreference: () => ExtensionRegistry,
+}
+
+export const getBaseRegistryUrl = ({ getRegistryUrlPreference }: Dependencies) => async () => {
+  const extensionRegistryUrl = getRegistryUrlPreference();
+
+  switch (extensionRegistryUrl.location) {
+    case ExtensionRegistryLocation.CUSTOM:
+      return extensionRegistryUrl.customUrl;
+
+    case ExtensionRegistryLocation.NPMRC: {
+      try {
+        const filteredEnv = Object.fromEntries(
+          Object.entries(process.env)
+            .filter(([key]) => !key.startsWith("npm")),
+        );
+        const { stdout } = await promiseExecFile("npm", ["config", "get", "registry"], { env: filteredEnv });
+
+        return stdout.trim();
+      } catch (error) {
+        Notifications.error(<p>Failed to get configured registry from <code>.npmrc</code>. Falling back to default registry</p>);
+        console.warn("[EXTENSIONS]: failed to get configured registry from .npmrc", error);
+        // fallthrough
+      }
+    }
+    default:
+    case ExtensionRegistryLocation.DEFAULT:
+      return defaultExtensionRegistryUrl;
+  }
+};

src/renderer/components/+preferences/application.tsx

@@ -29,7 +29,9 @@ import { Input } from "../input";
 import { isWindows } from "../../../common/vars";
 import { FormSwitch, Switcher } from "../switch";
 import moment from "moment-timezone";
-import { CONSTANTS } from "../../../common/user-store/preferences-helpers";
+import { CONSTANTS, defaultExtensionRegistryUrl, ExtensionRegistryLocation } from "../../../common/user-store/preferences-helpers";
+import { action } from "mobx";
+import { isUrl } from "../input/input_validators";
 import { AppPreferenceRegistry } from "../../../extensions/registries";
 import { ExtensionSettings } from "./extension-settings";
 
@@ -43,6 +45,7 @@ const updateChannelOptions: SelectOption<string>[] = Array.from(
 );
 
 export const Application = observer(() => {
+  const userStore = UserStore.getInstance();
   const defaultShell = process.env.SHELL
     || process.env.PTYSHELL
     || (
@@ -51,7 +54,8 @@ export const Application = observer(() => {
         : "System default shell"
     );
 
-  const [shell, setShell] = React.useState(UserStore.getInstance().shell || "");
+  const [customUrl, setCustomUrl] = React.useState(userStore.extensionRegistryUrl.customUrl || "");
+  const [shell, setShell] = React.useState(userStore.shell || "");
   const extensionSettings = AppPreferenceRegistry.getInstance().getItems().filter((preference) => preference.showInPreferencesTab === "application");
 
   return (
@@ -61,8 +65,8 @@ export const Application = observer(() => {
         <SubTitle title="Theme"/>
         <Select
           options={ThemeStore.getInstance().themeOptions}
-          value={UserStore.getInstance().colorTheme}
-          onChange={({ value }: SelectOption) => UserStore.getInstance().colorTheme = value}
+          value={userStore.colorTheme}
+          onChange={({ value }) => userStore.colorTheme = value}
           themeName="lens"
         />
       </section>
@@ -75,8 +79,8 @@ export const Application = observer(() => {
           theme="round-black"
           placeholder={defaultShell}
           value={shell}
-          onChange={v => setShell(v)}
-          onBlur={() => UserStore.getInstance().shell = shell}
+          onChange={setShell}
+          onBlur={() => userStore.shell = shell}
         />
       </section>
 
@@ -86,8 +90,8 @@ export const Application = observer(() => {
           label="Copy on select and paste on right-click"
           control={
             <Switcher
-              checked={UserStore.getInstance().terminalCopyOnSelect}
-              onChange={v => UserStore.getInstance().terminalCopyOnSelect = v.target.checked}
+              checked={userStore.terminalCopyOnSelect}
+              onChange={v => userStore.terminalCopyOnSelect = v.target.checked}
               name="terminalCopyOnSelect"
             />
           }
@@ -96,13 +100,46 @@ export const Application = observer(() => {
 
       <hr/>
 
+      <section id="extensionRegistryUrl">
+        <SubTitle title="Extension Install Registry" />
+        <Select
+          options={Object.values(ExtensionRegistryLocation)}
+          value={userStore.extensionRegistryUrl.location}
+          onChange={action(({ value }) => {
+            userStore.extensionRegistryUrl.location = value;
+
+            if (userStore.extensionRegistryUrl.location === ExtensionRegistryLocation.CUSTOM) {
+              userStore.extensionRegistryUrl.customUrl = "";
+            }
+          })}
+          themeName="lens"
+        />
+        <p className="mt-4 mb-5 leading-relaxed">
+          This setting is to change the registry URL for installing extensions by name.{" "}
+          If you are unable to access the default registry ({defaultExtensionRegistryUrl}){" "}
+          you can change it in your <b>.npmrc</b>&nbsp;file or in the input below.
+        </p>
+
+        <Input
+          theme="round-black"
+          validators={isUrl}
+          value={customUrl}
+          onChange={setCustomUrl}
+          onBlur={() => userStore.extensionRegistryUrl.customUrl = customUrl}
+          placeholder="Custom Extension Registry URL..."
+          disabled={userStore.extensionRegistryUrl.location !== ExtensionRegistryLocation.CUSTOM}
+        />
+      </section>
+
+      <hr/>
+
       <section id="other">
         <SubTitle title="Start-up"/>
         <FormSwitch
           control={
             <Switcher
-              checked={UserStore.getInstance().openAtLogin}
-              onChange={v => UserStore.getInstance().openAtLogin = v.target.checked}
+              checked={userStore.openAtLogin}
+              onChange={v => userStore.openAtLogin = v.target.checked}
               name="startup"
             />
           }
@@ -120,8 +157,8 @@ export const Application = observer(() => {
         <SubTitle title="Update Channel"/>
         <Select
           options={updateChannelOptions}
-          value={UserStore.getInstance().updateChannel}
-          onChange={({ value }: SelectOption) => UserStore.getInstance().updateChannel = value}
+          value={userStore.updateChannel}
+          onChange={({ value }) => userStore.updateChannel = value}
           themeName="lens"
         />
       </section>
@@ -132,8 +169,8 @@ export const Application = observer(() => {
         <SubTitle title="Locale Timezone" />
         <Select
           options={timezoneOptions}
-          value={UserStore.getInstance().localeTimezone}
-          onChange={({ value }: SelectOption) => UserStore.getInstance().setLocaleTimezone(value)}
+          value={userStore.localeTimezone}
+          onChange={({ value }) => userStore.setLocaleTimezone(value)}
           themeName="lens"
         />
       </section>