wip

packages/webapp/src/containers/Dashboard/WorkspacesSidebar/WorkspacesSidebar.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import React from 'react';
+import { Tooltip, Position, Spinner } from '@blueprintjs/core';
+import { useWorkspaces } from '@/hooks/query';
+import { useAuthOrganizationId } from '@/hooks/state';
+import { useSwitchOrganization } from '@/hooks/useSwitchOrganization';
+import { firstLettersArgs } from '@/utils';
+import classNames from 'classnames';
+
+import '@/style/containers/Dashboard/WorkspacesSidebar.scss';
+
+/**
+ * Single workspace icon button.
+ */
+function WorkspaceIcon({ workspace, isActive, onClick }) {
+  const name = workspace.metadata?.name || workspace.organizationId;
+  const initials = firstLettersArgs(...(name || '').split(' '));
+  const isDisabled = !workspace.isReady || workspace.isBuildRunning;
+
+  return (
+    <Tooltip
+      content={name}
+      position={Position.RIGHT}
+      minimal
+      className="workspaces-sidebar__item-tooltip"
+    >
+      <button
+        className={classNames('workspaces-sidebar__item', {
+          'is-active': isActive,
+          'is-disabled': isDisabled,
+        })}
+        onClick={() => !isDisabled && onClick(workspace.organizationId)}
+        disabled={isDisabled}
+      >
+        {workspace.isBuildRunning ? (
+          <Spinner size={16} />
+        ) : (
+          <span className="workspaces-sidebar__item-initials">{initials}</span>
+        )}
+      </button>
+    </Tooltip>
+  );
+}
+
+/**
+ * Workspaces sidebar container.
+ */
+export function WorkspacesSidebar() {
+  const { data: workspaces, isLoading } = useWorkspaces();
+  const activeOrganizationId = useAuthOrganizationId();
+  const switchOrganization = useSwitchOrganization();
+
+  return (
+    <div className="workspaces-sidebar">
+      <div className="workspaces-sidebar__list">
+        {isLoading ? (
+          <div className="workspaces-sidebar__loading">
+            <Spinner size={20} />
+          </div>
+        ) : (
+          workspaces?.map((workspace) => (
+            <WorkspaceIcon
+              key={workspace.organizationId}
+              workspace={workspace}
+              isActive={workspace.organizationId === activeOrganizationId}
+              onClick={switchOrganization}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}