Remove client context

meilisearch · Mar 13, 2023 · 75a53d8 · 75a53d8
1 parent 77634f7
commit 75a53d8
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 62 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -137,3 +137,45 @@ jobs:
         with:
           name: cypress-videos
           path: cypress/videos
+  cypress_meilisearch-api-key-query-param:
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge
+      options: --user 1001
+    services:
+      meilisearch:
+        image: getmeili/meilisearch:v0.30.5
+        env:
+          MEILI_MASTER_KEY: 'masterKey'
+          MEILI_NO_ANALYTICS: 'true'
+        ports:
+          - '7700:7700'
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup node and cache
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: "yarn"
+          cache-dependency-path: yarn.lock
+      - name: Install dependencies
+        run: yarn
+      - name: Test
+        uses: cypress-io/github-action@v4
+        env:
+          CYPRESS_host: http://meilisearch:7700
+        with:
+          start: yarn start:ci
+          wait-on: 'http://0.0.0.0:3000'
+          command: yarn cy:run:test-api-key-required
+          config-file: cypress.config.js
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-videos
+          path: cypress/videos
diff --git a/cypress/e2e/test-api-key-query-param.cy.js b/cypress/e2e/test-api-key-query-param.cy.js
@@ -0,0 +1,40 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+const API_KEY = Cypress.env('apiKey')
+const WRONG_APIKEY = Cypress.env('wrongApiKey')
+const WAITING_TIME = Cypress.env('waitingTime')
+
+describe(`Test API key required with query params`, () => {
+  before(() => {
+    cy.deleteAllIndexes()
+
+    cy.wait(WAITING_TIME)
+    cy.createIndex('movies')
+    cy.wait(WAITING_TIME)
+    cy.fixture('movies.json').then((movies) => {
+      cy.addDocuments('movies', movies)
+      cy.wait(WAITING_TIME)
+    })
+  })
+
+  beforeEach(() => {
+    cy.visit(`/?api_key=${API_KEY}`)
+  })
+
+  it('Should display the movies', () => {
+    cy.get('ul')
+      .children()
+      .should(($p) => {
+        expect($p).to.have.length(20)
+      })
+  })
+
+  it('Should have the api key written in the modal', () => {
+    // Test if the query parameter is written in the modal
+    // meaning it is added in the local storage
+    cy.get('span').contains('Api Key').parent().click()
+    cy.get('div[aria-label=settings-api-key]').within(() => {
+      cy.get('input[name="apiKey"]').should('have.value', API_KEY)
+      cy.get('button').contains('Go').click()
+    })
+  })
+})
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "cy:open": "cypress open",
     "cy:run:test-no-meilisearch": "cypress run --spec '**/*/test-no-meilisearch.cy.js'",
     "cy:run:test-api-key-required": "cypress run --spec '**/*/test-api-key-required.cy.js'",
+    "cy:run:test-api-key-query-param": "cypress run --spec '**/*/test-api-key-query-param.cy.js'",
     "cy:run": "cypress run --config excludeSpecPattern=['**/*/test-no-meilisearch.cy.js','**/*/test-api-key-required.cy.js']",
     "icons": "npx @svgr/cli --title-prop --no-dimensions --replace-attr-values \"#39486E=currentColor,#959DB3=currentColor\" -d src/components/icons src/components/icons/svg"
   },

diff --git a/src/App.js b/src/App.js
@@ -16,7 +16,6 @@ import Modal from 'components/Modal'
 import OnBoarding from 'components/OnBoarding'
 import Results from 'components/Results'
 import ApiKeyContext from 'context/ApiKeyContext'
-import ClientContext from 'context/ClientContext'
 import Typography from 'components/Typography'
 import { MeiliSearch as Meilisearch } from 'meilisearch'
 
@@ -145,6 +144,7 @@ const App = () => {
     if (apiKeyParam) {
       setApiKey(apiKeyParam)
     }
+
     // Check if an API key is required / a masterKey was set
     const fetchWithoutApiKey = async () => {
       try {
@@ -201,55 +201,49 @@ const App = () => {
     getIndexesList()
   }, [MSClient, currentIndex?.uid])
 
-  const clientContext = React.useMemo(
-    () => ({ ISClient, MSClient, setISClient, setMSClient }),
-    []
-  )
   return (
-    <ClientContext.Provider value={clientContext}>
-      <ApiKeyContext.Provider value={{ apiKey, setApiKey }}>
-        <Wrapper>
-          <InstantSearch
-            indexName={currentIndex ? currentIndex.uid : ''}
-            searchClient={ISClient}
-          >
-            <Header
-              indexes={indexes}
-              currentIndex={currentIndex}
-              setCurrentIndex={setCurrentIndex}
-              requireApiKeyToWork={requireApiKeyToWork}
-              client={MSClient}
-              refreshIndexes={getIndexesList}
-            />
-            <Body>
-              {/* <Sidebar /> */}
-              <Box
-                width={928}
-                m="0 auto"
-                py={4}
-                display="flex"
-                flexDirection="column"
-              >
-                {isMeilisearchRunning ? (
-                  <Content currentIndex={currentIndex} />
-                ) : (
-                  <NoMeilisearchRunning />
-                )}
-              </Box>
-            </Body>
-          </InstantSearch>
-          <Modal
-            title={`Enter your admin API key${
-              requireApiKeyToWork ? '' : ' (optional)'
-            }`}
-            dialog={dialog}
-            ariaLabel="ask-for-api-key"
-          >
-            <ApiKeyModalContent closeModal={() => dialog.hide()} />
-          </Modal>
-        </Wrapper>
-      </ApiKeyContext.Provider>
-    </ClientContext.Provider>
+    <ApiKeyContext.Provider value={{ apiKey, setApiKey }}>
+      <Wrapper>
+        <InstantSearch
+          indexName={currentIndex ? currentIndex.uid : ''}
+          searchClient={ISClient}
+        >
+          <Header
+            indexes={indexes}
+            currentIndex={currentIndex}
+            setCurrentIndex={setCurrentIndex}
+            requireApiKeyToWork={requireApiKeyToWork}
+            client={MSClient}
+            refreshIndexes={getIndexesList}
+          />
+          <Body>
+            {/* <Sidebar /> */}
+            <Box
+              width={928}
+              m="0 auto"
+              py={4}
+              display="flex"
+              flexDirection="column"
+            >
+              {isMeilisearchRunning ? (
+                <Content currentIndex={currentIndex} />
+              ) : (
+                <NoMeilisearchRunning />
+              )}
+            </Box>
+          </Body>
+        </InstantSearch>
+        <Modal
+          title={`Enter your admin API key${
+            requireApiKeyToWork ? '' : ' (optional)'
+          }`}
+          dialog={dialog}
+          ariaLabel="ask-for-api-key"
+        >
+          <ApiKeyModalContent closeModal={() => dialog.hide()} />
+        </Modal>
+      </Wrapper>
+    </ApiKeyContext.Provider>
   )
 }
 

diff --git a/src/context/ClientContext.js b/src/context/ClientContext.js