Merge pull request #585 from meilisearch/feat/add-side-panel-clean

Add side panel (without unrelated changes)

cypress/e2e/side-panel.cy.js

@@ -0,0 +1,21 @@
+describe(`Right side panel`, () => {
+  beforeEach(() => {
+    cy.saveApiTokenCookie()
+    cy.visit('/')
+  })
+
+  it('Should be opened by default', () => {
+    cy.get('[data-testid="right-panel"]').should('be.visible')
+  })
+
+  it('Should be closed when clicking on the close button', () => {
+    cy.get('button[aria-label="Close Panel"]').click()
+    cy.get('[data-testid="right-panel"]').should('not.be.visible')
+  })
+
+  it('Should be opened when clicking on the menu bars button', () => {
+    cy.get('button[aria-label="Close Panel"]').click()
+    cy.get('button[aria-label="Open Panel"]').click()
+    cy.get('[data-testid="right-panel"]').should('be.visible')
+  })
+})

cypress/e2e/test-interface.cy.js

@@ -23,31 +23,6 @@ describe(`Test interface`, () => {
     cy.visit('/')
   })
 
-  it('Should open the help center on click on the "?" button', () => {
-    cy.get('button[aria-label="help"]').click()
-    cy.get('div[aria-label="Help Center"]').within(() => {
-      cy.contains('Help Center')
-      cy.contains(
-        'If you need help with anything, here are a few links that can be useful.'
-      )
-      cy.contains('Explore our repositories on Github')
-      cy.contains('Join our Discord and find the help you need')
-      cy.contains('Learn how to tune your Meilisearch')
-      cy.get('a')
-        .first()
-        .should('have.attr', 'href', 'https://github.com/meilisearch')
-        .next()
-        .should('have.attr', 'href', 'https://discord.meilisearch.com')
-        .next()
-        .should(
-          'have.attr',
-          'href',
-          'https://docs.meilisearch.com/?utm_campaign=oss&utm_source=integration&utm_medium=minidashboard'
-        )
-      cy.get('button[aria-label="close"]').click()
-    })
-  })
-
   it('Should contain a "Show more" button if a document has more than 6 fields', () => {
     cy.get('ul')
       .children()

cypress/support/commands.js

@@ -45,3 +45,9 @@ Cypress.Commands.add('addDocuments', async (uid, documents) => {
     console.log({ e })
   }
 })
+
+Cypress.Commands.add('saveApiTokenCookie', () => {
+  cy.window().then((win) => {
+    win.localStorage.setItem('apiKey', JSON.stringify(apiKey))
+  })
+})

jsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "jsx": "react"
   },
   "include": ["src"]
 }

src/App.js

@@ -11,12 +11,10 @@ import { useMeilisearchClientContext } from 'context/MeilisearchClientContext'
 import useLocalStorage from 'hooks/useLocalStorage'
 import ApiKeyModalContent from 'components/ApiKeyModalContent'
 import Body from 'components/Body'
-import CloudBanner from 'components/CloudBanner'
 import Modal from 'components/Modal'
 import NoMeilisearchRunning from 'components/NoMeilisearchRunning'
 import ApiKeyAwarenessBanner from 'components/ApiKeyAwarenessBanner'
 import getIndexesListWithStats from 'utils/getIndexesListWithStats'
-import isCloudBannerEnabled from 'utils/isCloudBannerEnabled'
 import shouldDisplayApiKeyModal from 'utils/shouldDisplayApiKeyModal'
 import hasAnApiKeySet from 'utils/hasAnApiKeySet'
 import clientAgents from './version/client-agents'
@@ -38,7 +36,6 @@ const App = () => {
   const [isMeilisearchRunning, setIsMeilisearchRunning] = useState(false)
   const [requireApiKeyToWork, setRequireApiKeyToWork] = useState(false)
   const [currentIndex, setCurrentIndex] = useLocalStorage('currentIndex')
-  const [showCloudBanner, setShowCloudBanner] = useState(false)
   const [isApiKeyBannerVisible, setIsApiKeyBannerVisible] = useState(false)
   const dialog = useDialogState({ animated: true, visible: false })
 
@@ -78,9 +75,6 @@ const App = () => {
   }, [])
 
   useEffect(() => {
-    if (isCloudBannerEnabled()) {
-      setShowCloudBanner(true)
-    }
     getApiKeyFromUrl()
   }, [])
 
@@ -114,20 +108,6 @@ const App = () => {
     onClientUpdate()
   }, [meilisearchJsClient])
 
