update workspace tabs

Author: mabaasit

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -206,6 +206,7 @@ function Tab({
   tabContentId,
   iconGlyph,
   tabTheme,
+  className: tabClassName,
   ...props
 }: TabProps & React.HTMLProps<HTMLDivElement>) {
   const darkMode = useDarkMode();
@@ -250,7 +251,8 @@ function Tab({
             themeClass,
             isSelected && selectedTabStyles,
             isSelected && tabTheme && selectedThemedTabStyles,
-            isDragging && draggingTabStyles
+            isDragging && draggingTabStyles,
+            tabClassName
           )}
           aria-selected={isSelected}
           role="tab"

packages/compass-workspaces/src/components/workspaces.tsx

@@ -5,12 +5,14 @@ import {
   MongoDBLogoMark,
   WorkspaceTabs,
   css,
+  palette,
   rafraf,
   spacing,
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import type {
   CollectionTabInfo,
+  DatabaseTabInfo,
   OpenWorkspaceOptions,
   WorkspaceTab,
   WorkspacesState,
@@ -125,6 +127,7 @@ type CompassWorkspacesProps = {
   tabs: WorkspaceTab[];
   activeTab?: WorkspaceTab | null;
   collectionInfo: Record<string, CollectionTabInfo>;
+  databaseInfo: Record<string, DatabaseTabInfo>;
   openOnEmptyWorkspace?: OpenWorkspaceOptions | null;
 
   onSelectTab(at: number): void;
@@ -139,10 +142,15 @@ type CompassWorkspacesProps = {
   ): void;
 };
 
+const notProvisionedStyles = css({
+  color: palette.gray.base,
+});
+
 const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
   tabs,
   activeTab,
   collectionInfo,
+  databaseInfo,
   openOnEmptyWorkspace,
   onSelectTab,
   onSelectNextTab,
@@ -223,6 +231,8 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
           const connectionName =
             getConnectionById(tab.connectionId)?.title || '';
           const database = tab.namespace;
+          const namespaceId = `${tab.connectionId}.${database}`;
+          const { ns_source } = databaseInfo[namespaceId] ?? {};
           return {
             id: tab.id,
             connectionName,
@@ -232,15 +242,20 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
               ['Connection', connectionName || ''],
               ['Database', database],
             ] as Tooltip,
-            iconGlyph: 'Database',
+            iconGlyph:
+              ns_source !== 'provisioned' ? 'EmptyDatabase' : 'Database',
             'data-namespace': tab.namespace,
             tabTheme: getThemeOf(tab.connectionId),
+            ...(ns_source !== 'provisioned' && {
+              className: notProvisionedStyles,
+            }),
           } as const;
         }
         case 'Collection': {
           const { database, collection, ns } = toNS(tab.namespace);
-          const info = collectionInfo[ns] ?? {};
-          const { isTimeSeries, isReadonly, sourceName } = info;
+          const namespaceId = `${tab.connectionId}.${ns}`;
+          const info = collectionInfo[namespaceId] ?? {};
+          const { isTimeSeries, isReadonly, sourceName, ns_source } = info;
           const connectionName =
             getConnectionById(tab.connectionId)?.title || '';
           const collectionType = isTimeSeries
@@ -273,14 +288,19 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
                 ? 'Visibility'
                 : collectionType === 'timeseries'
                 ? 'TimeSeries'
+                : ns_source !== 'provisioned'
+                ? 'EmptyFolder'
                 : 'Folder',
             'data-namespace': ns,
             tabTheme: getThemeOf(tab.connectionId),
+            ...(ns_source !== 'provisioned' && {
+              className: notProvisionedStyles,
+            }),
           } as const;
         }
       }
     });
-  }, [tabs, collectionInfo, getThemeOf, getConnectionById]);
+  }, [tabs, collectionInfo, databaseInfo, getThemeOf, getConnectionById]);
 
   const activeTabIndex = tabs.findIndex((tab) => tab === activeTab);
 
@@ -410,6 +430,7 @@ export default connect(
       tabs: state.tabs,
       activeTab: activeTab,
       collectionInfo: state.collectionInfo,
+      databaseInfo: state.databaseInfo,
     };
   },
   {

packages/compass-workspaces/src/index.ts

@@ -60,6 +60,7 @@ export function configureStore(
       tabs: initialTabs,
       activeTabId: initialTabs[initialTabs.length - 1]?.id ?? null,
       collectionInfo: {},
+      databaseInfo: {},
     },
     applyMiddleware(thunk.withExtraArgument(services))
   );

packages/compass-workspaces/src/stores/workspaces.ts

@@ -71,6 +71,7 @@ export enum WorkspacesActions {
   DatabaseRemoved = 'compass-workspaces/DatabaseRemoved',
   ConnectionDisconnected = 'compass-workspaces/ConnectionDisconnected',
   FetchCollectionTabInfo = 'compass-workspaces/FetchCollectionTabInfo',
+  FetchDatabaseTabInfo = 'compass-workspaces/FetchDatabaseTabInfo',
   CollectionSubtabSelected = 'compass-workspaces/CollectionSubtabSelected',
 }
 
