Adds only scenarios filter option. Closes: #165 (#167)

## 🎯 Aim The aim of this PR is to add a 'only scenarios' filter option. ## 🔗 Related issue Closes: #165
pnp · Jan 18, 2024 · 866680e · 866680e
1 parent 98df3b1
commit 866680e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/src/webview/view/components/gallery/GalleryView.tsx b/src/webview/view/components/gallery/GalleryView.tsx
@@ -15,12 +15,18 @@ export const GalleryView: React.FunctionComponent<IGalleryViewProps> = ({ }: Rea
   const [samples, versions, search] = useSamples();
   const [query, setQuery] = useState<string>('');
   const [spfxVersions, setSPFxVersions] = useState<string[]>();
+  const [showOnlyScenarios, setShowOnlyScenarios] = useState<boolean>(false);
   const [componentTypes, setComponentTypes] = useState<string[]>();
 
   const onSearchTextboxChange = (event: any) => {
     const input: string = event.target.value;
     setQuery(input);
-    search(input, componentTypes ?? [], spfxVersions ?? []);
+    search(input, componentTypes ?? [], spfxVersions ?? [], showOnlyScenarios);
+  };
+
+  const onFilterOnlyScenariosChange = () => {
+    setShowOnlyScenarios(!showOnlyScenarios);
+    search(query, componentTypes ?? [], spfxVersions ?? [], !showOnlyScenarios);
   };
 
   const onFilterBySPFxVersionChange = (event: any, option?: IDropdownOption) => {
@@ -32,7 +38,7 @@ export const GalleryView: React.FunctionComponent<IGalleryViewProps> = ({ }: Rea
     }
 
     setSPFxVersions(spfxVersionsInput);
-    search(query, componentTypes ?? [], spfxVersionsInput);
+    search(query, componentTypes ?? [], spfxVersionsInput, showOnlyScenarios);
   };
 
   const onFilterByComponentTypeChange = (event: any, option?: IDropdownOption) => {
@@ -44,7 +50,7 @@ export const GalleryView: React.FunctionComponent<IGalleryViewProps> = ({ }: Rea
     }
 
     setComponentTypes(componentTypesInput);
-    search(query, componentTypesInput, spfxVersions ?? []);
+    search(query, componentTypesInput, spfxVersions ?? [], showOnlyScenarios);
   };
 
   const getSPFxVersions = (): IDropdownOption[] => {
@@ -74,6 +80,7 @@ export const GalleryView: React.FunctionComponent<IGalleryViewProps> = ({ }: Rea
               onSearchTextboxChange={(event) => onSearchTextboxChange(event)}
               onFilterBySPFxVersionChange={(event, option) => onFilterBySPFxVersionChange(event, option)}
               onFilterByComponentTypeChange={(event, option) => onFilterByComponentTypeChange(event, option)}
+              onFilterOnlyScenariosChange={() => onFilterOnlyScenariosChange()}
               initialQuery={query}
               spfxVersions={getSPFxVersions()} />
 

diff --git a/src/webview/view/components/gallery/SearchBar.tsx b/src/webview/view/components/gallery/SearchBar.tsx
@@ -1,4 +1,4 @@
-import { VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
+import { VSCodeCheckbox, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { SearchIcon } from '../icons';
@@ -13,11 +13,13 @@ export interface ISearchBarProps {
   onFilterBySPFxVersionChange: (event: any, option?: IDropdownOption) => void;
   // eslint-disable-next-line no-unused-vars
   onFilterByComponentTypeChange: (event: any, option?: IDropdownOption) => void;
+  // eslint-disable-next-line no-unused-vars
+  onFilterOnlyScenariosChange: (event: any) => void;
   initialQuery?: string;
   spfxVersions: IDropdownOption[];
 }
 
-export const SearchBar: React.FunctionComponent<ISearchBarProps> = ({ onSearchTextboxChange, onFilterBySPFxVersionChange, onFilterByComponentTypeChange, initialQuery, spfxVersions }: React.PropsWithChildren<ISearchBarProps>) => {
+export const SearchBar: React.FunctionComponent<ISearchBarProps> = ({ onSearchTextboxChange, onFilterBySPFxVersionChange, onFilterByComponentTypeChange, onFilterOnlyScenariosChange, initialQuery, spfxVersions }: React.PropsWithChildren<ISearchBarProps>) => {
   const [query, setQuery] = useState<string>('');
 
   useEffect(() => {
@@ -52,6 +54,9 @@ export const SearchBar: React.FunctionComponent<ISearchBarProps> = ({ onSearchTe
         <div>
           <MultiSelect options={componentTypes} label="Component Type" onChange={onFilterByComponentTypeChange}/>
         </div>
+        <div>
+          <VSCodeCheckbox onChange={onFilterOnlyScenariosChange}>show only scenarios</VSCodeCheckbox>
+        </div>
       </div>
     </div>
   );

diff --git a/src/webview/view/hooks/useSamples.tsx b/src/webview/view/hooks/useSamples.tsx
@@ -7,7 +7,7 @@ import { Sample } from '../../../models';
 const SAMPLES_URL = 'https://raw.githubusercontent.com/pnp/vscode-viva/dev/data/sp-dev-fx-samples.json';
 
 // eslint-disable-next-line no-unused-vars
-export default function useSamples(): [Sample[], string[], ((query: string, componentTypes: string[], spfxVersions: string[]) => void)] {
+export default function useSamples(): [Sample[], string[], ((query: string, componentTypes: string[], spfxVersions: string[], showOnlyScenarios: boolean) => void)] {
   const [allSamples, setAllSamples] = useState<Sample[] | undefined>(undefined);
   const [samples, setSamples] = useState<Sample[] | undefined>(undefined);
   const state = Messenger.getState() as any || {};
@@ -68,12 +68,15 @@ export default function useSamples(): [Sample[], string[], ((query: string, comp
     });
   }, [allSamples]);
 
-  const search = (query: string, componentTypes: string[], spfxVersions: string[]) => {
+  const search = (query: string, componentTypes: string[], spfxVersions: string[], showOnlyScenarios: boolean) => {
     const currentSamples: Sample[] = state['samples'];
     const samplesByTitle: Sample[] = currentSamples!.filter((sample: Sample) => sample.title.toString().toLowerCase().includes(query.toLowerCase()));
     const samplesByTag: Sample[] = currentSamples!.filter((sample: Sample) => sample.tags.some(tag => tag.toString().toLowerCase().includes(query.toLowerCase())));
     const samplesByAuthor: Sample[] = currentSamples!.filter((sample: Sample) => sample.authors.some(author => author.name.toString().toLowerCase().includes(query.toLowerCase())));
-    const newSamples: Sample[] = samplesByTitle.concat(samplesByTag).concat(samplesByAuthor);
+    let newSamples: Sample[] = samplesByTitle.concat(samplesByTag).concat(samplesByAuthor);
+    if (showOnlyScenarios){
+      newSamples = newSamples.filter((sample: Sample) => sample.sampleType === 'scenarios');
+    }
     const distinctSamples = newSamples.filter((value, index, self) =>
       index === self.findIndex((v) => v.name === value.name)
     );