Merge branch 'master' into enableSOC2Check

dashboard/package.json

@@ -102,7 +102,7 @@
     "@babel/preset-typescript": "^7.15.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@porter-dev/api-contracts": "^0.2.71",
+    "@porter-dev/api-contracts": "^0.2.81",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

dashboard/src/lib/addons/index.ts

@@ -8,9 +8,10 @@ import { z } from "zod";
 import { serviceStringValidator } from "lib/porter-apps/values";
 
 import { defaultPostgresAddon, postgresConfigValidator } from "./postgres";
+import { redisConfigValidator } from "./redis";
 
 export const clientAddonValidator = z.object({
-  expanded: z.boolean().default(true),
+  expanded: z.boolean().default(false),
   canDelete: z.boolean().default(true),
   name: z.object({
     readOnly: z.boolean(),
@@ -23,20 +24,40 @@ export const clientAddonValidator = z.object({
       }),
   }),
   envGroups: z.array(serviceStringValidator).default([]),
-  config: z.discriminatedUnion("type", [postgresConfigValidator]),
+  config: z.discriminatedUnion("type", [
+    postgresConfigValidator,
+    redisConfigValidator,
+  ]),
 });
 export type ClientAddon = z.infer<typeof clientAddonValidator>;
 
-export function defaultClientAddon(): ClientAddon {
-  return clientAddonValidator.parse({
-    name: { readOnly: false, value: "addon" },
-    config: defaultPostgresAddon(),
-  });
+export function defaultClientAddon(
+  type: ClientAddon["config"]["type"]
+): ClientAddon {
+  return match(type)
+    .with("postgres", () =>
+      clientAddonValidator.parse({
+        expanded: true,
+        name: { readOnly: false, value: "addon" },
+        config: defaultPostgresAddon(),
+      })
+    )
+    .with("redis", () =>
+      clientAddonValidator.parse({
+        expanded: true,
+        name: { readOnly: false, value: "addon" },
+        config: redisConfigValidator.parse({
+          type: "redis",
+        }),
+      })
+    )
+    .exhaustive();
 }
 
 function addonTypeEnumProto(type: ClientAddon["config"]["type"]): AddonType {
   return match(type)
     .with("postgres", () => AddonType.POSTGRES)
+    .with("redis", () => AddonType.REDIS)
     .exhaustive();
 }
 
@@ -50,6 +71,14 @@ export function clientAddonToProto(addon: ClientAddon): Addon {
       },
       case: "postgres" as const,
     }))
