Move Teleport Connect over to Vite (#37512)

.eslintignore

@@ -3,3 +3,5 @@
 
 # Ignore WASM generated files:
 web/packages/teleport/src/ironrdp/pkg
+
+web/packages/teleterm/build

package.json

@@ -10,6 +10,7 @@
     "start-teleport-e": "yarn workspace @gravitational/teleport.e start",
     "build-term": "yarn workspace @gravitational/teleterm build",
     "start-term": "yarn workspace @gravitational/teleterm start",
+    "start-term-skip-native-deps": "yarn workspace @gravitational/teleterm start-skip-native-deps",
     "package-term": "yarn workspace @gravitational/teleterm package",
     "storybook": "start-storybook -p 9002 -c web/.storybook -s web/.storybook/public",
     "storybook-smoke-test": "yarn storybook --ci --smoke-test",
@@ -18,10 +19,10 @@
     "test-update-snapshot": "yarn test -- --updateSnapshot",
     "tdd": "jest --watch",
     "lint": "yarn prettier-check && yarn eslint",
-    "eslint": "eslint --quiet '+(e|web)/**/*.{ts,tsx,js,jsx}'",
+    "eslint": "eslint --quiet '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
     "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc --noEmit",
-    "prettier-check": "yarn prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx}'",
-    "prettier-write": "yarn prettier --write --loglevel silent '+(e|web)/**/*.{ts,tsx,js,jsx}'",
+    "prettier-check": "yarn prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
+    "prettier-write": "yarn prettier --write --loglevel silent '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
     "process-icons": "node web/packages/design/src/Icon/script/script.js & yarn prettier --loglevel silent --write 'web/packages/design/src/Icon/Icons/*.tsx'",
     "nop": "exit 0"
   },

web/packages/build/vite/csp.ts

@@ -0,0 +1,39 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Plugin } from 'vite';
+
+export function cspPlugin(csp: string): Plugin {
+  return {
+    name: 'teleport-connect-html-plugin',
+    transformIndexHtml(html) {
+      return {
+        html,
+        tags: [
+          {
+            tag: 'meta',
+            attrs: {
+              'http-equiv': 'Content-Security-Policy',
+              content: csp,
+            },
+          },
+        ],
+      };
+    },
+  };
+}

web/packages/build/webpack/webpack.base.js

