docs - sdk updates (#49173)

docs/embedding/sdk/authentication.md

@@ -32,7 +32,7 @@ if (auth.status === "success") {
 
 You can customize how the SDK fetches the refresh token by specifying the `fetchRefreshToken` function in the `config` prop:
 
-```typescript jsx
+```typescript
 /**
  * This is the default implementation used in the SDK.
  * You can customize this function to fit your needs, such as adding headers or excluding cookies.
@@ -59,7 +59,7 @@ const config = { fetchRequestToken };
 
 In case you need to reload a Metabase component, for example, your users modify your application data and that data is used to render a question in Metabase. If you embed this question and want to force Metabase to reload the question to show the latest data, you can do so by using the `key` prop to force a component to reload.
 
-```typescript jsx
+```typescript
 // Inside your application component
 const [data, setData] = useState({});
 // This is used to force reloading Metabase components

docs/embedding/sdk/collections.md

@@ -12,17 +12,18 @@ You can embed Metabase's collection browser so that people can explore items in
 
 ## `CollectionBrowser` props
 
-| Prop               | Type                                                       | Description                                                                                                                                                                                                                                                                                                                                    |
-| ------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| collectionId       | `number`                                                   | The numerical ID of the collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in `http://localhost:3000/collection/1-my-collection` would be `1`. If no ID is provided, the collection browser will start at the root `Our analytics` collection, which is ID = 0. |
-| onClick            | `(item: CollectionItem) => void`                           | An optional click handler that emits the clicked entity.                                                                                                                                                                                                                                                                                       |
-| pageSize           | `number`                                                   | The number of items to display per page. The default is 25.                                                                                                                                                                                                                                                                                    |
-| visibleEntityTypes | `("question" \| "model" \| "dashboard" \| "collection")[]` | The types of entities that should be visible. If not provided, all entities will be shown.                                                                                                                                                                                                                                                     |
+| Prop               | Type                                               | Description                                                                                                                                                                                                                                                                                                                                    |
+| ------------------ | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| collectionId       | `number`                                           | The numerical ID of the collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in `http://localhost:3000/collection/1-my-collection` would be `1`. If no ID is provided, the collection browser will start at the root `Our analytics` collection, which is ID = 0. |
+| onClick            | `(item: CollectionItem) => void`                   | An optional click handler that emits the clicked entity.                                                                                                                                                                                                                                                                                       |
+| pageSize           | `number`                                           | The number of items to display per page. The default is 25.                                                                                                                                                                                                                                                                                    |
+| visibleEntityTypes | `["question", "model", "dashboard", "collection"]` | The types of entities that should be visible. If not provided, all entities will be shown.                                                                                                                                                                                                                                                     |
+
 ## Example embedding code with `CollectionBrowser`
 
 ```tsx
 import React from "react";
-import { CollectionBrowser } from "@metabase/embedding-sdk-react"
+import { CollectionBrowser } from "@metabase/embedding-sdk-react";
 
 export default function App() {
   const collectionId = 123; // This is the collection ID you want to browse

docs/embedding/sdk/dashboards.md

@@ -37,7 +37,7 @@ _\* Not available for `StaticDashboard`._
 
 ## Example embedded dashboard with `InteractiveDashboard` component
 
-```typescript jsx
+```typescript
 import React from "react";
 import {MetabaseProvider, InteractiveDashboard} from "@metabase/embedding-sdk-react";
 
@@ -72,7 +72,7 @@ This plugin allows you to add, remove, and modify the custom actions on the over
 
 The plugin's default configuration looks like this:
 
-```typescript jsx
+```typescript
 const plugins = {
   dashboard: {
     dashcardMenu: {
@@ -86,7 +86,7 @@ const plugins = {
 
 `dashcardMenu`: can be used in the InteractiveDashboard like this:
 
-```typescript jsx
+```typescript
 {% raw %}
 <InteractiveDashboard
   questionId={1}
@@ -103,7 +103,7 @@ const plugins = {
 
 To remove the download button from the dashcard menu, set `withDownloads` to `false`. To remove the edit link from the dashcard menu, set `withEditLink` to `false`.
 
-```typescript jsx
+```typescript
 const plugins = {
   dashboard: {
     dashcardMenu: {
@@ -119,7 +119,7 @@ const plugins = {
 
 You can add custom actions to the dashcard menu by adding an object to the `customItems` array. Each element can either be an object or a function that takes in the dashcard's question, and outputs a list of custom items in the form of:
 
-```typescript jsx
+```typescript
 {
     iconName: string;
     label: string;
@@ -130,7 +130,7 @@ You can add custom actions to the dashcard menu by adding an object to the `cust
 
 Here's an example:
 
-```typescript jsx
+```typescript
 const plugins: SdkPluginsConfig = {
   dashboard: {
     dashcardMenu: {
@@ -161,7 +161,7 @@ const plugins: SdkPluginsConfig = {
 
 If you want to replace the existing menu with your own component, you can do so by providing a function that returns a React component. This function also can receive the question as an argument.
 
-```typescript jsx
+```typescript
 const plugins: SdkPluginsConfig = {
   dashboard: {
     dashcardMenu: ({ question }) => (
@@ -177,7 +177,7 @@ Creating a dashboard could be done with `useCreateDashboardApi` hook or `CreateD
 
 ### Hook
 
-```typescript jsx
+```typescript
 const { createDashboard } = useCreateDashboardApi();
 
 const handleDashboardCreate = async () => {
@@ -199,7 +199,7 @@ Props:
 
 ### Component
 
-```typescript jsx
+```typescript
 const [dashboard, setDashboard] = useState<Dashboard | null>(null);
 
 if (dashboard) {

docs/embedding/sdk/introduction.md

@@ -18,16 +18,16 @@ To give you and idea of what's possible with the SDK, we've put together example
 
 ![Pug and play example app built with embedding SDK](../images/pug-and-play.png)
 
-# Embedding SDK prerequisites
+# Embedded analytics SDK prerequisites
 
 - React application. The SDK is tested to work with React 18 or higher, though it may work with earlier versions.
 - [Metabase Pro or Enterprise subscription or free trial](https://www.metabase.com/pricing/).
 - Metabase version 1.50 or higher.
 - [Node.js 18.x LTS](https://nodejs.org/en) or higher.
 
-## Embedding SDK on NPM
+## Embedded analytics SDK on NPM
 
-Check out the [Metabase embedding SDK on NPM: [metaba.se/sdk](https://metaba.se/sdk).
+Check out the Metabase Embedded analytics SDK on NPM: [metaba.se/sdk](https://metaba.se/sdk).
 
 ## Installation
 

docs/embedding/sdk/plugins.md

@@ -14,7 +14,7 @@ The Metabase Embedding SDK supports plugins to customize the behavior of compone
 
 To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsConfig` prop:
 
-```typescript jsx
+```typescript
 {% raw %}
 <MetabaseProvider
     config={config}
@@ -32,7 +32,7 @@ To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsCon
 
 To use a plugin on a per-component basis, pass the plugin as a prop to the component:
 
-```typescript jsx
+```typescript
 {% raw %}
 <InteractiveQuestion
     questionId={1}

docs/embedding/sdk/questions.md

@@ -21,7 +21,7 @@ You can embed a static question using the `StaticQuestion` component.
 
 The component has a default height, which can be customized by using the `height` prop. To inherit the height from the parent container, you can pass `100%` to the height prop.
 
-```typescript jsx
+```typescript
 import React from "react";
 import {MetabaseProvider, StaticQuestion} from "@metabase/embedding-sdk-react";
 
@@ -50,7 +50,7 @@ You can pass parameter values to questions defined with SQL via `parameterValues
 
 You can embed an interactive question using the `InteractiveQuestion` component.
 
-```typescript jsx
+```typescript
 import React from "react";
 import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
 
@@ -89,13 +89,13 @@ By default, the Embedded Analytics SDK provides a default layout for interactive
 
 Here's an example of using the `InteractiveQuestion` component with its default layout:
 
-```typescript jsx
+```typescript
 <InteractiveQuestion questionId={95} />
 ```
 
 To customize the layout, use namespaced components within the `InteractiveQuestion` component. For example:
 
-```typescript jsx
+```typescript
 {% raw %}
 <InteractiveQuestion questionId={95}>
   <div
@@ -160,7 +160,7 @@ This plugin allows you to add custom actions to
 the click-through menu of an interactive question. You can add and
 customize the appearance and behavior of the custom actions.
 
-```typescript jsx
+```typescript
 // You can provide a custom action with your own `onClick` logic.
 const createCustomAction = clicked => ({
   buttonType: "horizontal",