Connect: Show resource search errors in the search bar

web/packages/shared/utils/getDurationText.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { pluralize } from 'teleport/lib/util';
+import { pluralize } from './text';
 
 export function getDurationText(hrs: number, mins: number, secs: number) {
   if (!hrs && !mins) {

web/packages/shared/utils/text.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2023 Gravitational, Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If you ever need to pluralize a word which cannot be pluralized by appending 's', just add a
+// third optional argument which is the pluralized noun.
+// https://api.rubyonrails.org/v7.0.4.2/classes/ActionView/Helpers/TextHelper.html#method-i-pluralize
+
+/**
+ * pluralize adds an 's' to the given word if num is bigger than 1.
+ */
+export function pluralize(num: number, word: string) {
+  if (num > 1) {
+    return `${word}s`;
+  }
+
+  return word;
+}

web/packages/teleport/src/lib/util.ts

@@ -16,6 +16,15 @@ limitations under the License.
 
 import { AuthType } from 'teleport/services/user';
 
+// TODO(ravicious): Refactor teleport.e and teleterm.e to import pluralize from shared/utils/text
+// and remove this temporary reexport.
+export {
+  /**
+   * @deprecated Import pluralize from `shared/utils/text` instead.
+   */
+  pluralize,
+} from 'shared/utils/text';
+
 export const openNewTab = (url: string) => {
   const element = document.createElement('a');
   element.setAttribute('href', `${url}`);
@@ -27,14 +36,6 @@ export const openNewTab = (url: string) => {
   document.body.removeChild(element);
 };
 
-export function pluralize(num: number, word: string) {
-  if (num > 1) {
-    return `${word}s`;
-  }
-
-  return word;
-}
-
 // Adapted from https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
 export async function Sha256Digest(
   message: string,

web/packages/teleterm/src/ui/Search/searchResultTestHelpers.ts → web/packages/teleterm/src/services/tshd/testHelpers.ts

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import { ResourceSearchResult } from './searchResult';
+import type * as tsh from './types';
 
-import type * as tsh from 'teleterm/services/tshd/types';
-
-export const makeServer = (props: Partial<tsh.Server>): tsh.Server => ({
+export const makeServer = (props: Partial<tsh.Server> = {}): tsh.Server => ({
   uri: '/clusters/teleport-local/servers/178ef081-259b-4aa5-a018-449b5ea7e694',
   tunnel: false,
   name: '178ef081-259b-4aa5-a018-449b5ea7e694',
@@ -28,7 +26,9 @@ export const makeServer = (props: Partial<tsh.Server>): tsh.Server => ({
   ...props,
 });
 
-export const makeDatabase = (props: Partial<tsh.Database>): tsh.Database => ({
+export const makeDatabase = (
+  props: Partial<tsh.Database> = {}
+): tsh.Database => ({
   uri: '/clusters/teleport-local/dbs/foo',
   name: 'foo',
   protocol: 'postgres',
@@ -40,7 +40,7 @@ export const makeDatabase = (props: Partial<tsh.Database>): tsh.Database => ({
   ...props,
 });
 
-export const makeKube = (props: Partial<tsh.Kube>): tsh.Kube => ({
+export const makeKube = (props: Partial<tsh.Kube> = {}): tsh.Kube => ({
   name: 'foo',
   labelsList: [],
   uri: '/clusters/bar/kubes/foo',
@@ -49,15 +49,3 @@ export const makeKube = (props: Partial<tsh.Kube>): tsh.Kube => ({
 
 export const makeLabelsList = (labels: Record<string, string>): tsh.Label[] =>
   Object.entries(labels).map(([name, value]) => ({ name, value }));
-
-export const makeResourceResult = (
-  props: Partial<ResourceSearchResult> & {
-    kind: ResourceSearchResult['kind'];
-    resource: ResourceSearchResult['resource'];
-  }
-): ResourceSearchResult => ({
-  score: 0,
-  labelMatches: [],
-  resourceMatches: [],
-  ...props,
-});

web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx

@@ -23,6 +23,8 @@ import { DocumentsReopen } from 'teleterm/ui/DocumentsReopen';
 import { Dialog } from 'teleterm/ui/services/modals';
 
 import ClusterLogout from '../ClusterLogout/ClusterLogout';
+import { ResourceSearchErrors } from '../Search/ResourceSearchErrors';
+import { assertUnreachable } from '../utils';
 
 import { UsageData } from './modals/UsageData';
 import { UserJobRole } from './modals/UserJobRole';
@@ -117,8 +119,25 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
       );
     }
 
-    default: {
+    case 'resource-search-errors': {
+      return (
+        <ResourceSearchErrors
+          errors={dialog.errors}
+          getClusterName={dialog.getClusterName}
+          onCancel={() => {
+            handleClose();
+            dialog.onCancel();
+          }}
+        />
+      );
+    }
+
+    case 'none': {
       return null;
     }
+
+    default: {
+      return assertUnreachable(dialog);
+    }
   }
 }

web/packages/teleterm/src/ui/Search/ResourceSearchErrors.story.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright 2023 Gravitational, Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { routing } from 'teleterm/ui/uri';
+import { ResourceSearchError } from 'teleterm/ui/services/resources';
+
+import { ResourceSearchErrors } from './ResourceSearchErrors';
+
+export default {
+  title: 'Teleterm/ModalsHost/ResourceSearchErrors',
+};
+
+export const Story = () => (
+  <ResourceSearchErrors
+    getClusterName={routing.parseClusterName}
+    onCancel={() => {}}
+    errors={[
+      new ResourceSearchError(
+        '/clusters/foo',
+        'server',
+        new Error(
+          '14 UNAVAILABLE: connection error: desc = "transport: authentication handshake failed: EOF"'
+        )
+      ),
+      new ResourceSearchError(
+        '/clusters/bar',
+        'database',
+        new Error(
+          '2 UNKNOWN: Unable to connect to ssh proxy at teleport.local:443. Confirm connectivity and availability.\n	dial tcp: lookup teleport.local: no such host'
+        )
+      ),
+      new ResourceSearchError(
+        '/clusters/baz',
+        'kube',
+        new Error(
+          '14 UNAVAILABLE: connection error: desc = "transport: authentication handshake failed: EOF"'
+        )
+      ),
+      new ResourceSearchError(
+        '/clusters/foo',
+        'server',
+        new Error(
+          '2 UNKNOWN: Unable to connect to ssh proxy at teleport.local:443. Confirm connectivity and availability.\n	dial tcp: lookup teleport.local: no such host'
+        )
+      ),
+      new ResourceSearchError(
+        '/clusters/baz',
+        'kube',
+        new Error(
+          '14 UNAVAILABLE: connection error: desc = "transport: authentication handshake failed: EOF"'
+        )
+      ),
+      new ResourceSearchError(
+        '/clusters/foo',
+        'server',
+        new Error(
+          '2 UNKNOWN: Unable to connect to ssh proxy at teleport.local:443. Confirm connectivity and availability.\n	dial tcp: lookup teleport.local: no such host'
+        )
+      ),
+    ]}
+  />
+);

web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright 2023 Gravitational, Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import DialogConfirmation, {
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+} from 'design/DialogConfirmation';
+import { ButtonIcon, ButtonSecondary, Text } from 'design';
+import { Close } from 'design/Icon';
+
+import { ResourceSearchError } from 'teleterm/ui/services/resources';
+
+import type * as uri from 'teleterm/ui/uri';
+
+export function ResourceSearchErrors(props: {
+  errors: ResourceSearchError[];
+  getClusterName: (resourceUri: uri.ClusterOrResourceUri) => string;
+  onCancel: () => void;
+}) {
+  const formattedErrorText = props.errors
+    .map(error => error.messageAndCauseWithClusterName(props.getClusterName))
+    .join('\n\n');
+
+  return (
+    <DialogConfirmation
+      open={true}
+      onClose={props.onCancel}
+      dialogCss={() => ({
+        maxWidth: '800px',
+        width: '100%',
+      })}
+    >
+      <DialogHeader justifyContent="space-between" mb={0} alignItems="baseline">
+        <Text typography="h4" bold>
+          Resource search errors
+        </Text>
+        <ButtonIcon
+          type="button"
+          onClick={props.onCancel}
+          color="text.secondary"
+        >
+          <Close fontSize={5} />
+        </ButtonIcon>
+      </DialogHeader>
+      <DialogContent mb={4}>
+        <Text typography="body1" color="text.secondary">
+          <pre
+            css={`
+              padding: ${props => props.theme.space[2]}px;
+              background-color: ${props => props.theme.colors.levels.sunken};
+              color: ${props => props.theme.colors.text.primary};
+
+              white-space: pre-wrap;
+              max-height: calc(${props => props.theme.space[6]}px * 10);
+              overflow-y: auto;
+            `}
+          >
+            {formattedErrorText}
+          </pre>
+        </Text>
+      </DialogContent>
+      <DialogFooter>
+        <ButtonSecondary type="button" onClick={props.onCancel}>
+          Close
+        </ButtonSecondary>
+      </DialogFooter>
+    </DialogConfirmation>
+  );
+}