@@ -100,6 +101,11 @@ export type CollectionTabInfo = {
   isTimeSeries: boolean;
   isReadonly: boolean;
   sourceName?: string | null;
+  ns_source: 'provisioned' | 'privileges';
+};
+
+export type DatabaseTabInfo = {
+  ns_source: 'provisioned' | 'privileges' | 'roles';
 };
 
 export type WorkspacesState = {
@@ -116,6 +122,11 @@ export type WorkspacesState = {
    * icon)
    */
   collectionInfo: Record<string, CollectionTabInfo>;
+  /**
+   * Extra info for the collections tab namespace (where we show collections
+   * of a database)
+   */
+  databaseInfo: Record<string, DatabaseTabInfo>;
 };
 
 const getTabId = () => {
@@ -236,6 +247,7 @@ const getInitialState = () => {
     tabs: [] as WorkspaceTab[],
     activeTabId: null,
     collectionInfo: {},
+    databaseInfo: {},
   };
 };
 
@@ -568,7 +580,22 @@ const reducer: Reducer<WorkspacesState, Action> = (
       ...state,
       collectionInfo: {
         ...state.collectionInfo,
-        [action.namespace]: action.info,
+        [action.namespaceId]: action.info,
+      },
+    };
+  }
+
+  if (
+    isAction<FetchDatabaseInfoAction>(
+      action,
+      WorkspacesActions.FetchDatabaseTabInfo
+    )
+  ) {
+    return {
+      ...state,
+      databaseInfo: {
+        ...state.databaseInfo,
+        [action.namespaceId]: action.info,
       },
     };
   }
@@ -639,10 +666,18 @@ type OpenWorkspaceAction = {
 
 type FetchCollectionInfoAction = {
   type: WorkspacesActions.FetchCollectionTabInfo;
-  namespace: string;
+  // This uniquely identifies the collection tab for a given connection
+  namespaceId: string;
   info: CollectionTabInfo;
 };
 
+type FetchDatabaseInfoAction = {
+  type: WorkspacesActions.FetchDatabaseTabInfo;
+  // This uniquely identifies the database tab for a given connection
+  namespaceId: string;
+  info: DatabaseTabInfo;
+};
+
 export type TabOptions = {
   /**
    * Optional. If set to `true`, always opens workspace in a new tab, otherwise
@@ -660,7 +695,8 @@ const fetchCollectionInfo = (
     getState,
     { connections, instancesManager, logger }
   ) => {
-    if (getState().collectionInfo[workspaceOptions.namespace]) {
+    const namespaceId = `${workspaceOptions.connectionId}.${workspaceOptions.namespace}`;
+    if (getState().collectionInfo[namespaceId]) {
       return;
     }
 
@@ -685,11 +721,58 @@ const fetchCollectionInfo = (
         await coll.fetch({ dataService });
         dispatch({
           type: WorkspacesActions.FetchCollectionTabInfo,
-          namespace: workspaceOptions.namespace,
+          namespaceId,
           info: {
             isTimeSeries: coll.isTimeSeries,
             isReadonly: coll.readonly ?? coll.isView,
             sourceName: coll.sourceName,
+            ns_source: coll.ns_source,
+          },
+        });
+      }
+    } catch (err) {
+      logger.debug(
+        'Collection Metadata',
+        logger.mongoLogId(1_001_000_306),
+        'Error fetching collection metadata for tab',
+        { namespace: workspaceOptions.namespace },
+        err
+      );
+    }
+  };
+};
+
+const fetchDatabaseInfo = (
+  workspaceOptions: Extract<OpenWorkspaceOptions, { type: 'Collections' }>
+): WorkspacesThunkAction<Promise<void>, FetchDatabaseInfoAction> => {
+  return async (
+    dispatch,
+    getState,
+    { connections, instancesManager, logger }
+  ) => {
+    const { databaseInfo } = getState();
+    const namespaceId = `${workspaceOptions.connectionId}.${workspaceOptions.namespace}`;
+    if (databaseInfo[namespaceId]) {
+      return;
+    }
+
+    try {
+      const dataService = connections.getDataServiceForConnection(
+        workspaceOptions.connectionId
+      );
+
+      const instance = instancesManager.getMongoDBInstanceForConnection(
+        workspaceOptions.connectionId
+      );
+
+      const db = instance.databases.get(workspaceOptions.namespace);
+      if (db) {
+        await db.fetch({ dataService });
+        dispatch({
+          type: WorkspacesActions.FetchDatabaseTabInfo,
+          namespaceId,
+          info: {
+            ns_source: db.ns_source,
           },
         });
       }
@@ -717,6 +800,11 @@ export const openWorkspace = (
       void dispatch(fetchCollectionInfo(workspaceOptions));
     }
 
+    if (workspaceOptions.type === 'Collections') {
+      // Fetching extra metadata for database should not block tab opening
+      void dispatch(fetchDatabaseInfo(workspaceOptions));
+    }
+
     dispatch({
       type: WorkspacesActions.OpenWorkspace,
       workspace: workspaceOptions,