@teambit/workspace
Version:
260 lines (258 loc) • 9.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WorkspaceOverview = WorkspaceOverview;
exports.useCardPlugins = useCardPlugins;
function _react() {
const data = _interopRequireWildcard(require("react"));
_react = function () {
return data;
};
return data;
}
function _explorerUiGallery() {
const data = require("@teambit/explorer.ui.gallery.component-grid");
_explorerUiGallery = function () {
return data;
};
return data;
}
function _workspaceUi() {
const data = require("@teambit/workspace.ui.empty-workspace");
_workspaceUi = function () {
return data;
};
return data;
}
function _previewUi() {
const data = require("@teambit/preview.ui.preview-placeholder");
_previewUi = function () {
return data;
};
return data;
}
function _designUi() {
const data = require("@teambit/design.ui.tooltip");
_designUi = function () {
return data;
};
return data;
}
function _componentId() {
const data = require("@teambit/component-id");
_componentId = function () {
return data;
};
return data;
}
function _lodash() {
const data = _interopRequireDefault(require("lodash.compact"));
_lodash = function () {
return data;
};
return data;
}
function _scopes() {
const data = require("@teambit/scopes.scope-id");
_scopes = function () {
return data;
};
return data;
}
function _cloudHooks() {
const data = require("@teambit/cloud.hooks.use-cloud-scopes");
_cloudHooks = function () {
return data;
};
return data;
}
function _workspaceUi2() {
const data = require("@teambit/workspace.ui.workspace-component-card");
_workspaceUi2 = function () {
return data;
};
return data;
}
function _workspaceUi3() {
const data = require("@teambit/workspace.ui.use-workspace-mode");
_workspaceUi3 = function () {
return data;
};
return data;
}
function _designUi2() {
const data = require("@teambit/design.ui.heading");
_designUi2 = function () {
return data;
};
return data;
}
function _workspaceContext() {
const data = require("../workspace-context");
_workspaceContext = function () {
return data;
};
return data;
}
function _linkPlugin() {
const data = require("./link-plugin");
_linkPlugin = function () {
return data;
};
return data;
}
function _useWorkspaceAggregation() {
const data = require("./use-workspace-aggregation");
_useWorkspaceAggregation = function () {
return data;
};
return data;
}
function _useQueryParamWithDefault() {
const data = require("./use-query-param-with-default");
_useQueryParamWithDefault = function () {
return data;
};
return data;
}
function _workspaceFilterPanel() {
const data = require("./workspace-filter-panel");
_workspaceFilterPanel = function () {
return data;
};
return data;
}
function _workspaceOverviewModule() {
const data = _interopRequireDefault(require("./workspace-overview.module.scss"));
_workspaceOverviewModule = function () {
return data;
};
return data;
}
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function WorkspaceOverview() {
const workspace = (0, _react().useContext)(_workspaceContext().WorkspaceContext);
const {
components,
componentDescriptors
} = workspace;
if (!components.length) return /*#__PURE__*/_react().default.createElement(_workspaceUi().EmptyWorkspace, {
name: workspace.name
});
const {
isMinimal
} = (0, _workspaceUi3().useWorkspaceMode)();
const compModelsById = (0, _react().useMemo)(() => new Map(components.map(c => [c.id.toString(), c])), [components]);
const uniqueScopes = [...new Set(components.map(c => c.id.scope))];
const {
cloudScopes
} = (0, _cloudHooks().useCloudScopes)(uniqueScopes);
const cloudMap = new Map((cloudScopes || []).map(s => [s.id.toString(), s]));
const compDescriptorMap = new Map(componentDescriptors.map(d => [d.id.toString(), d]));
const items = (0, _lodash().default)(components.map(component => {
if (component.deprecation?.isDeprecate) return null;
const descriptor = compDescriptorMap.get(component.id.toString());
if (!descriptor) return null;
const cloudScope = cloudMap.get(component.id.scope);
const scope = cloudScope || _scopes().ScopeID.isValid(component.id.scope) && {
id: _scopes().ScopeID.fromString(component.id.scope)
} || undefined;
return {
component,
componentDescriptor: descriptor,
scope: scope && {
id: scope.id
} || undefined
};
}));
const [aggregation, setAggregation] = (0, _useQueryParamWithDefault().useQueryParamWithDefault)('aggregation', 'namespaces');
const [activeNamespaces, setActiveNamespaces] = (0, _react().useState)([]);
const [activeScopes, setActiveScopes] = (0, _react().useState)([]);
const filters = (0, _react().useMemo)(() => ({
namespaces: activeNamespaces,
scopes: activeScopes
}), [activeNamespaces, activeScopes]);
const {
groups,
groupType,
availableAggregations,
filteredCount
} = (0, _useWorkspaceAggregation().useWorkspaceAggregation)(items, aggregation, filters);
const plugins = useCardPlugins({
compModelsById,
showPreview: isMinimal
});
return /*#__PURE__*/_react().default.createElement("div", {
className: _workspaceOverviewModule().default.container
}, /*#__PURE__*/_react().default.createElement(_workspaceFilterPanel().WorkspaceFilterPanel, {
aggregation: aggregation,
onAggregationChange: setAggregation,
availableAggregations: availableAggregations,
items: items,
activeNamespaces: activeNamespaces,
onNamespacesChange: setActiveNamespaces,
activeScopes: activeScopes,
onScopesChange: setActiveScopes
}), filteredCount === 0 && /*#__PURE__*/_react().default.createElement(_workspaceUi().EmptyWorkspace, {
name: workspace.name
}), groups.map(group => /*#__PURE__*/_react().default.createElement("section", {
key: group.name,
className: _workspaceOverviewModule().default.agg
}, groupType !== 'none' && /*#__PURE__*/_react().default.createElement(_designUi2().H3, {
className: _workspaceOverviewModule().default.aggregationTitle
}, group.displayName), /*#__PURE__*/_react().default.createElement(_explorerUiGallery().ComponentGrid, {
className: _workspaceOverviewModule().default.cardGrid
}, group.items.map(item => /*#__PURE__*/_react().default.createElement(_workspaceUi2().WorkspaceComponentCard, {
key: item.component.id.toString(),
component: item.component,
componentDescriptor: item.componentDescriptor,
scope: item.scope,
plugins: plugins,
shouldShowPreviewState: isMinimal
}))))));
}
function useCardPlugins({
compModelsById,
showPreview
}) {
const serverUrlsSignature = _react().default.useMemo(() => {
const serversCount = Array.from(compModelsById.values()).filter(comp => comp.server?.url).map(comp => comp.server?.url).join(',');
return serversCount;
}, [compModelsById]);
const plugins = _react().default.useMemo(() => [{
preview: function Preview({
component,
shouldShowPreview
}) {
const compModel = compModelsById.get(component.id.toString());
if (!compModel) return null;
return /*#__PURE__*/_react().default.createElement(_previewUi().PreviewPlaceholder, {
componentDescriptor: component,
component: compModel,
shouldShowPreview: showPreview || shouldShowPreview
});
}
}, {
previewBottomRight: function PreviewBottomRight({
component
}) {
const env = component.get('teambit.envs/envs');
const envComponentId = env?.id ? _componentId().ComponentID.fromString(env?.id) : undefined;
return /*#__PURE__*/_react().default.createElement("div", {
className: _workspaceOverviewModule().default.rightPreviewPlugins
}, /*#__PURE__*/_react().default.createElement("div", {
className: _workspaceOverviewModule().default.badge
}, /*#__PURE__*/_react().default.createElement(_designUi().Tooltip, {
delay: 300,
content: envComponentId?.name
}, /*#__PURE__*/_react().default.createElement("img", {
src: env?.icon,
className: _workspaceOverviewModule().default.envIcon
}))));
}
}, new (_linkPlugin().LinkPlugin)()], [compModelsById.size, serverUrlsSignature, showPreview]);
return plugins;
}
//# sourceMappingURL=workspace-overview.js.map