chore(sidebar): remove old sidebar code COMPASS-6091 (#3478)

* remove old sidebar code

* remove unused deps

Author: lerouxb

package-lock.json

@@ -18,30 +18,10 @@ import type { ConnectionInfo } from 'mongodb-data-service';
 import Connection from './connection';
 import ConnectionsTitle from './connections-title';
 
-const legacyNewConnectionButtonContainerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  background: uiColors.gray.dark2,
-  position: 'relative',
-});
-
 const newConnectionButtonContainerStyles = css({
   padding: spacing[3],
 });
 
-const legacyNewConnectionButtonStyles = css({
-  border: 'none',
-  fontWeight: 'bold',
-  borderRadius: 0,
-  svg: {
-    color: uiColors.white,
-  },
-  ':hover': {
-    border: 'none',
-    boxShadow: 'none',
-  },
-});
-
 const newConnectionButtonStyles = css({
   width: '100%',
   justifyContent: 'center',
@@ -166,32 +146,21 @@ function ConnectionList({
 
   const { theme } = useTheme();
 
-  const useNewSidebar = process?.env?.COMPASS_SHOW_NEW_SIDEBAR !== 'false';
-
   const isExpanded = true; // TODO: https://jira.mongodb.org/browse/COMPASS-5967
 
   return (
     <Fragment>
-      {useNewSidebar && <ConnectionsTitle isExpanded={isExpanded} />}
-      <div
-        className={
-          useNewSidebar
-            ? newConnectionButtonContainerStyles
-            : legacyNewConnectionButtonContainerStyles
-        }
-      >
+      <ConnectionsTitle isExpanded={isExpanded} />
+      <div className={newConnectionButtonContainerStyles}>
         <Button
           className={cx(
-            useNewSidebar
-              ? newConnectionButtonStyles
-              : legacyNewConnectionButtonStyles,
-            useNewSidebar &&
-              (theme === Theme.Dark
-                ? newConnectionButtonStylesDark
-                : newConnectionButtonStylesLight)
+            newConnectionButtonStyles,
+            theme === Theme.Dark
+              ? newConnectionButtonStylesDark
+              : newConnectionButtonStylesLight
           )}
           onClick={createNewConnection}
-          size={useNewSidebar ? 'default' : 'large'}
+          size="default"
           data-testid="new-connection-button"
           rightGlyph={<Icon glyph="Plus" />}
         >

packages/compass-connections/src/components/connection-list/connection-list.tsx

@@ -1,15 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   ResizableSidebar,
-  useTheme,
-  Theme,
-  ThemeProvider,
   ErrorBoundary,
   WorkspaceContainer,
   spacing,
   css,
 } from '@mongodb-js/compass-components';
-import type { ThemeState } from '@mongodb-js/compass-components';
 import ConnectionForm from '@mongodb-js/connection-form';
 import type {
   ConnectionInfo,
@@ -87,51 +83,30 @@ function Connections({
     isConnected,
   } = state;
 
-  const existingTheme = useTheme();
-
-  // Use the same theme as Home if the feature flag is activated, otherwise
-  // always use Dark. We'll remove this code along with the provider once we
-  // remove the feature flag, hopefully soon.
-  const useNewSidebar = process?.env?.COMPASS_SHOW_NEW_SIDEBAR !== 'false';
-  const expectedTheme = useNewSidebar ? existingTheme.theme : Theme.Dark;
-
-  const [theme, setTheme] = useState<ThemeState>({
-    theme: expectedTheme,
-    enabled: true,
-  });
-
-  // If the inherited theme (from Home) changes because the user changed the
-  // theme via the menu, we have to update it here too.
-  if (theme.theme !== expectedTheme) {
-    setTheme({ theme: expectedTheme, enabled: true });
-  }
-
   return (
     <div
       data-testid={
         isConnected ? 'connections-connected' : 'connections-disconnected'
       }
       className={connectStyles}
     >
-      <ThemeProvider theme={theme}>
-        <ResizableSidebar>
-          <ConnectionList
-            activeConnectionId={activeConnectionId}
-            favoriteConnections={favoriteConnections}
-            recentConnections={recentConnections}
-            createNewConnection={createNewConnection}
-            setActiveConnectionId={setActiveConnectionById}
-            onDoubleClick={(connectionInfo) => {
-              void connect(connectionInfo);
-            }}
-            removeAllRecentsConnections={() => {
-              void removeAllRecentsConnections();
-            }}
-            removeConnection={removeConnection}
-            duplicateConnection={duplicateConnection}
-          />
-        </ResizableSidebar>
-      </ThemeProvider>
+      <ResizableSidebar>
+        <ConnectionList
+          activeConnectionId={activeConnectionId}
+          favoriteConnections={favoriteConnections}
+          recentConnections={recentConnections}
+          createNewConnection={createNewConnection}
+          setActiveConnectionId={setActiveConnectionById}
+          onDoubleClick={(connectionInfo) => {
+            void connect(connectionInfo);
+          }}
+          removeAllRecentsConnections={() => {
+            void removeAllRecentsConnections();
+          }}
+          removeConnection={removeConnection}
+          duplicateConnection={duplicateConnection}
+        />
+      </ResizableSidebar>
       <WorkspaceContainer>
         <div className={formContainerStyles}>
           <ErrorBoundary

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

@@ -66,21 +66,10 @@ const ExpandButton: React.FunctionComponent<{
 const databaseItem = css({
   height: DATABASE_ROW_HEIGHT,
   paddingRight: spacing[1],
-});
-
-const databaseItemOldSpacing = css({
-  paddingLeft: spacing[1],
-});
-
-const databaseItemNewSpacing = css({
   paddingLeft: spacing[2],
 });
 
-const databaseItemLabelOldSpacing = css({
-  marginLeft: spacing[1],
-});
-
-const databaseItemLabelNewSpacing = css({
+const databaseItemLabel = css({
   marginLeft: spacing[2],
 });
 
@@ -150,8 +139,6 @@ export const DatabaseItem: React.FunctionComponent<
     ];
   }, []);
 
-  const useNewSidebar = process?.env?.COMPASS_SHOW_NEW_SIDEBAR !== 'false';
-
   return (
     <ItemContainer
       id={id}
@@ -163,26 +150,16 @@ export const DatabaseItem: React.FunctionComponent<
       isActive={isActive}
       isTabbable={isTabbable}
       onDefaultAction={onDefaultAction}
-      className={cx(
-        databaseItem,
-        useNewSidebar ? databaseItemNewSpacing : databaseItemOldSpacing
-      )}
+      className={databaseItem}
       style={style}
       {...hoverProps}
     >
       <ExpandButton
         onClick={onExpandButtonClick}
         isExpanded={isExpanded}
       ></ExpandButton>
-      {useNewSidebar && <Icon glyph="Database" size="small"></Icon>}
-      <ItemLabel
-        className={
-          useNewSidebar
-            ? databaseItemLabelNewSpacing
-            : databaseItemLabelOldSpacing
-        }
-        title={name}
-      >
+      <Icon glyph="Database" size="small"></Icon>
+      <ItemLabel className={databaseItemLabel} title={name}>
         {name}
       </ItemLabel>
       {!isReadOnly && (

packages/compass-databases-navigation/src/database-item.tsx

@@ -12,34 +12,20 @@ const placeholderItem = css({
 });
 
 const padding = {
-  old: {
-    database: css({
-      // Because we are aligning this with non-leafygreen items on the screen we
-      // have to use custom sizes
-      paddingLeft: spacing[1] + spacing[2],
-    }),
-    collection: css({
-      paddingLeft: spacing[5],
-    }),
-  },
-  new: {
-    database: css({
-      paddingLeft: spacing[4] + spacing[2],
-    }),
-    collection: css({
-      paddingLeft: spacing[4] + spacing[4] + spacing[1],
-    }),
-  },
+  database: css({
+    paddingLeft: spacing[4] + spacing[2],
+  }),
+  collection: css({
+    paddingLeft: spacing[4] + spacing[4] + spacing[1],
+  }),
 } as const;
 
 export const PlaceholderItem: React.FunctionComponent<{
   type?: 'database' | 'collection';
   style?: CSSProperties;
 }> = ({ type = 'collection', style }) => {
-  const useNewSidebar = process?.env?.COMPASS_SHOW_NEW_SIDEBAR !== 'false';
-  const variant = useNewSidebar ? 'new' : 'old';
   return (
-    <div className={cx(placeholderItem, padding[variant][type])} style={style}>
+    <div className={cx(placeholderItem, padding[type])} style={style}>
       <Placeholder />
     </div>
   );

packages/compass-databases-navigation/src/placeholder-item.tsx

@@ -88,10 +88,8 @@
     "@types/react-dom": "^17.0.10",
     "@types/sinon-chai": "^3.2.5",
     "chai": "^4.3.6",
-    "classnames": "^2.2.6",
     "debug": "^4.2.0",
     "depcheck": "^1.4.1",
-    "enzyme": "^3.11.0",
     "eslint": "^7.25.0",
     "hadron-app": "^5.0.0",
     "hadron-app-registry": "^9.0.0",
@@ -103,7 +101,6 @@
     "prettier": "^2.7.1",
     "prop-types": "^15.7.2",
     "react-dom": "^16.14.0",
-    "react-fontawesome": "^1.6.1",
     "react-redux": "^5.0.6",
     "redux": "^4.1.2",
     "redux-thunk": "^2.3.0",