From a7125fe6957f1eb77c9e5029638c8180d5d099df Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Sun, 27 Nov 2022 21:32:03 +0400
Subject: [PATCH] [release-fix] Fix adding new prop (#531)

- [x] - New property creation was broken
- [x] - Switch on `tag` was seriosly broken

<img width="403" alt="image"
src="https://user-images.githubusercontent.com/5077042/204138926-2ca2e13c-6e46-4ca1-9233-ffdc6475dad8.png">
---
 .../designer/features/props-panel/control.tsx | 20 ++++++++++---------
 .../props-panel/props-panel.stories.tsx       |  2 +-
 .../features/props-panel/props-panel.tsx      |  5 +++--
 .../features/props-panel/use-props-logic.ts   |  7 +++----
 packages/react-sdk/src/components/meta.ts     |  2 +-
 5 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/apps/designer/app/designer/features/props-panel/control.tsx b/apps/designer/app/designer/features/props-panel/control.tsx
index 3afc5c281b..7fe07995a4 100644
--- a/apps/designer/app/designer/features/props-panel/control.tsx
+++ b/apps/designer/app/designer/features/props-panel/control.tsx
@@ -183,10 +183,12 @@ export function Control({
   onChangePropValue,
 }: ControlProps) {
   const meta = getComponentMetaProps(component);
-  const argType = meta[userProp.prop as keyof typeof meta];
 
-  const defaultValue = argType.defaultValue;
-  const type = argType.type;
+  const argType = meta[userProp.prop];
+
+  // argType can be undefined in case of new property created
+  const defaultValue = argType?.defaultValue ?? "";
+  const type = argType?.type ?? "text";
 
   if (type == null) {
     warnOnce(
@@ -239,12 +241,12 @@ export function Control({
   }
 
   if (
-    argType.type === "radio" ||
-    argType.type === "inline-radio" ||
-    argType.type === "check" ||
-    argType.type === "inline-check" ||
-    argType.type === "multi-select" ||
-    argType.type === "select"
+    argType?.type === "radio" ||
+    argType?.type === "inline-radio" ||
+    argType?.type === "check" ||
+    argType?.type === "inline-check" ||
+    argType?.type === "multi-select" ||
+    argType?.type === "select"
   ) {
     const options = argType.options;
 
diff --git a/apps/designer/app/designer/features/props-panel/props-panel.stories.tsx b/apps/designer/app/designer/features/props-panel/props-panel.stories.tsx
index 4160b4f109..8e76e5fc89 100644
--- a/apps/designer/app/designer/features/props-panel/props-panel.stories.tsx
+++ b/apps/designer/app/designer/features/props-panel/props-panel.stories.tsx
@@ -81,7 +81,7 @@ export const AllProps: ComponentStoryObj<typeof PropsPanel> = {
           return {
             id: prop,
             prop,
-            value: value.defaultValue,
+            value: value?.defaultValue ?? "",
           } as UserProp;
         }),
       },
diff --git a/apps/designer/app/designer/features/props-panel/props-panel.tsx b/apps/designer/app/designer/features/props-panel/props-panel.tsx
index ff1f55d2fa..a19b01f331 100644
--- a/apps/designer/app/designer/features/props-panel/props-panel.tsx
+++ b/apps/designer/app/designer/features/props-panel/props-panel.tsx
@@ -142,7 +142,8 @@ const Property = ({
             const argType = meta[name as keyof typeof meta];
 
             const defaultValue =
-              argType?.defaultValue ?? argType?.type === "boolean" ? false : "";
+              argType?.defaultValue ??
+              (argType?.type === "boolean" ? false : "");
 
             onChangePropName(name, defaultValue);
           }
@@ -151,7 +152,7 @@ const Property = ({
           const argType = meta[name as keyof typeof meta];
 
           const defaultValue =
-            argType?.defaultValue ?? argType?.type === "boolean" ? false : "";
+            argType?.defaultValue ?? (argType?.type === "boolean" ? false : "");
 
           onChangePropName(name, defaultValue);
         }}
diff --git a/apps/designer/app/designer/features/props-panel/use-props-logic.ts b/apps/designer/app/designer/features/props-panel/use-props-logic.ts
index f234c868f7..9c36ae6976 100644
--- a/apps/designer/app/designer/features/props-panel/use-props-logic.ts
+++ b/apps/designer/app/designer/features/props-panel/use-props-logic.ts
@@ -39,7 +39,7 @@ const getRequiredProps = (
   const { component } = selectedInstanceData;
   const meta = getComponentMetaProps(component);
   return Object.entries(meta)
-    .filter(([_, value]) => value.required)
+    .filter(([_, value]) => value?.required)
     .map(([prop, _]) => ({
       id: ObjectId().toString(),
       prop,
@@ -56,10 +56,9 @@ const getPropsWithDefaultValue = (
   const { component } = selectedInstanceData;
   const meta = getComponentMetaProps(component);
   return Object.entries(meta)
-    .filter(([_, value]) => value.defaultValue != null)
+    .filter(([_, value]) => value?.defaultValue != null)
     .map(([prop, propObj]) => {
-      const { defaultValue } = propObj;
-      const value = defaultValue ?? "";
+      const value = propObj?.defaultValue ?? "";
       return {
         id: ObjectId().toString(),
         prop,
diff --git a/packages/react-sdk/src/components/meta.ts b/packages/react-sdk/src/components/meta.ts
index 1d29bea886..999f85ccff 100644
--- a/packages/react-sdk/src/components/meta.ts
+++ b/packages/react-sdk/src/components/meta.ts
@@ -58,7 +58,7 @@ type MetaProp =
       options: string[];
     };
 
-type MetaProps = Record<string, MetaProp>;
+type MetaProps = { [p in string]?: MetaProp };
 
 export const getComponentMetaProps = (name: keyof typeof meta): MetaProps => {
   return meta[name] as MetaProps;