From 0d11de80e8fc5ec8d242dcc074ab1d20bba61fcb Mon Sep 17 00:00:00 2001 From: Luv Kapur Date: Wed, 6 Nov 2024 21:51:58 -0500 Subject: [PATCH] feat(component/menu): allow inject auth token to display in usebox (#9294) --- scopes/component/component/component.ui.runtime.tsx | 1 + scopes/component/component/get-component-opts.ts | 1 + scopes/component/component/ui/menu/menu.tsx | 12 ++++++++++-- scopes/component/component/ui/menu/nav-plugin.tsx | 1 + scopes/dependencies/pnpm/pnpm.ui.runtime.tsx | 13 ++++++++++++- scopes/dependencies/yarn/yarn.ui.runtime.tsx | 13 ++++++++++++- scopes/docs/docs/overview/overview.tsx | 5 +++-- scopes/harmony/cli-reference/cli-reference.docs.mdx | 1 - scopes/pkg/pkg/pkg.ui.runtime.tsx | 13 ++++++++++++- .../workspace/workspace/ui/workspace/workspace.tsx | 5 +++-- workspace.jsonc | 2 +- 11 files changed, 56 insertions(+), 11 deletions(-) diff --git a/scopes/component/component/component.ui.runtime.tsx b/scopes/component/component/component.ui.runtime.tsx index 783aae176c4e..5a903bec2cab 100644 --- 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 index 5168376e1c42..9c01c816b3f0 100644 --- 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 index 9b904cbb7532..16649d8367c5 100644 --- 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,6 +300,8 @@ 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 ? { @@ -301,10 +309,10 @@ export function VersionRelatedDropdowns(props: VersionRelatedDropdownsProps) { 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 index 318390314073..4a52731e7771 100644 --- 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 index f052f90a431d..ec75a6d2fee7 100644 --- a/scopes/dependencies/pnpm/pnpm.ui.runtime.tsx +++ b/scopes/dependencies/pnpm/pnpm.ui.runtime.tsx @@ -17,12 +17,22 @@ 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; @@ -30,12 +40,13 @@ export class PnpmUI { 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: , Component: !options?.hide ? ( { const packageName = componentModel?.packageName || packageNameFromProps; const latest = componentModel?.latest || latestFromProps; @@ -30,6 +40,7 @@ export class YarnUI { 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: ( @@ -37,7 +48,7 @@ export class YarnUI { ), Component: !options?.hide ? ( { 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: , Component: !options?.hide ? ( !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 index bd82c09c0dde..fd4a86db0849 100644 --- 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",