-  const handleCloudBannerClose = () => {
-    setShowCloudBanner(false)
-    localStorage.setItem('bannerVisibility', JSON.stringify(false))
-  }
-
-  // Retrieve the banner visibility state from local storage on component mount
-  React.useEffect(() => {
-    const storedVisibility = localStorage.getItem('bannerVisibility')
-    if (storedVisibility) {
-      setShowCloudBanner(JSON.parse(storedVisibility))
-    }
-    return () => {}
-  }, [])
-
   return (
     <ApiKeyContext.Provider value={{ apiKey, setApiKey }}>
       <Wrapper>
@@ -136,12 +116,6 @@ const App = () => {
             onClose={() => setIsApiKeyBannerVisible(false)}
           />
         )}
-        {showCloudBanner && (
-          <CloudBanner
-            handleBannerClose={handleCloudBannerClose}
-            isBannerVisible={showCloudBanner}
-          />
-        )}
         {isMeilisearchRunning ? (
           <Body
             currentIndex={currentIndex}
@@ -150,7 +124,6 @@ const App = () => {
             requireApiKeyToWork={requireApiKeyToWork}
             getIndexesList={getIndexesList}
             isApiKeyBannerVisible={isApiKeyBannerVisible}
-            isCloudBannerVisible={showCloudBanner}
           />
         ) : (
           <NoMeilisearchRunning />

src/components/Body.js

@@ -1,15 +1,23 @@
 import React from 'react'
 import { InstantSearch } from 'react-instantsearch-dom'
+import styled from 'styled-components'
 
 import { useMeilisearchClientContext } from 'context/MeilisearchClientContext'
 import Box from 'components/Box'
 import Header from 'components/Header/index'
+import RightPanel from 'components/RightPanel'
 import BodyWrapper from 'components/BodyWrapper'
 import EmptyView from 'components/EmptyView'
 import OnBoarding from 'components/OnBoarding'
 import Results from 'components/Results'
 import Typography from 'components/Typography'
 
+const ContentWrapper = styled.div`
+  width: ${({ isRightPanelOpen, theme }) =>
+    isRightPanelOpen ? `calc(100% - ${theme.sizes.rightPanel})` : '100%'};
+  transition: width 0.3s ease-in-out;
+`
+
 const IndexContent = ({ currentIndex }) => {
   if (!currentIndex) return <OnBoarding />
   if (currentIndex?.stats?.numberOfDocuments > 0) return <Results />
@@ -34,38 +42,50 @@ const Body = ({
   setCurrentIndex,
   requireApiKeyToWork,
   isApiKeyBannerVisible,
-  isCloudBannerVisible,
 }) => {
   const { meilisearchJsClient, instantMeilisearchClient } =
     useMeilisearchClientContext()
 
+  // Right-side panel
+  const [isRightPanelOpen, setIsRightPanelOpen] = React.useState(true)
+  const handleTogglePanel = React.useCallback(() => {
+    setIsRightPanelOpen((isOpen) => !isOpen)
+  }, [])
+
   return (
     <InstantSearch
       indexName={currentIndex ? currentIndex.uid : ''}
       searchClient={instantMeilisearchClient}
     >
-      <Header
-        indexes={indexes}
-        currentIndex={currentIndex}
-        setCurrentIndex={setCurrentIndex}
-        requireApiKeyToWork={requireApiKeyToWork}
-        client={meilisearchJsClient}
-        refreshIndexes={getIndexesList}
-        isApiKeyBannerVisible={isApiKeyBannerVisible}
-        isCloudBannerVisible={isCloudBannerVisible}
+      <ContentWrapper isRightPanelOpen={isRightPanelOpen}>
+        <Header
+          indexes={indexes}
+          currentIndex={currentIndex}
+          setCurrentIndex={setCurrentIndex}
+          requireApiKeyToWork={requireApiKeyToWork}
+          client={meilisearchJsClient}
+          refreshIndexes={getIndexesList}
+          isApiKeyBannerVisible={isApiKeyBannerVisible}
+          showPanelButton={!isRightPanelOpen}
+          onPanelToggle={handleTogglePanel}
+        />
+        <BodyWrapper>
+          {/* <Sidebar /> */}
+          <Box
+            width={928}
+            m="0 auto"
+            py={4}
+            display="flex"
+            flexDirection="column"
+          >
+            <IndexContent currentIndex={currentIndex} />
+          </Box>
+        </BodyWrapper>
+      </ContentWrapper>
+      <RightPanel
+        isOpen={isRightPanelOpen}
+        onClose={() => setIsRightPanelOpen(false)}
       />
-      <BodyWrapper>
-        {/* <Sidebar /> */}
-        <Box
-          width={928}
-          m="0 auto"
-          py={4}
-          display="flex"
-          flexDirection="column"
-        >
-          <IndexContent currentIndex={currentIndex} />
-        </Box>
-      </BodyWrapper>
     </InstantSearch>
   )
 }