@teambit/workspace 1.0.122 → 1.0.123

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "1.0.122",
+  "version": "1.0.123",
   "homepage": "https://bit.cloud/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "1.0.122"
+    "version": "1.0.123"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -35,7 +35,6 @@
     "@teambit/legacy-bit-id": "1.1.0",
     "@teambit/dependencies.modules.packages-excluder": "1.0.8",
     "@teambit/design.ui.tree": "0.0.15",
-    "@teambit/lanes.hooks.use-lane-components": "0.0.253",
     "@teambit/lanes.hooks.use-lanes": "0.0.254",
     "@teambit/lanes.ui.models.lanes-model": "0.0.207",
     "@teambit/ui-foundation.ui.side-bar": "0.0.871",
@@ -61,37 +60,39 @@
     "@teambit/explorer.ui.component-card": "0.0.30",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.496",
     "@teambit/workspace.ui.empty-workspace": "0.0.508",
-    "@teambit/component": "1.0.122",
-    "@teambit/dependency-resolver": "1.0.122",
-    "@teambit/envs": "1.0.122",
-    "@teambit/logger": "0.0.937",
-    "@teambit/scope": "1.0.122",
-    "@teambit/graph": "1.0.122",
-    "@teambit/cli": "0.0.844",
-    "@teambit/isolator": "1.0.122",
-    "@teambit/component-tree": "1.0.122",
+    "@teambit/component": "1.0.123",
+    "@teambit/dependency-resolver": "1.0.123",
+    "@teambit/envs": "1.0.123",
+    "@teambit/logger": "0.0.938",
+    "@teambit/scope": "1.0.123",
+    "@teambit/graph": "1.0.123",
+    "@teambit/cli": "0.0.845",
+    "@teambit/isolator": "1.0.123",
+    "@teambit/component-tree": "1.0.123",
     "@teambit/harmony.modules.resolved-component": "0.0.497",
-    "@teambit/watcher": "1.0.122",
-    "@teambit/aspect-loader": "1.0.122",
-    "@teambit/config": "0.0.873",
-    "@teambit/global-config": "0.0.847",
+    "@teambit/watcher": "1.0.123",
+    "@teambit/aspect-loader": "1.0.123",
+    "@teambit/config": "0.0.874",
+    "@teambit/global-config": "0.0.848",
     "@teambit/harmony.modules.requireable-component": "0.0.497",
     "@teambit/toolbox.modules.module-resolver": "0.0.7",
     "@teambit/workspace.modules.node-modules-linker": "0.0.161",
-    "@teambit/graphql": "1.0.122",
-    "@teambit/bundler": "1.0.122",
-    "@teambit/pubsub": "1.0.122",
-    "@teambit/ui": "1.0.122",
-    "@teambit/variants": "0.0.966",
+    "@teambit/graphql": "1.0.123",
+    "@teambit/bundler": "1.0.123",
+    "@teambit/pubsub": "1.0.123",
+    "@teambit/ui": "1.0.123",
+    "@teambit/variants": "0.0.967",
     "@teambit/component-issues": "0.0.140",
     "@teambit/workspace.modules.match-pattern": "0.0.504",
     "@teambit/component.ui.component-drawer": "0.0.385",
-    "@teambit/command-bar": "1.0.122",
-    "@teambit/sidebar": "1.0.122",
-    "@teambit/deprecation": "1.0.122",
+    "@teambit/lanes.hooks.use-lane-components": "0.0.255",
+    "@teambit/command-bar": "1.0.123",
+    "@teambit/sidebar": "1.0.123",
+    "@teambit/deprecation": "1.0.123",
     "@teambit/component-descriptor": "0.0.412",
     "@teambit/cloud.hooks.use-cloud-scopes": "0.0.3",
-    "@teambit/preview.ui.preview-placeholder": "0.0.507"
+    "@teambit/preview.ui.preview-placeholder": "0.0.508",
+    "@teambit/workspace.ui.workspace-component-card": "0.0.517"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/workspace/workspace-overview/workspace-overview.module.scss

@@ -35,3 +35,14 @@
   margin-bottom: 4px;
   box-shadow: 0px 2px 18px rgb(0 0 0 / 10%);
 }
+
+.cardGrid {
+  grid-column-gap: 10px;
+  grid-gap: 32px 24px;
+  -moz-column-gap: 10px;
+  column-gap: 10px;
+  display: grid;
+  gap: 32px 24px;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  max-width: 1280px;
+}

package/ui/workspace/workspace-overview/workspace-overview.tsx

@@ -7,7 +7,9 @@ import { ComponentID } from '@teambit/component-id';
 import { ComponentModel } from '@teambit/component';
 import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
 import { ScopeID } from '@teambit/scopes.scope-id';
-import { ComponentCard, ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
+import { compact } from 'lodash';
+import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
+import { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
 import { WorkspaceContext } from '../workspace-context';
 import styles from './workspace-overview.module.scss';
 import { LinkPlugin } from './link-plugin';
@@ -20,27 +22,37 @@ export function WorkspaceOverview() {
   const uniqueScopesArr = Array.from(uniqueScopes);
   const { cloudScopes = [] } = useCloudScopes(uniqueScopesArr);
   const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));
+
   const plugins = useCardPlugins({ compModelsById });
+
   if (!components || components.length === 0) return <EmptyWorkspace name={workspace.name} />;
+
   const compDescriptorById = new Map(componentDescriptors.map((comp) => [comp.id.toString(), comp]));
+  const componentsWithDescriptorAndScope = compact(
+    components.map((component) => {
+      if (component.deprecation?.isDeprecate) return null;
+      const componentDescriptor = compDescriptorById.get(component.id.toString());
+      if (!componentDescriptor) return null;
+      const cloudScope = cloudScopesById.get(component.id.scope);
+      const scope =
+        cloudScope ||
+        (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
+        undefined;
+
+      return { component, componentDescriptor, scope };
+    })
+  );
+
   return (
     <div className={styles.container}>
-      <ComponentGrid>
-        {components.map((component) => {
-          if (component.deprecation?.isDeprecate) return null;
-          const compDescriptor = compDescriptorById.get(component.id.toString());
-          if (!compDescriptor) return null;
-          const cloudScope = cloudScopesById.get(component.id.scope);
-          const scope =
-            cloudScope ||
-            (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
-            undefined;
+      <ComponentGrid className={styles.cardGrid}>
+        {componentsWithDescriptorAndScope.map(({ component, componentDescriptor, scope }) => {
           return (
-            <ComponentCard
+            <WorkspaceComponentCard
               key={component.id.toString()}
-              component={compDescriptor}
+              componentDescriptor={componentDescriptor}
+              component={component}
               plugins={plugins}
-              displayOwnerDetails="all"
               scope={scope}
             />
           );
@@ -58,10 +70,16 @@ export function useCardPlugins({
   const plugins = React.useMemo(
     () => [
       {
-        preview: function Preview({ component }) {
+        preview: function Preview({ component, shouldShowPreview }) {
           const compModel = compModelsById.get(component.id.toString());
           if (!compModel) return null;
-          return <PreviewPlaceholder componentDescriptor={component} component={compModel} />;
+          return (
+            <PreviewPlaceholder
+              componentDescriptor={component}
+              component={compModel}
+              shouldShowPreview={shouldShowPreview}
+            />
+          );
         },
       },
       {