Add database chooser options

layouts/shortcodes/choosable.html

@@ -15,5 +15,5 @@
 
 
 <div>
-    <pulumi-choosable type="{{ $type }}" values="{{ $values }}" mode="{{ $mode }}">{{ .Inner }}</pulumi-choosable>
+    <pulumi-choosable type="{{ $type }}" values="{{ $values }}" mode="{{ $mode }}">{{ .Inner | markdownify }}</pulumi-choosable>
 </div>

theme/stencil/src/components/choosable/choosable.tsx

@@ -72,7 +72,7 @@ export class Choosable {
             // @ts-ignore-next-line
             this.storeUnsubscribe = store.mapStateToProps(this, (state: AppState) => {
                 const {
-                    preferences: { language, k8sLanguage, os, cloud, persona, backend },
+                    preferences: { language, k8sLanguage, os, cloud, persona, backend, database },
                 } = state;
 
                 switch (this.type) {
@@ -88,6 +88,8 @@ export class Choosable {
                         return { selection: persona };
                     case "backend":
                         return { selection: backend };
+                    case "database":
+                        return { selection: database };
                 }
             });
         }

theme/stencil/src/components/chooser/chooser.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Host, h, Listen, Prop, State } from "@stencil/core";
 import { store, Unsubscribe } from "@stencil/redux";
 import { AppState } from "../../store/state";
-import { setLanguage, setK8sLanguage, setOS, setCloud, setPersona, setBackEnd } from "../../store/actions/preferences";
+import { setLanguage, setK8sLanguage, setOS, setCloud, setPersona, setBackEnd, setDatabase } from "../../store/actions/preferences";
 
 export type LanguageKey = "javascript" | "typescript" | "python" | "go" | "csharp" | "fsharp" | "visualbasic" | "java" | "yaml";
 export type K8sLanguageKey = "typescript" | "yaml" | "typescript-kx";
@@ -12,9 +12,10 @@ export type BackEndKey = "service" | "self-managed";
 
 export type ChooserMode = "local" | "global";
 export type ChooserOptionStyle = "tabbed" | "none";
