New empty state slot

scopes/docs/docs/docs.ui.runtime.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { flatten } from 'lodash';
 import { ComponentAspect, ComponentUI } from '@teambit/component';
 import { Slot } from '@teambit/harmony';
@@ -29,6 +29,16 @@ export class DocsUI {
     return flatten(this.titleBadgeSlot.values());
   }
 
+  private _emptyState?: ComponentType;
+
+  registerEmptyState(emptyState: ComponentType) {
+    return this._emptyState = emptyState;
+  }
+
+  getEmptyState() {
+    return this._emptyState;
+  }
+
   getDocsCompare() {
     return <OverviewCompare titleBadges={this.titleBadgeSlot} overviewOptions={this.overviewOptionsSlot} />;
   }
@@ -49,7 +59,7 @@ export class DocsUI {
     [titleBadgeSlot, overviewOptionsSlot]: [TitleBadgeSlot, OverviewOptionsSlot]
   ) {
     const docs = new DocsUI(titleBadgeSlot, overviewOptionsSlot);
-    const section = new OverviewSection(titleBadgeSlot, overviewOptionsSlot);
+    const section = new OverviewSection(titleBadgeSlot, overviewOptionsSlot, docs);
     const compareSection = new OverviewCompareSection(docs);
 
     component.registerRoute(section.route);

scopes/docs/docs/overview.section.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { Section } from '@teambit/component';
 import { Overview, TitleBadgeSlot, OverviewOptionsSlot } from './overview';
+import { DocsUI } from './docs.ui.runtime';
 
 export class OverviewSection implements Section {
   constructor(
     /**
      * title badge slot.
      */
     private titleBadgeSlot: TitleBadgeSlot,
-    private overviewOptionsSlot: OverviewOptionsSlot
+    private overviewOptionsSlot: OverviewOptionsSlot,
+    private docs: DocsUI
   ) {}
 
   navigationLink = {
@@ -19,7 +21,13 @@ export class OverviewSection implements Section {
 
   route = {
     index: true,
-    element: <Overview titleBadges={this.titleBadgeSlot} overviewOptions={this.overviewOptionsSlot} />,
+    element: (
+      <Overview
+        titleBadges={this.titleBadgeSlot}
+        overviewOptions={this.overviewOptionsSlot}
+        getEmptyState={this.docs.getEmptyState.bind(this.docs)}
+      />
+    ),
   };
 
   order = 10;

scopes/docs/docs/overview/overview.tsx

@@ -7,7 +7,7 @@ import { PropertiesTable } from '@teambit/react.ui.docs.properties-table';
 import { ComponentContext, useComponentDescriptor } from '@teambit/component';
 import type { SlotRegistry } from '@teambit/harmony';
 import { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';
-import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
+// import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
 import { ComponentOverview } from '@teambit/component.ui.component-meta';
 import { CompositionGallery } from '@teambit/compositions.panels.composition-gallery';
 // import { ReadmeSkeleton } from './readme-skeleton';
@@ -36,24 +36,27 @@ export type OverviewProps = {
   titleBadges: TitleBadgeSlot;
   overviewOptions: OverviewOptionsSlot;
   previewProps?: Partial<ComponentPreviewProps>;
+  getEmptyState?: () => ComponentType|undefined;
 };
 
-export function Overview({ titleBadges, overviewOptions, previewProps }: OverviewProps) {
+export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyState }: OverviewProps) {
   const component = useContext(ComponentContext);
   const componentDescriptor = useComponentDescriptor();
   const overviewProps = flatten(overviewOptions.values())[0];
   const showHeader = !component.preview?.legacyHeader;
   const [isLoading, setLoading] = useState(true);
+  const EmptyState = getEmptyState && getEmptyState();
 
-  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
-    return (
-      <StatusMessageCard style={{ margin: 'auto' }} status="PROCESSING" title="component preview pending">
-        this might take some time
-      </StatusMessageCard>
-    );
+  // if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
+  //   return (
+  //     <StatusMessageCard style={{ margin: 'auto' }} status="PROCESSING" title="component preview pending">
+  //       this might take some time
+  //     </StatusMessageCard>
+  //   );
 
-  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
-    return <StatusMessageCard style={{ margin: 'auto' }} status="FAILURE" title="failed to get component preview " />;
+  // if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
+  //   return <StatusMessageCard style={{ margin: 'auto' }} status="FAILURE" title="failed to get component preview " />;
+  const buildFailed = component.buildStatus !== 'Succeed' && component?.host === 'teambit.scope/scope';
 
   const isScaling = component.preview?.isScaling;
 
@@ -93,7 +96,7 @@ export function Overview({ titleBadges, overviewOptions, previewProps }: Overvie
       {/* <LinkedHeading size="xs" className={styles.title}>
         <Icon of="text" /> <span>README</span>
       </LinkedHeading> */}
-      <div className={styles.readme}>
+      {!buildFailed && <div className={styles.readme}>
         {/* {isLoading && <ReadmeSkeleton />} */}
         <ComponentPreview
           onLoad={onPreviewLoad}
@@ -111,7 +114,8 @@ export function Overview({ titleBadges, overviewOptions, previewProps }: Overvie
         {component.preview?.skipIncludes && (
           <PropertiesTable className={styles.overviewPropsTable} componentId={component.id.toString()} />
         )}
-      </div>
+      </div>}
+      {(buildFailed && EmptyState) && <EmptyState />}
     </div>
   );
 }