feat(component/menu): allow inject auth token to display in usebox (#…

…9294)
teambit · Nov 7, 2024 · 0d11de8 · 0d11de8
1 parent fd6f86f
commit 0d11de8
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 11 deletions.
diff --git a/scopes/component/component/component.ui.runtime.tsx b/scopes/component/component/component.ui.runtime.tsx
@@ -236,6 +236,7 @@ export class ComponentUI {
         componentIdStr={options.componentId}
         useComponentFilters={options.useComponentFilters}
         RightNode={options.RightNode}
+        authToken={options.authToken}
       />
     );
   }

diff --git a/scopes/component/component/get-component-opts.ts b/scopes/component/component/get-component-opts.ts
@@ -11,4 +11,5 @@ export type GetComponentsOptions = {
   RightNode?: React.ReactNode;
   className?: string;
   routes?: RouteProps[];
+  authToken?: string;
 };
diff --git a/scopes/component/component/ui/menu/menu.tsx b/scopes/component/component/ui/menu/menu.tsx
@@ -18,6 +18,7 @@ import { useComponent as useComponentQuery, UseComponentType, Filters } from '..
 import { CollapsibleMenuNav } from './menu-nav';
 import { OrderedNavigationSlot, ConsumeMethodSlot, ConsumePluginProps } from './nav-plugin';
 import { useIdFromLocation } from '../use-component-from-location';
+
 import styles from './menu.module.scss';
 
 export type RightSideMenuItem = { item: ReactNode; order: number };
@@ -69,6 +70,8 @@ export type MenuProps = {
   };
 
   path?: string;
