Add text field to search in wiki on home page learn section (#5243)

4ian · Apr 19, 2023 · b2e8c23 · b2e8c23
1 parent bfc6a69
commit b2e8c23
Show file tree

Hide file tree

Showing 7 changed files with 576 additions and 272 deletions.
diff --git a/newIDE/app/src/CommandPalette/CommandPalette/AutocompletePicker.js b/newIDE/app/src/CommandPalette/CommandPalette/AutocompletePicker.js
@@ -27,11 +27,15 @@ import {
   getHitLastHierarchyLevel,
   type AlgoliaSearchHit as AlgoliaSearchHitType,
 } from '../../Utils/AlgoliaSearch';
+import { useResponsiveWindowWidth } from '../../UI/Reponsive/ResponsiveWindowMeasurer';
 
 const useStyles = makeStyles(theme => ({
   listItemContainer: {
     width: '100%',
   },
+  rootSmallPadding: {
+    paddingLeft: 0,
+  },
   wikiPrimaryTextHierarchy: {
     color: theme.palette.text.secondary,
   },
@@ -84,7 +88,8 @@ type Props<T> = {|
 
 type AlgoliaSearchHitItemProps = {| hit: AlgoliaSearchHitType |};
 
-const AlgoliaSearchHit = ({ hit }: AlgoliaSearchHitItemProps) => {
+export const AlgoliaSearchHit = ({ hit }: AlgoliaSearchHitItemProps) => {
+  const windowWidth = useResponsiveWindowWidth();
   const classes = useStyles();
   let secondaryText;
   let removeLastLevel = false;
@@ -100,7 +105,10 @@ const AlgoliaSearchHit = ({ hit }: AlgoliaSearchHitItemProps) => {
       dense
       component="div"
       ContainerComponent="div"
-      classes={{ container: classes.listItemContainer }}
+      classes={{
+        container: classes.listItemContainer,
+        root: windowWidth === 'small' ? classes.rootSmallPadding : null,
+      }}
     >
       <ListItemIcon>
         <Book />
@@ -118,6 +126,7 @@ const AlgoliaSearchHit = ({ hit }: AlgoliaSearchHitItemProps) => {
 const AutocompletePicker = (
   props: Props<NamedCommand | GoToWikiCommand> | Props<CommandOption>
 ) => {
+  const windowWidth = useResponsiveWindowWidth();
   const [open, setOpen] = React.useState(true);
   const shortcutMap = useShortcutMap();
   const classes = useStyles();
@@ -177,15 +186,25 @@ const AutocompletePicker = (
           dense
           component="div"
           ContainerComponent="div"
-          classes={{ container: classes.listItemContainer }}
+          classes={{
+            container: classes.listItemContainer,
+            root: windowWidth === 'small' ? classes.rootSmallPadding : null,
+          }}
         >
           <ListItemIcon>{getItemIcon(item)}</ListItemIcon>
           <ListItemText primary={getItemText(item)} />
           {getItemHint(item)}
         </ListItem>
       );
     },
-    [classes.listItemContainer, getItemText, getItemHint, getItemIcon]
+    [
+      classes.listItemContainer,
+      classes.rootSmallPadding,
+      windowWidth,
+      getItemText,
+      getItemHint,
+      getItemIcon,
+    ]
   );
 
   return (

diff --git a/newIDE/app/src/CommandPalette/CommandPalette/index.js b/newIDE/app/src/CommandPalette/CommandPalette/index.js
@@ -13,10 +13,13 @@ import {
 } from '../CommandManager';
 import AutocompletePicker from './AutocompletePicker';
 import commandsList, { type CommandName } from '../CommandsList';
-import algoliasearch from 'algoliasearch/lite';
 import Window from '../../Utils/Window';
 import Command from '../../UI/CustomSvgIcons/Command';
-import { type AlgoliaSearchHit } from '../../Utils/AlgoliaSearch';
+import {
+  searchClient,
+  type AlgoliaSearchHit,
+  indexName,
+} from '../../Utils/AlgoliaSearch';
 
 import {
   InstantSearch,
@@ -25,7 +28,6 @@ import {
 } from 'react-instantsearch-hooks';
 import { useDebounce } from '../../Utils/UseDebounce';
 import { useResponsiveWindowWidth } from '../../UI/Reponsive/ResponsiveWindowMeasurer';
-const indexName = 'gdevelop';
 
 // Show the command palette dialog at the top of the screen
 const useStyles = makeStyles({
@@ -212,11 +214,6 @@ const CommandPalette = React.forwardRef<{||}, CommandPaletteInterface>(
   }
 );
 
-const searchClient = algoliasearch(
-  'RC2XAJAUNE',
-  '7853cc8136c930e6c7b8f68238eea179'
-);
-
 export const CommandPaletteWithAlgoliaSearch = React.forwardRef<
   {},
   CommandPaletteInterface

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js
@@ -29,6 +29,7 @@ import InAppTutorialContext from '../../../../InAppTutorial/InAppTutorialContext
 import GuidedLessons from '../InAppTutorials/GuidedLessons';
 import ChevronArrowRight from '../../../../UI/CustomSvgIcons/ChevronArrowRight';
 import Upload from '../../../../UI/CustomSvgIcons/Upload';
+import WikiSearchBar from '../../../../UI/WikiSearchBar';
 
 const useStyles = makeStyles({
   tile: {
@@ -154,6 +155,12 @@ const MainPage = ({
 
   return (
     <SectionContainer title={<Trans>Help and guides</Trans>}>
+      <SectionRow>
+        <Text>
+          <Trans>Quick search</Trans>
+        </Text>
+        <WikiSearchBar />
+      </SectionRow>
       <SectionRow>
         <Line noMargin>
           <GridList