PlaylistPage: fix search input (#39226)

* PlaylistPage: removes search due to no wildcard support

* PlaylistPage: adds back search input and wildcard search support

* makes banner to appear only when playlist does not exist

* Chore: small refactor

* Chore: some code refactoring to make it readable

* fixes focus leaving input when query is cleared

* adds styling to the emptyQueryList banner

* extracts emptyQueryListBanner component to a separate file

* adds debounce to search

* use new theme for styling

* Chore: some nit fix

* fixes empty list banner showing for a second before the full list is loaded

* Fix: removes search when playlist is empty

Co-authored-by: Ash <ashharrison90@gmail.com>

Co-authored-by: Hugo Häggmark <hugo.haggmark@gmail.com>

pkg/services/sqlstore/playlist.go

@@ -133,7 +133,7 @@ func SearchPlaylists(query *models.GetPlaylistsQuery) error {
 	sess := x.Limit(query.Limit)
 
 	if query.Name != "" {
-		sess.Where("name LIKE ?", query.Name)
+		sess.Where("name LIKE ?", "%"+query.Name+"%")
 	}
 
 	sess.Where("org_id = ?", query.OrgId)

public/app/features/playlist/EmptyQueryListBanner.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+
+export const EmptyQueryListBanner = () => {
+  const styles = useStyles2(getStyles);
+  return <div className={styles.noResult}>No playlist found!</div>;
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    noResult: css`
+      padding: ${theme.spacing(2)};
+      background: ${theme.colors.secondary.main};
+      font-style: italic;
+      margin-top: ${theme.spacing(2)};
+    `,
+  };
+};

public/app/features/playlist/PlaylistPage.tsx

@@ -5,30 +5,44 @@ import Page from 'app/core/components/Page/Page';
 import { StoreState } from 'app/types';
 import { GrafanaRouteComponentProps } from '../../core/navigation/types';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { useAsync } from 'react-use';
+import { useDebounce } from 'react-use';
 import { PlaylistDTO } from './types';
-import { Button, Card, ConfirmModal, LinkButton } from '@grafana/ui';
-import { contextSrv } from 'app/core/services/context_srv';
+import { ConfirmModal } from '@grafana/ui';
 import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
 import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
 import { deletePlaylist, getAllPlaylist } from './api';
 import { StartModal } from './StartModal';
+import { PlaylistPageList } from './PlaylistPageList';
+import { EmptyQueryListBanner } from './EmptyQueryListBanner';
 
 interface ConnectedProps {
   navModel: NavModel;
 }
-
 export interface PlaylistPageProps extends ConnectedProps, GrafanaRouteComponentProps {}
 
 export const PlaylistPage: FC<PlaylistPageProps> = ({ navModel }) => {
   const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery);
+  const [hasFetched, setHasFetched] = useState(false);
   const [startPlaylist, setStartPlaylist] = useState<PlaylistDTO | undefined>();
   const [playlistToDelete, setPlaylistToDelete] = useState<PlaylistDTO | undefined>();
   const [forcePlaylistsFetch, setForcePlaylistsFetch] = useState(0);
 
-  const { value: playlists, loading } = useAsync(async () => {
-    return getAllPlaylist(searchQuery) as Promise<PlaylistDTO[]>;
-  }, [forcePlaylistsFetch]);
+  const [playlists, setPlaylists] = useState<PlaylistDTO[]>([]);
+
+  useDebounce(
+    async () => {
+      const playlists = await getAllPlaylist(searchQuery);
+      if (!hasFetched) {
+        setHasFetched(true);
+      }
+      setPlaylists(playlists);
+      setDebouncedSearchQuery(searchQuery);
+    },
+    350,
+    [forcePlaylistsFetch, searchQuery]
+  );
+
   const hasPlaylists = playlists && playlists.length > 0;
   const onDismissDelete = () => setPlaylistToDelete(undefined);
   const onDeletePlaylist = () => {
@@ -41,7 +55,7 @@ export const PlaylistPage: FC<PlaylistPageProps> = ({ navModel }) => {
     });
   };
 
-  let content = (
+  const emptyListBanner = (
     <EmptyListCTA
       title="There are no playlists created yet"
       buttonIcon="plus"
@@ -54,47 +68,29 @@ export const PlaylistPage: FC<PlaylistPageProps> = ({ navModel }) => {
     />
   );
 
-  if (hasPlaylists) {
-    content = (
-      <>
-        {playlists!.map((playlist) => (
-          <Card heading={playlist.name} key={playlist.id.toString()}>
-            <Card.Actions>
-              <Button variant="secondary" icon="play" onClick={() => setStartPlaylist(playlist)}>
-                Start playlist
-              </Button>
-              {contextSrv.isEditor && (
-                <>
-                  <LinkButton key="edit" variant="secondary" href={`/playlists/edit/${playlist.id}`} icon="cog">
-                    Edit playlist
-                  </LinkButton>
-                  <Button
-                    disabled={false}
-                    onClick={() => setPlaylistToDelete({ id: playlist.id, name: playlist.name })}
-                    icon="trash-alt"
-                    variant="destructive"
-                  >
-                    Delete playlist
-                  </Button>
-                </>
-              )}
-            </Card.Actions>
-          </Card>
-        ))}
-      </>
-    );
-  }
+  const showSearch = playlists.length > 0 || searchQuery.length > 0 || debouncedSearchQuery.length > 0;
+
   return (
     <Page navModel={navModel}>
-      <Page.Contents isLoading={loading}>
-        {hasPlaylists && (
+      <Page.Contents isLoading={!hasFetched}>
+        {showSearch && (
           <PageActionBar
             searchQuery={searchQuery}
             linkButton={{ title: 'New playlist', href: '/playlists/new' }}
             setSearchQuery={setSearchQuery}
           />
         )}
-        {content}
+
+        {!hasPlaylists && searchQuery ? (
+          <EmptyQueryListBanner />
+        ) : (
+          <PlaylistPageList
+            playlists={playlists}
+            setStartPlaylist={setStartPlaylist}
+            setPlaylistToDelete={setPlaylistToDelete}
+          />
+        )}
+        {!showSearch && emptyListBanner}
         {playlistToDelete && (
           <ConfirmModal
             title={playlistToDelete.name}

public/app/features/playlist/PlaylistPageList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PlaylistDTO } from './types';
+import { Button, Card, LinkButton } from '@grafana/ui';
+import { contextSrv } from 'app/core/services/context_srv';
+
+interface Props {
+  setStartPlaylist: (playlistItem: PlaylistDTO) => void;
+  setPlaylistToDelete: (playlistItem: PlaylistDTO) => void;
+  playlists: PlaylistDTO[] | undefined;
+}
+
+export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDelete }: Props) => {
+  return (
+    <>
+      {playlists!.map((playlist: PlaylistDTO) => (
+        <Card heading={playlist.name} key={playlist.id.toString()}>
+          <Card.Actions>
+            <Button variant="secondary" icon="play" onClick={() => setStartPlaylist(playlist)}>
+              Start playlist
+            </Button>
+            {contextSrv.isEditor && (
+              <>
+                <LinkButton key="edit" variant="secondary" href={`/playlists/edit/${playlist.id}`} icon="cog">
+                  Edit playlist
+                </LinkButton>
+                <Button
+                  disabled={false}
+                  onClick={() => setPlaylistToDelete({ id: playlist.id, name: playlist.name })}
+                  icon="trash-alt"
+                  variant="destructive"
+                >
+                  Delete playlist
+                </Button>
+              </>
+            )}
+          </Card.Actions>
+        </Card>
+      ))}
+    </>
+  );
+};