-export type ChooserType = "language" | "k8s-language" | "os" | "cloud" | "persona" | "backend";
-export type ChooserKey = LanguageKey | K8sLanguageKey | OSKey | CloudKey | PersonaKey | BackEndKey;
-export type ChooserOption = SupportedLanguage | SupportedK8sLanguage | SupportedOS | SupportedCloud | SupportedPersona | SupportedBackEnd;
+export type DatabaseKey = "mysql" | "postgresql" | "snowflake";
+export type ChooserType = "language" | "k8s-language" | "os" | "cloud" | "persona" | "backend" | "database";
+export type ChooserKey = LanguageKey | K8sLanguageKey | OSKey | CloudKey | PersonaKey | BackEndKey | DatabaseKey;
+export type ChooserOption = SupportedLanguage | SupportedK8sLanguage | SupportedOS | SupportedCloud | SupportedPersona | SupportedBackEnd | SupportedDatabase;
 
 export interface SupportedLanguage {
     key: LanguageKey;
@@ -53,6 +54,12 @@ interface SupportedBackEnd {
     preview: boolean;
 }
 
+interface SupportedDatabase {
+    key: DatabaseKey;
+    name: string;
+    preview: boolean;
+}
+
 export interface Choice {
     type: ChooserType;
     value: ChooserOption;
@@ -123,6 +130,7 @@ export class Chooser {
     setCloud: typeof setCloud;
     setPersona: typeof setPersona;
     setBackEnd: typeof setBackEnd;
+    setDatabase: typeof setDatabase;
 
     componentWillLoad() {
         // Translate the set of options provided into choices.
@@ -158,12 +166,13 @@ export class Chooser {
             setCloud,
             setPersona,
             setBackEnd,
+            setDatabase,
         });
 
         // Map currently selected values from the store, so we can use them in this component.
         this.storeUnsubscribe = store.mapStateToProps(this, (state: AppState) => {
             const {
-                preferences: { language, k8sLanguage, os, cloud, persona, backend },
+                preferences: { language, k8sLanguage, os, cloud, persona, backend, database },
             } = state;
 
             // In some cases, the user's preferred (i.e., most recently selected) choice
@@ -208,6 +217,8 @@ export class Chooser {
                     return preferredOrDefault(persona);
                 case "backend":
                     return preferredOrDefault(backend);
+                case "database":
+                    return preferredOrDefault(database);
                 default:
                     return {};
             }
@@ -284,6 +295,9 @@ export class Chooser {
             case "backend":
                 options = this.supportedBackEnds;
                 break;
+            case "database":
+                options = this.supportedDatabases;
+                break;
         }
 
         this.currentOptions = options.filter(opt => keys.includes(opt.key));
@@ -322,6 +336,7 @@ export class Chooser {
     private setChoice(type: ChooserType, choice: ChooserOption) {
         const key = choice.key;
         this.selection = key;
+        console.log(`Setting choice: type=${type}, key=${key}`);
 
         if (this.mode !== "local") {
             switch (type) {
@@ -343,6 +358,9 @@ export class Chooser {
                 case "backend":
                     this.setBackEnd(key as BackEndKey);
                     break;
+                case "database":
+                    this.setDatabase(key as DatabaseKey);
+                    break;
             }
         }
     }
@@ -529,4 +547,23 @@ export class Chooser {
             preview: false,
         },
     ];
+
+    // The list of supported databases.
+    private supportedDatabases: SupportedDatabase[] = [
+        {
+            key: "mysql",
+            name: "MySQL",
+            preview: false,
+        },
+        {
+            key: "postgresql",
+            name: "PostgreSQL",
+            preview: false,
+        },
+        {
+            key: "snowflake",
+            name: "Snowflake",
+            preview: false,
+        },
+    ];
 }

theme/stencil/src/store/actions/index.ts

@@ -1,4 +1,4 @@
-import { SetLanguage, SetK8sLanguage, SetOS, SetCloud, SetPersona, SetBackEnd } from "./preferences";
+import { SetLanguage, SetK8sLanguage, SetOS, SetCloud, SetPersona, SetBackEnd, SetDatabase } from "./preferences";
 import { DismissBanner } from "./banners";
 import { GetUser } from "./user";
 
@@ -11,6 +11,7 @@ export enum TypeKeys {
     SET_CLOUD = "SET_CLOUD",
     SET_PERSONA = "SET_PERSONA",
     SET_BACKEND = "SET_BACKEND",
+    SET_DATABASE = "SET_DATABASE",
 
     // Banner-related action types.
     DISMISS_BANNER = "DISMISS_BANNER",
@@ -19,6 +20,6 @@ export enum TypeKeys {
     GET_USER_INFO = "GET_USER_INFO",
 }
 
-export type PreferencesAction = SetLanguage | SetK8sLanguage | SetOS | SetCloud | SetPersona | SetBackEnd;
+export type PreferencesAction = SetLanguage | SetK8sLanguage | SetOS | SetCloud | SetPersona | SetBackEnd | SetDatabase;
 export type BannersAction = DismissBanner;
 export type UserAction = GetUser;

theme/stencil/src/store/actions/preferences.ts

@@ -1,5 +1,5 @@
 import { TypeKeys } from "./index";
-import { LanguageKey, K8sLanguageKey, OSKey, CloudKey, PersonaKey, BackEndKey } from "../../components/chooser/chooser";
+import { LanguageKey, K8sLanguageKey, OSKey, CloudKey, PersonaKey, BackEndKey, DatabaseKey } from "../../components/chooser/chooser";
 
 export interface SetLanguage {
     type: TypeKeys.SET_LANGUAGE;
@@ -31,6 +31,11 @@ export interface SetBackEnd {
     key: BackEndKey;
 }
 
+export interface SetDatabase {
+    type: TypeKeys.SET_DATABASE;
+    key: DatabaseKey;
+}
+
 const dispatchAction = <T>(action: T) => (dispatch, _getState) => dispatch(action);
 
 // Set the currently selected language.
@@ -68,3 +73,9 @@ export const setBackEnd = (key: BackEndKey) => dispatchAction<SetBackEnd>({
     key,
     type: TypeKeys.SET_BACKEND,
 });
+
+// Set the currently selected database type.
+export const setDatabase = (key: DatabaseKey) => dispatchAction<SetDatabase>({
+    key,
+    type: TypeKeys.SET_DATABASE,
+});

theme/stencil/src/store/index.ts

@@ -83,7 +83,8 @@ export function normalizeState(persistedState: any): Partial<AppState> {
                 cloud: persistedState.preferences.cloud || "aws",
                 k8sLanguage: persistedState.preferences.k8sLanguage || "typescript",
                 persona: persistedState.preferences.persona || "developer",
-                backend: persistedState.backend || "service",
+                backend: persistedState.preferences.backend || "service",
+                database: persistedState.preferences.database || "mysql",
             };
         }
     } catch (e) {

theme/stencil/src/store/reducers/preferences.ts

@@ -11,6 +11,7 @@ const getInitialState = (): PreferencesState => {
         os: guessOS(),
         cloud: "aws",
         backend: "service",
+        database: "mysql",
     };
 };
 
@@ -45,6 +46,8 @@ export const preferences = (currentState = getInitialState(), action: Preference
             return { ...currentState, persona: action.key };
         case TypeKeys.SET_BACKEND:
             return { ...currentState, backend: action.key };
+        case TypeKeys.SET_DATABASE:
+            return { ...currentState, database: action.key };
         default:
             return currentState;
     }

theme/stencil/src/store/state.d.ts

@@ -1,4 +1,4 @@
-import { LanguageKey, K8sLanguageKey, OSKey, CloudKey, PersonaKey, BackEndKey } from "../components/chooser/chooser";
+import { LanguageKey, K8sLanguageKey, OSKey, CloudKey, PersonaKey, BackEndKey, DatabaseKey } from "../components/chooser/chooser";
 
 // PreferencesState tracks settings like preferred language, cloud and operating system.
 // Values tracked in this state slice persist between pages and reloads.
@@ -9,6 +9,7 @@ export interface PreferencesState {
     cloud: CloudKey;
     persona: PersonaKey;
     backend: BackEndKey;
+    database: DatabaseKey;
 }
 
 export interface Banner {