+    .with({ type: "redis" }, (data) => ({
+      value: {
+        cpuCores: data.cpuCores.value,
+        ramMegabytes: data.ramMegabytes.value,
+        storageGigabytes: data.storageGigabytes.value,
+      },
+      case: "redis" as const,
+    }))
     .exhaustive();
 
   const proto = new Addon({
@@ -95,6 +124,22 @@ export function clientAddonFromProto({
       username: variables.POSTGRESQL_USERNAME,
       password: secrets.POSTGRESQL_PASSWORD,
     }))
+    .with({ case: "redis" }, (data) => ({
+      type: "redis" as const,
+      cpuCores: {
+        readOnly: false,
+        value: data.value.cpuCores,
+      },
+      ramMegabytes: {
+        readOnly: false,
+        value: data.value.ramMegabytes,
+      },
+      storageGigabytes: {
+        readOnly: false,
+        value: data.value.storageGigabytes,
+      },
+      password: secrets.REDIS_PASSWORD,
+    }))
     .exhaustive();
 
   const clientAddon = clientAddonValidator.parse({

dashboard/src/lib/addons/redis.ts

@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+import { serviceNumberValidator } from "lib/porter-apps/values";
+
+export const redisConfigValidator = z.object({
+  type: z.literal("redis"),
+  cpuCores: serviceNumberValidator.default({
+    value: 0.5,
+    readOnly: false,
+  }),
+  ramMegabytes: serviceNumberValidator.default({
+    value: 512,
+    readOnly: false,
+  }),
+  storageGigabytes: serviceNumberValidator.default({
+    value: 1,
+    readOnly: false,
+  }),
+  password: z.string().default("redis"),
+});
+export type RedisConfig = z.infer<typeof redisConfigValidator>;
+
+export function defaultRedisAddon(): RedisConfig {
+  return redisConfigValidator.parse({
+    type: "redis",
+  });
+}

dashboard/src/main/home/app-dashboard/apps/Addon.tsx

@@ -12,6 +12,7 @@ import { type ClientAddon } from "lib/addons";
 import { useDeploymentTarget } from "shared/DeploymentTargetContext";
 import copy from "assets/copy-left.svg";
 import postgresql from "assets/postgresql.svg";
+import redis from "assets/redis.svg";
 
 import { Block, Row } from "./AppGrid";
 
@@ -27,15 +28,26 @@ export const Addon: React.FC<AddonProps> = ({ addon, view }) => {
     if (!currentDeploymentTarget) return "";
     if (!addon.name.value) return "";
 
-    return `${addon.name.value}-postgres.${currentDeploymentTarget.namespace}.svc.cluster.local:5432`;
+    const port = match(addon.config.type)
+      .with("postgres", () => 5432)
+      .with("redis", () => 6379)
+      .exhaustive();
+
+    return `${addon.name.value}-${addon.config.type}.${currentDeploymentTarget.namespace}.svc.cluster.local:${port}`;
   }, [currentDeploymentTarget, addon.name.value]);
 
+  const renderIcon = (type: ClientAddon["config"]["type"]): JSX.Element =>
+    match(type)
+      .with("postgres", () => <Icon height="16px" src={postgresql} />)
+      .with("redis", () => <Icon height="16px" src={redis} />)
+      .exhaustive();
+
   return match(view)
     .with("grid", () => (
       <Block locked>
         <Container row>
           <Spacer inline width="1px" />
-          <Icon height="16px" src={postgresql} />
+          {renderIcon(addon.config.type)}
           <Spacer inline width="12px" />
           <Text size={14}>{addon.name.value}</Text>
           <Spacer inline x={2} />
@@ -60,7 +72,7 @@ export const Addon: React.FC<AddonProps> = ({ addon, view }) => {
       <Row locked>
         <Container row>
           <Spacer inline width="1px" />
-          <Icon height="16px" src={postgresql} />
+          {renderIcon(addon.config.type)}
           <Spacer inline width="12px" />
           <Text size={14}>{addon.name.value}</Text>
           <Spacer inline x={1} />

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/PreviewAppDataContainer.tsx

@@ -189,16 +189,22 @@ export const PreviewAppDataContainer: React.FC<Props> = ({
       setValidatedAppProto(proto);
 
       const addons = data.addons.map((addon) => {
-        const variables = match(addon.config.type)
-          .with("postgres", () => ({
-            POSTGRESQL_USERNAME: addon.config.username,
+        const variables = match(addon.config)
+          .with({ type: "postgres" }, (conf) => ({
+            POSTGRESQL_USERNAME: conf.username,
           }))
-          .otherwise(() => ({}));
-        const secrets = match(addon.config.type)
-          .with("postgres", () => ({
-            POSTGRESQL_PASSWORD: addon.config.password,
+          .with({ type: "redis" }, (conf) => ({
+            REDIS_PASSWORD: conf.password,
           }))
-          .otherwise(() => ({}));
+          .exhaustive();
+        const secrets = match(addon.config)
+          .with({ type: "postgres" }, (conf) => ({
+            POSTGRESQL_PASSWORD: conf.password,
+          }))
+          .with({ type: "redis" }, (conf) => ({
+            REDIS_PASSWORD: conf.password,
+          }))
+          .exhaustive();
 
         const proto = clientAddonToProto(addon);
 

dashboard/src/main/home/managed-addons/AddonListRow.tsx

@@ -4,12 +4,15 @@ import { type UseFieldArrayUpdate } from "react-hook-form";
 import styled from "styled-components";
 import { match } from "ts-pattern";
 
+import Spacer from "components/porter/Spacer";
 import { type ClientAddon } from "lib/addons";
 
 import postgresql from "assets/postgresql.svg";
+import redis from "assets/redis.svg";
 
 import { type AppTemplateFormData } from "../cluster-dashboard/preview-environments/v2/setup-app/PreviewAppDataContainer";
 import { PostgresTabs } from "./tabs/PostgresTabs";
+import { RedisTabs } from "./tabs/RedisTabs";
 
 type AddonRowProps = {
   index: number;
@@ -24,7 +27,11 @@ export const AddonListRow: React.FC<AddonRowProps> = ({
   update,
   remove,
 }) => {
-  const renderIcon = (): JSX.Element => <Icon src={postgresql} />;
+  const renderIcon = (type: ClientAddon["config"]["type"]): JSX.Element =>
+    match(type)
+      .with("postgres", () => <Icon src={postgresql} />)
+      .with("redis", () => <Icon src={redis} />)
+      .exhaustive();
 
   return (
     <>
@@ -42,7 +49,7 @@ export const AddonListRow: React.FC<AddonRowProps> = ({
           <ActionButton>
             <span className="material-icons dropdown">arrow_drop_down</span>
           </ActionButton>
-          {renderIcon()}
+          {renderIcon(addon.config.type)}
           {addon.name.value.trim().length > 0 ? addon.name.value : "New Addon"}
         </AddonTitle>
 
@@ -84,15 +91,19 @@ export const AddonListRow: React.FC<AddonRowProps> = ({
                 border: "1px solid #494b4f",
               }}
             >
-              {match(addon.config.type)
-                .with("postgres", () => (
-                  <PostgresTabs index={index} addon={addon} />
+              {match(addon)
+                .with({ config: { type: "postgres" } }, (ao) => (
+                  <PostgresTabs index={index} addon={ao} />
+                ))
+                .with({ config: { type: "redis" } }, (ao) => (
+                  <RedisTabs index={index} addon={ao} />
                 ))
                 .exhaustive()}
             </div>
           </StyledSourceBox>
         )}
       </AnimatePresence>
+      <Spacer y={0.5} />
     </>
   );
 };

dashboard/src/main/home/managed-addons/AddonsList.tsx

@@ -21,6 +21,7 @@ import { type AppTemplateFormData } from "main/home/cluster-dashboard/preview-en
 import { defaultClientAddon } from "lib/addons";
 
 import postgresql from "assets/postgresql.svg";
+import redis from "assets/redis.svg";
 
 import { AddonListRow } from "./AddonListRow";
 
@@ -32,7 +33,7 @@ const addAddonFormValidator = z.object({
     .regex(/^[a-z0-9-]+$/, {
       message: 'Lowercase letters, numbers, and " - " only.',
     }),
-  type: z.enum(["postgres"]),
+  type: z.enum(["postgres", "redis"]),
 });
 type AddAddonFormValues = z.infer<typeof addAddonFormValidator>;
 
@@ -80,7 +81,7 @@ export const AddonsList: React.FC = () => {
   }, [fields]);
 
   const onSubmit = handleSubmit((data) => {
-    const baseAddon = defaultClientAddon();
+    const baseAddon = defaultClientAddon(data.type);
     append({
       ...baseAddon,
       name: {
@@ -106,19 +107,15 @@ export const AddonsList: React.FC = () => {
           />
         ))}
       </AddonsContainer>
-      {fields.length === 0 && (
-        <>
-          <AddAddonButton
-            onClick={() => {
-              setShowAddAddonModal(true);
-            }}
-          >
-            <I className="material-icons add-icon">add</I>
-            Include add-on in preview environments
-          </AddAddonButton>
-          <Spacer y={0.5} />
-        </>
-      )}
+      <AddAddonButton
+        onClick={() => {
+          setShowAddAddonModal(true);
+        }}
+      >
+        <I className="material-icons add-icon">add</I>
+        Include add-on in preview environments
+      </AddAddonButton>
+      <Spacer y={0.5} />
       {showAddAddonModal && (
         <Modal
           closeModal={() => {
@@ -134,6 +131,7 @@ export const AddonsList: React.FC = () => {
             <AddonIcon>
               {match(addonType)
                 .with("postgres", () => <img src={postgresql} />)
+                .with("redis", () => <img src={redis} />)
                 .exhaustive()}
             </AddonIcon>
             <Controller
@@ -146,7 +144,10 @@ export const AddonsList: React.FC = () => {
                   setValue={(value: string) => {
                     onChange(value);
                   }}
-                  options={[{ label: "Postgres", value: "postgres" }]}
+                  options={[
+                    { label: "Postgres", value: "postgres" },
+                    { label: "Redis", value: "redis" },
+                  ]}
                 />
               )}
             />