-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This commit adds an MVP of the search bar to Connect. Currently it's behind a feature flag (`feature.searchBar`) but we'll enable it by default before the release. The plan was to merge the code ASAP, potentially even straight to v12 when we have the chance, which didn't exactly pan out but there's no harm to having this feature flag for now. On top of that, this commit adds a new shortcut to open the search bar (this replaces the current shortcut to open the command bar) and a shortcut to open a new terminal tab. The search works by essentially making a `ListResources` request for each supported resource type to every cluster the user is logged in to. We repurposed the old command palette UI for that but rewritten it to use React context and hooks rather than a class and a store. This allowed us to be a little bit more flexible as the old approach required every picker to conform to the same interface, both in terms of UI and code. This implementation has two main pickers so far: * `ActionPicker` which is the main one. It searches for resources but at the moment it also supports applying filters. In the future, we plan to add more actions to it such as "Open a new tab" or "Install tsh". * `ParameterPicker` is activated when you pick an action from the `ActionPicker` that requires an additional parameter. Think choosing an SSH server or a db – you need to provide an SSH login or a db user for those item. In those situations, `ActionPicker` will switch to `ParameterPicker` and let you pick a relevant item from the list. Everything is contained within `web/packages/teleterm/src/ui/Search`. Arguably, `useSearch` could be refactored a little bit to maybe make its structure a little more clear as it handles both the resource search and the filter search. However, at the moment we're not totally sure how the search bar will evolve, so we want to leave any bigger refactors for later. We added a couple of basic tests for regressions that happened so far. We also have stories for the items from the action picker. Error handling will be added in an upcoming PR. Docs updates will be done in a separate PR as well. Co-authored-by: Rafał Cieślak <rafal.cieslak@goteleport.com>
- Loading branch information
Showing
50 changed files
with
3,036 additions
and
294 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
web/packages/shared/components/Highlight/Highlight.story.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| /** | ||
| * 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 styled from 'styled-components'; | ||
| import { Flex, Text } from 'design'; | ||
|
|
||
| import { Highlight } from './Highlight'; | ||
|
|
||
| export default { | ||
| title: 'Shared/Highlight', | ||
| }; | ||
|
|
||
| export const Story = () => { | ||
| const keywords = [ | ||
| 'Aliquam', | ||
| 'olor', | ||
| // Overlapping matches: 'lor' and 'rem' both match 'lorem', so the whole word should get | ||
| // highlighted. | ||
| 'lor', | ||
| 'rem', | ||
| // https://www.contentful.com/blog/unicode-javascript-and-the-emoji-family/ | ||
| // Unfortunately, the library we use for highlighting seems to match only the first emoji of | ||
| // such group, e.g. searching for the emoji of a son won't match a group in which the son is | ||
| // present. | ||
| '👩', | ||
| '👨👨👦👦', | ||
| '🥑', | ||
| ]; | ||
| return ( | ||
| <Flex | ||
| flexDirection="column" | ||
| gap={6} | ||
| css={` | ||
| max-width: 60ch; | ||
| `} | ||
| > | ||
| <Flex flexDirection="column" gap={2}> | ||
| <Text> | ||
| Highlighting <code>{keywords.join(', ')}</code> in the below text: | ||
| </Text> | ||
| <Text> | ||
| <Highlight text={loremIpsum} keywords={keywords} /> | ||
| </Text> | ||
| </Flex> | ||
|
|
||
| <Flex flexDirection="column" gap={2}> | ||
| <Text>Custom highlighting</Text> | ||
| <Text> | ||
| <CustomHighlight> | ||
| <Highlight text={loremIpsum} keywords={keywords} /> | ||
| </CustomHighlight> | ||
| </Text> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| const loremIpsum = | ||
| 'Lorem ipsum 👩👩👧👦 dolor sit amet, 👨👨👦👦 consectetur adipiscing elit. 🥑 Aliquam vel augue varius, venenatis velit sit amet, aliquam arcu. Morbi dictum mattis ultrices. Nullam ut porta ipsum, porta ornare nibh. Vivamus magna felis, semper sed enim sit amet, varius rhoncus leo. Aenean ornare convallis sem ut accumsan.'; | ||
|
|
||
| const CustomHighlight = styled.div` | ||
| mark { | ||
| background-color: magenta; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /** | ||
| * 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 { findAll } from 'highlight-words-core'; | ||
|
|
||
| /** | ||
| * Highlight wraps the keywords found in the text in <mark> tags. | ||
| * | ||
| * It is a simplified version of the component provided by the react-highlight-words package. | ||
| * It can be extended with the features provided by highlight-words-core (e.g. case sensitivity). | ||
| * | ||
| * It doesn't handle Unicode super well because highlight-words-core uses a regex with the i flag | ||
| * underneath. This means that the component will not always ignore differences in case, for example | ||
| * when matching a string with the Turkish İ. | ||
| */ | ||
| export function Highlight(props: { text: string; keywords: string[] }) { | ||
| const chunks = findAll({ | ||
| textToHighlight: props.text, | ||
| searchWords: props.keywords, | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| {chunks.map((chunk, index) => { | ||
| const { end, highlight, start } = chunk; | ||
| const chunkText = props.text.substr(start, end - start); | ||
|
|
||
| if (highlight) { | ||
| return <mark key={index}>{chunkText}</mark>; | ||
| } else { | ||
| return chunkText; | ||
| } | ||
| })} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.