show text when the scope/workspace is empty (teambit#3929)

Author: JoshK2

.bitmap

@@ -1015,6 +1015,12 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/design/ui/styles/ellipsis"
     },
+    "ui/styles/muted-italic": {
+        "scope": "",
+        "version": "",
+        "mainFile": "index.ts",
+        "rootDir": "scopes/design/ui/styles/muted-italic"
+    },
     "ui/surfaces/menu/item": {
         "scope": "teambit.design",
         "version": "0.0.312",

scopes/design/ui/styles/muted-italic/index.ts

@@ -0,0 +1,3 @@
+import styles from './muted-italic.module.scss';
+
+export const mutedItalic = styles.mutedItalic;

scopes/design/ui/styles/muted-italic/muted-italic.docs.md

@@ -0,0 +1,13 @@
+---
+labels: ['react', 'typescript', 'text', 'css']
+description: 'A css component for text.'
+---
+
+import { mutedItalic } from './index';
+
+A CSS component that displays the text with muted-text and italic font-style.  
+Example:
+
+```js live
+<span className={mutedItalic}>Italic muted text.</span>
+```

scopes/design/ui/styles/muted-italic/muted-italic.module.scss

@@ -0,0 +1,4 @@
+.mutedItalic {
+  color: var(--text-muted, #6c707c);
+  font-style: italic;
+}

scopes/scope/scope/scope.ui.runtime.tsx

@@ -16,7 +16,7 @@ import { ScopeMenu } from './ui/menu';
 import { ScopeAspect } from './scope.aspect';
 import { Scope } from './ui/scope';
 import { ScopeModel } from './ui/scope-model';
-import { ComponentsDrawer } from './components.drawer';
+import { ComponentsDrawer } from './ui/components-drawer';
 
 export type ScopeBadge = ComponentType;
 

scopes/scope/scope/ui/components-drawer/components.drawer.module.scss

@@ -0,0 +1,4 @@
+.emptyScope {
+  padding: 8px 8px 0 28px;
+  display: block;
+}

scopes/scope/scope/components.drawer.tsx renamed to scopes/scope/scope/ui/components-drawer/components.drawer.tsx

@@ -1,11 +1,16 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import { ComponentTree, ComponentView, NamespaceTreeNode, PayloadType, ScopePayload } from '@teambit/ui.side-bar';
 import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
 
 import { FullLoader } from '@teambit/ui.full-loader';
 import { ComponentTreeSlot } from '@teambit/component-tree';
 import type { DrawerType } from '@teambit/ui.tree.drawer';
-import { useScope } from './ui/use-scope';
+import { Text } from '@teambit/base-ui.text.text';
+import { mutedItalic } from '@teambit/ui.styles.muted-italic';
+import { ellipsis } from '@teambit/ui.styles.ellipsis';
+import { useScope } from '../use-scope';
+import styles from './components.drawer.module.scss';
 
 export class ComponentsDrawer implements DrawerType {
   constructor(private treeNodeSlot: ComponentTreeSlot) {}
@@ -39,6 +44,8 @@ export class ComponentsDrawer implements DrawerType {
     );
 
     if (!scope) return <FullLoader />;
+    if (scope.components.length === 0)
+      return <Text className={classNames(mutedItalic, ellipsis, styles.emptyScope)}>Scope is empty</Text>;
     return <ComponentTree components={scope.components} TreeNode={TreeNodeRenderer} />;
   };
 }

scopes/scope/scope/ui/components-drawer/index.ts

@@ -0,0 +1 @@
+export { ComponentsDrawer } from './components.drawer';

scopes/workspace/workspace/ui/workspace-components-drawer/index.ts

@@ -0,0 +1 @@
+export { WorkspaceComponentsDrawer } from './workspace-components.drawer';

scopes/workspace/workspace/ui/workspace-components-drawer/workspace-components.drawer.module.scss

@@ -0,0 +1,4 @@
+.emptyWorkspace {
+  padding: 8px 8px 0 28px;
+  display: block;
+}