@@ -157,6 +157,7 @@ function createDefaultConfig() {
         design: path.join(__dirname, '/../../design/src'),
         shared: path.join(__dirname, '/../../shared'),
         'gen-proto-js': path.join(__dirname, '/../../../../gen/proto/js'),
+        'gen-proto-ts': path.join(__dirname, '/../../../../gen/proto/ts'),
       },
 
       /*

web/packages/design/src/ThemeProvider/index.tsx

@@ -24,19 +24,20 @@ import {
 
 import { KeysEnum, storageService } from 'teleport/services/storageService';
 
-import { ThemePreference } from 'teleport/services/userPreferences/types';
 import cfg from 'teleport/config';
 
+import { Theme } from 'gen-proto-ts/teleport/userpreferences/v1/theme_pb';
+
 import { darkTheme, lightTheme, bblpTheme } from '../theme';
 
 import { GlobalStyle } from './globals';
 
-function themePreferenceToTheme(themePreference: ThemePreference) {
-  return themePreference === ThemePreference.Light ? lightTheme : darkTheme;
+function themePreferenceToTheme(themePreference: Theme) {
+  return themePreference === Theme.LIGHT ? lightTheme : darkTheme;
 }
 
 const ThemeProvider = props => {
-  const [themePreference, setThemePreference] = useState<ThemePreference>(
+  const [themePreference, setThemePreference] = useState<Theme>(
     storageService.getThemePreference()
   );
 

web/packages/shared/components/UnifiedResources/FilterPanel.tsx

@@ -33,7 +33,8 @@ import {
   ArrowsOut,
 } from 'design/Icon';
 
-import { ViewMode } from 'shared/services/unifiedResourcePreferences';
+import { ViewMode } from 'gen-proto-ts/teleport/userpreferences/v1/unified_resource_preferences_pb';
+
 import { HoverTooltip } from 'shared/components/ToolTip';
 
 import { FilterKind } from './UnifiedResources';
@@ -132,7 +133,7 @@ export function FilterPanel({
         <Flex mr={1}>{BulkActions}</Flex>
         {!hideViewModeOptions && (
           <>
-            {currentViewMode === ViewMode.VIEW_MODE_LIST && (
+            {currentViewMode === ViewMode.LIST && (
               <ButtonBorder
                 size="small"
                 css={`
@@ -468,10 +469,8 @@ function ViewModeSwitch({
   return (
     <ViewModeSwitchContainer>
       <ViewModeSwitchButton
-        className={
-          currentViewMode === ViewMode.VIEW_MODE_CARD ? 'selected' : ''
-        }
-        onClick={() => setCurrentViewMode(ViewMode.VIEW_MODE_CARD)}
+        className={currentViewMode === ViewMode.CARD ? 'selected' : ''}
+        onClick={() => setCurrentViewMode(ViewMode.CARD)}
         css={`
           border-right: 1px solid
             ${props => props.theme.colors.spotBackground[2]};
@@ -482,10 +481,8 @@ function ViewModeSwitch({
         <SquaresFour size="small" color="text.main" />
       </ViewModeSwitchButton>
       <ViewModeSwitchButton
-        className={
-          currentViewMode === ViewMode.VIEW_MODE_LIST ? 'selected' : ''
-        }
-        onClick={() => setCurrentViewMode(ViewMode.VIEW_MODE_LIST)}
+        className={currentViewMode === ViewMode.LIST ? 'selected' : ''}
+        onClick={() => setCurrentViewMode(ViewMode.LIST)}
         css={`
           border-top-right-radius: 4px;
           border-bottom-right-radius: 4px;

web/packages/shared/components/UnifiedResources/UnifiedResources.story.tsx

@@ -30,11 +30,11 @@ import { UrlResourcesParams } from 'teleport/config';
 import { ResourcesResponse } from 'teleport/services/agents';
 
 import {
-  UnifiedResourcePreferences,
   DefaultTab,
-  ViewMode,
   LabelsViewMode,
-} from 'shared/services/unifiedResourcePreferences';
+  UnifiedResourcePreferences,
+  ViewMode,
+} from 'gen-proto-ts/teleport/userpreferences/v1/unified_resource_preferences_pb';
 
 import { makeErrorAttempt, makeProcessingAttempt } from 'shared/hooks/useAsync';
 
@@ -97,9 +97,9 @@ const story = ({
   };
   return () => {
     const [userPrefs, setUserPrefs] = useState<UnifiedResourcePreferences>({
-      defaultTab: DefaultTab.DEFAULT_TAB_ALL,
-      viewMode: ViewMode.VIEW_MODE_CARD,
-      labelsViewMode: LabelsViewMode.LABELS_VIEW_MODE_COLLAPSED,
+      defaultTab: DefaultTab.ALL,
+      viewMode: ViewMode.CARD,
+      labelsViewMode: LabelsViewMode.COLLAPSED,
     });
     const { fetch, attempt, resources } = useUnifiedResourcesFetch({
       fetchFunc,

web/packages/shared/components/UnifiedResources/UnifiedResources.tsx

@@ -43,10 +43,11 @@ import { ResourcesResponse } from 'teleport/services/agents';
 
 import {
   DefaultTab,
-  ViewMode,
-  UnifiedResourcePreferences,
   LabelsViewMode,
-} from 'shared/services/unifiedResourcePreferences';
+  UnifiedResourcePreferences,
+  ViewMode,
+} from 'gen-proto-ts/teleport/userpreferences/v1/unified_resource_preferences_pb';
+
 import { HoverTooltip } from 'shared/components/ToolTip';
 import {
   makeEmptyAttempt,
@@ -90,11 +91,11 @@ export const PINNING_NOT_SUPPORTED_MESSAGE =
 const tabs: { label: string; value: DefaultTab }[] = [
   {
     label: 'All Resources',
-    value: DefaultTab.DEFAULT_TAB_ALL,
+    value: DefaultTab.ALL,
   },
   {
     label: 'Pinned Resources',
-    value: DefaultTab.DEFAULT_TAB_PINNED,
+    value: DefaultTab.PINNED,
   },
 ];
 
@@ -304,7 +305,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
   };
 
   const selectTab = (value: DefaultTab) => {
-    const pinnedOnly = value === DefaultTab.DEFAULT_TAB_PINNED;
+    const pinnedOnly = value === DefaultTab.PINNED;
     setParams({
       ...params,
       pinnedOnly,
@@ -366,8 +367,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
   };
 
   const expandAllLabels =
-    unifiedResourcePreferences.labelsViewMode ===
-    LabelsViewMode.LABELS_VIEW_MODE_EXPANDED;
+    unifiedResourcePreferences.labelsViewMode === LabelsViewMode.EXPANDED;
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(entries => {
@@ -386,8 +386,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
   }, []);
 
   const ViewComponent =
-    unifiedResourcePreferences.viewMode === ViewMode.VIEW_MODE_CARD ||
-    forceCardView
+    unifiedResourcePreferences.viewMode === ViewMode.CARD || forceCardView
       ? CardsView
       : ListView;
 
@@ -448,9 +447,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
         ClusterDropdown={ClusterDropdown}
         setExpandAllLabels={expandAllLabels => {
           setLabelsViewMode(
-            expandAllLabels
-              ? LabelsViewMode.LABELS_VIEW_MODE_EXPANDED
-              : LabelsViewMode.LABELS_VIEW_MODE_COLLAPSED
+            expandAllLabels ? LabelsViewMode.EXPANDED : LabelsViewMode.COLLAPSED
           );
         }}
         hideViewModeOptions={forceCardView}
@@ -498,14 +495,14 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
               key={tab.value}
               onClick={() => selectTab(tab.value)}
               disabled={
-                tab.value === DefaultTab.DEFAULT_TAB_PINNED &&
+                tab.value === DefaultTab.PINNED &&
                 pinning.kind === 'not-supported'
               }
               title={tab.label}
               isSelected={
                 params.pinnedOnly
-                  ? tab.value === DefaultTab.DEFAULT_TAB_PINNED
-                  : tab.value === DefaultTab.DEFAULT_TAB_ALL
+                  ? tab.value === DefaultTab.PINNED
+                  : tab.value === DefaultTab.ALL
               }
             />
           ))}