fix(api ref): missing api in tagged exports + correctly calculate lan…

…e component code url (#9162)
teambit · Sep 1, 2024 · 4593eac · 4593eac
1 parent 7ee1acb
commit 4593eac
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/scopes/api-reference/sections/api-reference-page/api-reference-page.tsx b/scopes/api-reference/sections/api-reference-page/api-reference-page.tsx
@@ -18,6 +18,8 @@ import { TreeNode } from '@teambit/design.ui.tree';
 import { RoundLoader } from '@teambit/design.ui.round-loader';
 import { EmptyBox } from '@teambit/design.ui.empty-box';
 import { ComponentUrl } from '@teambit/component.modules.component-url';
+import { useLanes } from '@teambit/lanes.hooks.use-lanes';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 
 import styles from './api-reference-page.module.scss';
 
@@ -31,6 +33,7 @@ export type APIRefPageProps = {
 
 export function APIRefPage({ rendererSlot, className }: APIRefPageProps) {
   const component = useContext(ComponentContext);
+  const lanes = useLanes();
   const renderers = flatten(rendererSlot.values());
   const { apiModel, loading } = useAPI(component.id.toString(), renderers);
   const isMobile = useIsMobile();
@@ -57,7 +60,7 @@ export function APIRefPage({ rendererSlot, className }: APIRefPageProps) {
   const getIcon = (node: TreeNode) => {
     const nodeType = node.id.split('/')[0];
     const icon = apiModel?.apiByType.get(nodeType)?.[0].renderer.icon?.url;
-    return icon;
+    return icon || undefined;
   };
 
   const selectedAPINode =
@@ -89,13 +92,24 @@ export function APIRefPage({ rendererSlot, className }: APIRefPageProps) {
   const name = selectedAPINode.api.name;
   const componentVersionFromUrl = query.get('version');
   const filePath = selectedAPINode.api.location.filePath;
-  const pathname = ComponentUrl.toUrl(component.id, { includeVersion: false, useLocationOrigin: true });
 
+  const pathname = ComponentUrl.toUrl(component.id, { includeVersion: false, useLocationOrigin: true });
   const componentUrlWithoutVersion = pathname?.split('~')[0];
-  const locationUrl = `${componentUrlWithoutVersion}/~code/${filePath}${
+
+  const viewedLaneId = lanes.lanesModel?.viewedLane?.id;
+  const laneComponentUrl =
+    viewedLaneId && !viewedLaneId.isDefault()
+      ? `${window.location.origin}${LanesModel.getLaneComponentUrl(component.id, viewedLaneId)}/~code/${filePath}${
+          componentVersionFromUrl ? `?version=${componentVersionFromUrl}` : ''
+        }`
+      : undefined;
+
+  const mainComponentUrl = `${componentUrlWithoutVersion}/~code/${filePath}${
     componentVersionFromUrl ? `?version=${componentVersionFromUrl}` : ''
   }`;
 
+  const locationUrl = laneComponentUrl || mainComponentUrl;
+
   return (
     <SplitPane layout={sidebarOpenness} size="85%" className={classNames(className, styles.apiRefPageContainer)}>
       <Pane className={styles.left}>

diff --git a/scopes/api-reference/tagged-exports/tagged-exports.tsx b/scopes/api-reference/tagged-exports/tagged-exports.tsx
@@ -22,19 +22,23 @@ export function TaggedExports({ componentId, showBanner, ...rest }: TaggedExport
   const taggedAPIs = api.apiModel?.taggedAPINodes;
   const loading = !!api.loading;
 
-  if (!loading && !api.apiModel) return null;
+  if (loading) {
+    return (
+      <Section {...rest} className={styles.section}>
+        <div className={styles.loader}>
+          <div className={styles.loaderTitle}>
+            <CircleSkeleton size={1.5} />
+            <WordSkeleton length={5} />
+          </div>
 
-  const Loader = (
-    <div className={styles.loader}>
-      <div className={styles.loaderTitle}>
-        <CircleSkeleton size={1.5} />
-        <WordSkeleton length={5} />
-      </div>
+          <BlockSkeleton lines={8} />
+          <BlockSkeleton lines={4} />
+        </div>
+      </Section>
+    );
+  }
 
-      <BlockSkeleton lines={8} />
-      <BlockSkeleton lines={4} />
-    </div>
-  );
+  if (!api.apiModel || !api.apiModel.apiNodes.length) return null;
 
   return (
     <Section {...rest} className={styles.section}>
@@ -44,12 +48,12 @@ export function TaggedExports({ componentId, showBanner, ...rest }: TaggedExport
           <span>API</span>
         </div>
       </LinkedHeading>
-      {showTableOfContents && api.apiModel && (
+      {showTableOfContents && (
         <div className={styles.content}>
           <APIReferenceTableOfContents apiModel={api.apiModel} />
         </div>
       )}
-      {!loading && (
+      {
         <div className={styles.taggedAPIs}>
           {taggedAPIs?.map((taggedAPI, index) => {
             const OverviewComponent = taggedAPI.renderer.OverviewComponent;
@@ -65,8 +69,8 @@ export function TaggedExports({ componentId, showBanner, ...rest }: TaggedExport
             );
           })}
         </div>
-      )}
-      {!loading && showBanner && (
+      }
+      {showBanner && (
         <div className={styles.banner}>
           <img style={{ width: 16 }} src="https://static.bit.dev/bit-icons/lightbulb-thinking.svg" />
           <span>
@@ -76,7 +80,6 @@ export function TaggedExports({ componentId, showBanner, ...rest }: TaggedExport
           </span>
         </div>
       )}
-      {loading && Loader}
     </Section>
   );
 }
diff --git a/scopes/compositions/composition-card/composition-card.tsx b/scopes/compositions/composition-card/composition-card.tsx
@@ -41,7 +41,10 @@ function _CompositionCard({
 
   return (
     <div {...rest} key={composition.identifier} className={classnames(styles.compositionCard, className)}>
-      <div className={styles.compositionPreview}>{Composition}</div>
+      <div className={styles.compositionPreview}>
+        {Composition}
+        <div className={styles.previewOverlay} />
+      </div>
       <div className={styles.bottom}>
         <span className={classnames(ellipsis, styles.displayName)}>{composition.displayName}</span>
         {openCompositionLink && (