chore(playground): Minor improvements to the playground

- Make vite plugin for certificates optional
- Make it easier to ignore changes in the playground
- Include internal css for semantic search package

examples/playground/.env.template

@@ -2,3 +2,4 @@ VITE_BACKEND_URL=https://staging.dev-latest.stg11.panther.intgdc.com
 VITE_TIGER_API_TOKEN=
 VITE_WORKSPACE=
 VITE_DASHBOARD=
+VITE_MKCERT=true

examples/playground/README.md

@@ -7,8 +7,22 @@ Because the playground is part of the monorepo, all the SDK dependencies are lin
 You can then benefit from a very convenient experience such as:
 
 1.  Start the playground in dev mode - `npm run dev`
-2.  Add your own component into the playground, this component exercises let's say contents of `@gooddata/sdk-ui-dashboard`
-3.  Edit any file in the repository and it will be immediately reflected in the playground with hot reload.
+2.  Edit [`src/playground/Playground.tsx`](./src/playground/Playground.tsx) to include your component under development.
+3.  Edit any file in the repository, and it will be immediately reflected in the playground with hot reload.
+
+## Making Git ignore changes in the playground
+
+The `src/playground` folder is excluded through [`.gitignore`](.gitignore),
+and `Playground.tsx` file was force-added back to git.
+
+Any new files you're creating in the `src/playground` should be ignored by default.
+
+In order to ignore changes in the `Playground.tsx` file itself, you can run the following command:
+
+```bash
+cd examples/playground
+git update-index --skip-worktree src/playground/Playground.tsx
+```
 
 ## Set environment variables
 
@@ -20,4 +34,8 @@ VITE_BACKEND_URL=<your-backend-url>
 VITE_TIGER_API_TOKEN=<your-token>
 VITE_WORKSPACE=<your-workspace>
 VITE_DASHBOARD=<your-dashboard>
+VITE_MKCERT=false
 ```
+
+`VITE_MKCERT` is a flag that tells the playground to use a self-signed certificate. `vite-plugin-mkcert` plugin
+requires `sudo` privileges to create a certificate on UNIX systems. If you don't want to use it, set the flag to `false`.

examples/playground/src/App.tsx

@@ -1,15 +1,13 @@
 // (C) 2019-2024 GoodData Corporation
 import React, { useMemo } from "react";
 import { BackendProvider, WorkspaceProvider } from "@gooddata/sdk-ui";
-import { Dashboard } from "@gooddata/sdk-ui-dashboard";
 import { createBackend } from "./createBackend.js";
+import { Playground } from "./playground/Playground.js";
 
 function hasCredentialsSetup(): boolean {
     return !!import.meta.env.VITE_TIGER_API_TOKEN;
 }
 
-const dashboard = import.meta.env.VITE_DASHBOARD;
-
 const AppWithBackend: React.FC = () => {
     // only create the backend instance once
     const backend = useMemo(() => {
@@ -19,15 +17,7 @@ const AppWithBackend: React.FC = () => {
     return (
         <BackendProvider backend={backend}>
             <WorkspaceProvider workspace={import.meta.env.VITE_WORKSPACE}>
-                {/* Build your playground components under the playground directory.*/}
-                {dashboard ? (
-                    <Dashboard
-                        dashboard={dashboard}
-                        config={{
-                            initialRenderMode: "view",
-                        }}
-                    />
-                ) : undefined}
+                <Playground />
             </WorkspaceProvider>
         </BackendProvider>
     );
@@ -38,8 +28,7 @@ export const App: React.FC = () => {
         return (
             <p>
                 Your playground is not setup with credentials. Check out the README.md for more. TL;DR: point
-                the playground against the public access proxy or set GDC_USERNAME and GDC_PASSWORD or
-                TIGER_API_TOKEN in the .env file.
+                the playground against the public access proxy or set TIGER_API_TOKEN in the .env file.
             </p>
         );
     }

examples/playground/src/index.tsx

@@ -10,7 +10,7 @@ import "@gooddata/sdk-ui-pivot/styles/scss/main.scss";
 import "@gooddata/sdk-ui-kit/styles/scss/main.scss";
 import "@gooddata/sdk-ui-ext/styles/scss/main.scss";
 import "@gooddata/sdk-ui-dashboard/styles/scss/main.scss";
-import "@gooddata/sdk-ui-semantic-search/styles/scss/main.scss";
+import "@gooddata/sdk-ui-semantic-search/styles/scss/internal.scss";
 import "@gooddata/sdk-ui-gen-ai/styles/scss/main.scss";
 
 import { App } from "./App.js";

examples/playground/src/playground/Playground.tsx

@@ -0,0 +1,19 @@
+// (C) 2024 GoodData Corporation
+
+import * as React from "react";
+import { Dashboard } from "@gooddata/sdk-ui-dashboard";
+
+const dashboard = import.meta.env.VITE_DASHBOARD;
+
+export const Playground: React.FC = () => {
+    if (!dashboard) return null;
+
+    return (
+        <Dashboard
+            dashboard={dashboard}
+            config={{
+                initialRenderMode: "view",
+            }}
+        />
+    );
+};

examples/playground/vite.config.ts

@@ -2,7 +2,7 @@
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import mkcert from "vite-plugin-mkcert";
-import path from "path";
+import * as path from "path";
 
 const packagesWithoutStyles = [
     "@gooddata/sdk-model",
@@ -48,7 +48,7 @@ export default defineConfig(({ mode }) => {
     const backendUrl = env.VITE_BACKEND_URL ?? "https://staging.dev-latest.stg11.panther.intgdc.com";
 
     return {
-        plugins: [react(), mkcert()],
+        plugins: [react(), env.VITE_MKCERT === "true" && mkcert()].filter(Boolean),
         optimizeDeps: {
             exclude: [...packagesWithoutStyles, ...packagesWithStyles],
         },