Merge pull request #204 from ably/pass-api-key-to-meganav-directly

Pass api key to meganav directly
ably · Aug 5, 2022 · ef22008 · ef22008
2 parents 3b88254 + 756d20e
commit ef22008
Show file tree

Hide file tree

Showing 14 changed files with 34 additions and 23 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.0.0)
+    ably-ui (8.0.0.dev.1715d4e)
       view_component (>= 2.33, < 2.50)
 
 GEM

diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb
@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.0.0'
+  VERSION = '8.0.0.dev.1715d4e'
 end
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.0.0",
+  "version": "8.0.0-dev.1715d4e",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/preview/Gemfile b/preview/Gemfile
@@ -36,7 +36,7 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '8.0.0', require: 'ably_ui'
+gem 'ably-ui', '8.0.0.dev.1715d4e', require: 'ably_ui'
 
 # https://stackoverflow.com/questions/71191685/visit-psych-nodes-alias-unknown-alias-default-psychbadalias
 gem 'psych', '< 4'

diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock
@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (8.0.0)
+    ably-ui (8.0.0.dev.1715d4e)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.5.1)
       actionpack (= 6.0.5.1)
@@ -171,7 +171,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
-  ably-ui (= 8.0.0)
+  ably-ui (= 8.0.0.dev.1715d4e)
   bootsnap (>= 1.4.2)
   byebug
   dotenv-rails

diff --git a/preview/app/controllers/components_controller.rb b/preview/app/controllers/components_controller.rb
@@ -170,7 +170,8 @@ def meganav_react_props
       notice: {
         props: notice_props,
         config: notice_config
-      }
+      },
+      addSearchApiKey: Rails.application.config.add_search_api_key
     }
 
     props[:login_link] = '/custom-login-link' if custom_login_link?

diff --git a/preview/app/views/components/meganav_vw.html.erb b/preview/app/views/components/meganav_vw.html.erb
@@ -9,7 +9,7 @@
 
   <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", () => {
-      AblyUi.Core.Meganav();
+      AblyUi.Core.Meganav({ addSearchApiKey: "<%= Rails.application.config.add_search_api_key %>" });
       AblyUi.Core.Notice({
         bannerContainer: document.querySelector('[data-id="ui-notice"]'),
         cookieId: '1',

diff --git a/preview/app/views/layouts/application.html.erb b/preview/app/views/layouts/application.html.erb
@@ -7,7 +7,7 @@
     <%= csp_meta_tag %>
     <%= stylesheet_packs_with_chunks_tag 'application'  %>
   </head>
-  <body data-add-search-api-key="<%= Rails.application.config.add_search_api_key %>">
+  <body>
     <%= yield %>
     <%= javascript_packs_with_chunks_tag 'application' %>
 

diff --git a/preview/package.json b/preview/package.json
@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "8.0.0",
+    "@ably/ui": "8.0.0-dev.1715d4e",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",

diff --git a/preview/yarn.lock b/preview/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/[email protected]":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-8.0.0.tgz#2166dda0128a3133e01b9c99f78c6a09f8f22950"
-  integrity sha512-UpbSF2pCDPPCyIKLTJchAPB4AbArl1qIXnX7eIdFWhBtkpL9t7r30Mc1qDrf83ypdxNBA2F75sWMu6PX058+Rw==
+"@ably/[email protected]-dev.1715d4e":
+  version "8.0.0-dev.1715d4e"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-8.0.0-dev.1715d4e.tgz#53100feaed4d0d4aba43b384a3b45412e4ccf932"
+  integrity sha512-M/n1WvT+0l/487edYSyDtE2wyLBgSyBMO6UbD/ysME0/rQJvK2PbGE+DULH1bwFZT8tyV7iEHb0Lit/c352m4g==
   dependencies:
     addsearch-js-client "^0.6.7"
     array-flat-polyfill "^1.0.1"

diff --git a/src/core/Meganav/component.js b/src/core/Meganav/component.js
@@ -113,11 +113,13 @@ const documentScroll = (themeName) => {
   };
 };
 
-export default function Meganav({ themeName } = { themeName: null }) {
+export default function Meganav(
+  { themeName, addSearchApiKey } = { themeName: null }
+) {
   const controls = MeganavControl();
   const panelOpenControls = MobilePanelOpenClick();
   const panelCloseControls = MobilePanelCloseClick();
-  const search = MeganavSearchAutocomplete();
+  const search = MeganavSearchAutocomplete(addSearchApiKey);
   const searchSuggestions = MeganavSearchSuggestions();
 
   const mobileDropdownControl = MeganavControlMobileDropdown({

diff --git a/src/core/Meganav/component.jsx b/src/core/Meganav/component.jsx
@@ -64,7 +64,7 @@ const panels = {
   MeganavContentDevelopers: MeganavContentDevelopers,
 };
 
-export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase }) {
+export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase, addSearchApiKey }) {
   const [sessionState, setSessionState] = useState(null);
 
   useEffect(() => {
@@ -74,7 +74,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
   }, []);
 
   useEffect(() => {
-    const teardown = MeganavScripts({ themeName });
+    const teardown = MeganavScripts({ themeName, addSearchApiKey });
     return () => teardown();
   }, [sessionState]);
 
@@ -119,4 +119,5 @@ Meganav.propTypes = {
   }),
   loginLink: T.string,
   urlBase: T.string,
+  addSearchApiKey: T.string,
 };
diff --git a/src/core/MeganavItemsSignedIn/component.html.erb b/src/core/MeganavItemsSignedIn/component.html.erb
@@ -43,10 +43,10 @@
 
   <li>
     <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
-  <li>
+  </li>
 
   <% if account? %>
-    <li class="ml-16">
+    <li>
       <%= link_to "Dashboard", @session_data[:account][:links][:dashboard][:href], class: "ui-btn-secondary p-btn-small" %>
     </li>
   <% end %>

diff --git a/src/core/MeganavSearchAutocomplete/component.js b/src/core/MeganavSearchAutocomplete/component.js
@@ -47,9 +47,16 @@ const init = ({ input, container, listContainer, clear, client }) => {
 
   const renderResults =
     (query) =>
-    (results = { suggestions: [] }) => {
+    (results = {}) => {
       toggleClearBtn(query);
 
+      // Prevent invalid access error when key is invalid
+      if (!Array.isArray(results.suggestions)) {
+        clearResults();
+        return;
+      }
+
+      // Prevent key error from invalid key
       if (results.suggestions.length === 0) {
         clearResults();
         return;
@@ -143,12 +150,12 @@ const init = ({ input, container, listContainer, clear, client }) => {
   };
 };
 
-export default () => {
-  const apiKey = document.body.dataset.addSearchApiKey;
+export default (apiKey) => {
   if (!apiKey) {
     console.log(`No AddSearch API key provided, skipping search suggestions.`);
     return [];
   }
+
   const client = new AddSearchClient(apiKey);
 
   return [