wip new search page components

Signed-off-by: Emma Indal <emma.indahl@gmail.com> Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
2021-05-18 19:41:10 +02:00
parent d9cd644a1f
commit 0f77997953
4 changed files with 190 additions and 0 deletions
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * 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, { useEffect } from 'react';
+import { useDebounce } from 'react-use';
+import { useQueryParamState } from '@backstage/core';
+import { Paper, InputBase, IconButton, makeStyles } from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
+import ClearButton from '@material-ui/icons/Clear';
+import { useSearch } from '../SearchContext';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+  },
+}));
+
+export const SearchBarNext = () => {
+  const classes = useStyles();
+  const {
+    queryState: { term },
+    setQueryState,
+  } = useSearch();
+
+  const [queryString, setQueryString] = useQueryParamState<string>('query');
+
+  useEffect(() => {
+    setQueryState({ term: queryString ?? '', pageCursor: '' });
+  }, [queryString, setQueryState]);
+
+  useDebounce(
+    () => {
+      setQueryString(term);
+    },
+    200,
+    [term],
+  );
+
+  const handleSearch = (event: React.ChangeEvent | React.FormEvent) => {
+    event.preventDefault();
+    setQueryState({
+      term: (event.target as HTMLInputElement).value,
+      pageCursor: '',
+    });
+  };
+
+  const handleClearSearchBar = () => {
+    setQueryState({ term: '', pageCursor: '' });
+  };
+
+  return (
+    <Paper
+      component="form"
+      onSubmit={e => handleSearch(e)}
+      className={classes.root}
+    >
+      <IconButton disabled type="submit" aria-label="search">
+        <SearchIcon />
+      </IconButton>
+      <InputBase
+        className={classes.input}
+        placeholder="Search in Backstage"
+        value={term}
+        onChange={e => handleSearch(e)}
+        inputProps={{ 'aria-label': 'search backstage' }}
+      />
+      <IconButton aria-label="search" onClick={() => handleClearSearchBar()}>
+        <ClearButton />
+      </IconButton>
+    </Paper>
+  );
+};
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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.
+ */
+
+export { SearchBarNext } from './SearchBarNext';
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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 { EmptyState, Link, Progress } from '@backstage/core';
+import { Divider, List, ListItem, ListItemText } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import React from 'react';
+
+import { useSearch } from '../SearchContext';
+
+const DefaultResultListItem = ({ result }: any) => {
+  return (
+    <Link to={result.location}>
+      <ListItem alignItems="flex-start">
+        <ListItemText
+          primaryTypographyProps={{ variant: 'h6' }}
+          primary={result.title}
+          secondary={result.text}
+        />
+      </ListItem>
+      <Divider component="li" />
+    </Link>
+  );
+};
+
+export const SearchResultNext = () => {
+  const {
+    resultState: { loading, error, value },
+  } = useSearch();
+
+  if (loading) {
+    return <Progress />;
+  }
+  if (error) {
+    return (
+      <Alert severity="error">
+        Error encountered while fetching search results. {error.toString()}
+      </Alert>
+    );
+  }
+
+  if (!value) {
+    return <EmptyState missing="data" title="Sorry, no results were found" />;
+  }
+
+  return (
+    <List>
+      {value.results.map(result => (
+        <>
+          <DefaultResultListItem result={result.document} />
+        </>
+      ))}
+    </List>
+  );
+};
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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.
+ */
+
+export { SearchResultNext } from './SearchResultNext';