+
+  authToken?: string;
 };
 function getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {
   if (isFunction(componentIdStr)) return componentIdStr();
@@ -91,6 +94,7 @@ export function ComponentMenu({
   useComponent,
   path,
   useComponentFilters,
+  authToken,
 }: MenuProps) {
   const idFromLocation = useIdFromLocation();
   const componentIdStrWithScopeFromLocation = useIdFromLocation(undefined, true);
@@ -117,6 +121,7 @@ export function ComponentMenu({
             componentId={componentId?.toString() || idFromLocation}
             useComponent={useComponentVersions}
             componentFilters={componentFilters}
+            authToken={authToken}
             // loading={loading}
           />
           {rightSideItems.map(({ item }) => item)}
@@ -159,6 +164,7 @@ export type VersionRelatedDropdownsProps = {
     showVersionDetails?: boolean;
     getActiveTabIndex?: GetActiveTabIndex;
   };
+  authToken?: string;
 };
 export type UseComponentVersionsProps = {
   skip?: boolean;
@@ -294,17 +300,19 @@ export function VersionRelatedDropdowns(props: VersionRelatedDropdownsProps) {
   const currentVersion =
     isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : (_currentVersion ?? '');
 
+  const authToken = props.authToken;
+
   const consumeMethodProps: ConsumePluginProps | undefined = React.useMemo(() => {
     return id
       ? {
           id,
           packageName: packageName ?? '',
           latest,
           options: { viewedLane, disableInstall: !packageName },
+          authToken,
         }
       : undefined;
-  }, [id, packageName, latest, viewedLane]);
-
+  }, [id, packageName, latest, viewedLane, authToken]);
   const methods = useConsumeMethods(consumeMethods, consumeMethodProps);
   const hasMethods = methods?.length > 0;
 

diff --git a/scopes/component/component/ui/menu/nav-plugin.tsx b/scopes/component/component/ui/menu/nav-plugin.tsx
@@ -29,6 +29,7 @@ export type ConsumePluginProps = {
   // @deprecated - pass id, packageName and latest instead via props
   componentModel?: ComponentModel;
   options?: ConsumePluginOptions;
+  authToken?: string;
 };
 
 export type ConsumePlugin = (props: ConsumePluginProps) => ConsumeMethod | undefined;

diff --git a/scopes/dependencies/pnpm/pnpm.ui.runtime.tsx b/scopes/dependencies/pnpm/pnpm.ui.runtime.tsx
@@ -17,25 +17,36 @@ export class PnpmUI {
 
   constructor(private compUI: ComponentUI) {}
 
+  private getNpmConfig(registry: string, authToken?: string): string {
+    const registryUrl = 'https://node-registry.bit.cloud';
+    const configs = [
+      `${registry}:registry="${registryUrl}"`,
+      authToken ? `"//node-registry.bit.cloud/:_authToken=${authToken}"` : undefined,
+    ].filter(Boolean);
+    return `npm config set ${configs.join(' ')}`;
+  }
+
   private consumeMethod: ConsumePlugin = ({
     id: componentId,
     packageName: packageNameFromProps,
     latest: latestFromProps,
     options,
     componentModel,
+    authToken,
   }) => {
     const packageName = componentModel?.packageName || packageNameFromProps;
     const latest = componentModel?.latest || latestFromProps;
 
     const registry = packageName.split('/')[0];
     const packageVersion =
       componentId.version === latest ? '' : `@${this.compUI.formatToInstallableVersion(componentId.version as string)}`;
+    const npmConfig = this.getNpmConfig(registry, authToken);
 
     return {
       Title: <img style={{ height: '16px', marginTop: '-2px' }} src="https://static.bit.dev/brands/pnpm.svg" />,
       Component: !options?.hide ? (
         <Install
-          config={`npm config set '${registry}:registry' https://node-registry.bit.cloud`}
+          config={npmConfig}
           componentName={componentId.name}
           packageManager="pnpm"
           copyString={`pnpm i ${packageName}${packageVersion}`}

diff --git a/scopes/dependencies/yarn/yarn.ui.runtime.tsx b/scopes/dependencies/yarn/yarn.ui.runtime.tsx
@@ -17,27 +17,38 @@ export class YarnUI {
 
   constructor(private compUI: ComponentUI) {}
 
+  private getNpmConfig(registry: string, authToken?: string): string {
+    const registryUrl = 'https://node-registry.bit.cloud';
+    const configs = [
+      `${registry}:registry="${registryUrl}"`,
+      authToken ? `"//node-registry.bit.cloud/:_authToken=${authToken}"` : undefined,
+    ].filter(Boolean);
+    return `npm config set ${configs.join(' ')}`;
+  }
+
   private consumeMethod: ConsumePlugin = ({
     packageName: packageNameFromProps,
     id: componentId,
     latest: latestFromProps,
     options,
     componentModel,
+    authToken,
   }) => {
     const packageName = componentModel?.packageName || packageNameFromProps;
     const latest = componentModel?.latest || latestFromProps;
 
     const registry = packageName.split('/')[0];
     const packageVersion =
       componentId.version === latest ? '' : `@${this.compUI.formatToInstallableVersion(componentId.version as string)}`;
+    const npmConfig = this.getNpmConfig(registry, authToken);
 
     return {
       Title: (
         <img style={{ height: '17px', paddingTop: '4px' }} src="https://static.bit.dev/brands/logo-yarn-text.svg" />
       ),
       Component: !options?.hide ? (
         <Install
-          config={`npm config set '${registry}:registry' https://node-registry.bit.cloud`}
+          config={npmConfig}
           componentName={componentId.name}
           packageManager="yarn"
           copyString={`yarn add ${packageName}${packageVersion}`}

diff --git a/scopes/docs/docs/overview/overview.tsx b/scopes/docs/docs/overview/overview.tsx
@@ -43,7 +43,8 @@ export type OverviewProps = {
 export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyState, TaggedAPI }: OverviewProps) {
   const component = useContext(ComponentContext);
   const componentDescriptor = useComponentDescriptor();
-  const { current } = useThemePicker();
+  const theme = useThemePicker();
+  const currentTheme = theme?.current;
   const overviewProps = flatten(overviewOptions.values())[0];
   const showHeader = !component.preview?.legacyHeader;
   const EmptyState = getEmptyState && getEmptyState();
@@ -62,7 +63,7 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
 
   const overviewPropsValues = overviewProps && overviewProps();
 
-  const themeParams = current?.themeName ? `theme=${current?.themeName}` : '';
+  const themeParams = currentTheme?.themeName ? `theme=${currentTheme?.themeName}` : '';
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { onLoad, style, ...rest } = previewProps || {};

diff --git a/scopes/harmony/cli-reference/cli-reference.docs.mdx b/scopes/harmony/cli-reference/cli-reference.docs.mdx
@@ -2,4 +2,3 @@
 description: 'Bit command synopses. Bit version: 1.8.103'
 labels: ['cli', 'mdx', 'docs']
 ---
-
diff --git a/scopes/pkg/pkg/pkg.ui.runtime.tsx b/scopes/pkg/pkg/pkg.ui.runtime.tsx
@@ -17,12 +17,22 @@ export class PkgUI {
 
   constructor(private compUI: ComponentUI) {}
 
+  private getNpmConfig(registry: string, authToken?: string): string {
+    const registryUrl = 'https://node-registry.bit.cloud';
+    const configs = [
+      `${registry}:registry="${registryUrl}"`,
+      authToken ? `"//node-registry.bit.cloud/:_authToken=${authToken}"` : undefined,
+    ].filter(Boolean);
+    return `npm config set ${configs.join(' ')}`;
+  }
+
   private npmConsumeMethod: ConsumePlugin = ({
     packageName: packageNameFromProps,
     latest: latestFromProps,
     id: componentId,
     options,
     componentModel,
+    authToken,
   }) => {
     const packageName = componentModel?.packageName || packageNameFromProps;
     const latest = componentModel?.latest || latestFromProps;
@@ -31,12 +41,13 @@ export class PkgUI {
 
     const packageVersion =
       componentId.version === latest ? '' : `@${this.compUI.formatToInstallableVersion(componentId.version as string)}`;
+    const npmConfig = this.getNpmConfig(registry, authToken);
 
     return {
       Title: <img style={{ width: '30px' }} src="https://static.bit.dev/brands/logo-npm-new.svg" />,
       Component: !options?.hide ? (
         <Install
-          config={`npm config set '${registry}:registry' https://node-registry.bit.cloud`}
+          config={npmConfig}
           componentName={componentId.name}
           packageManager="npm"
           copyString={`npm i ${packageName}${packageVersion}`}

diff --git a/scopes/workspace/workspace/ui/workspace/workspace.tsx b/scopes/workspace/workspace/ui/workspace/workspace.tsx
@@ -35,10 +35,11 @@ export type WorkspaceProps = {
 export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebarTogglerChange }: WorkspaceProps) {
   const reactions = useComponentNotifications();
   const { workspace } = useWorkspace(reactions);
-  const { current } = useThemePicker();
+  const theme = useThemePicker();
+  const currentTheme = theme?.current;
   const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, true);
   const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;
-  const themeName = current?.themeName || 'light';
+  const themeName = currentTheme?.themeName || 'light';
   onSidebarTogglerChange(handleSidebarToggle);
 
   if (!workspace) {

diff --git a/workspace.jsonc b/workspace.jsonc
@@ -313,8 +313,8 @@
         "@teambit/ui-foundation.ui.use-box.back-button": "^0.0.119",
         "@teambit/ui-foundation.ui.use-box.bit-info": "^0.0.128",
         "@teambit/ui-foundation.ui.use-box.bottom-link": "^0.0.119",
+        "@teambit/ui-foundation.ui.use-box.menu": "^1.0.12",
         "@teambit/ui-foundation.ui.use-box.dropdown": "^0.0.143",
-        "@teambit/ui-foundation.ui.use-box.menu": "^1.0.11",
         "@teambit/ui-foundation.ui.use-box.scope-menu": "^0.0.146",
         "@teambit/ui-foundation.ui.use-box.tab": "^0.0.122",
         "@teambit/ui-foundation.ui.use-box.tab-content": "^0.0.122",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,3 @@
		description: 'Bit command synopses. Bit version: 1.8.103'
		labels: ['cli', 'mdx', 'docs']
		---