From 9fc298ba1ac55b7e6fb999124f3cda21bd4a1f9c Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sat, 30 Jul 2022 21:20:40 +0100
Subject: [PATCH] add multi select dropdown

---
 Common/Models/ApiKeyPermission.ts                          | 2 +-
 CommonUI/src/Components/Dropdown/Dropdown.tsx              | 2 ++
 CommonUI/src/Components/Forms/BasicForm.tsx                | 3 ++-
 CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts | 3 +--
 Dashboard/src/Pages/Settings/APIKeyView.tsx                | 5 +++--
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/Common/Models/ApiKeyPermission.ts b/Common/Models/ApiKeyPermission.ts
index 550881f86c..3822883bb3 100644
--- a/Common/Models/ApiKeyPermission.ts
+++ b/Common/Models/ApiKeyPermission.ts
@@ -290,7 +290,7 @@ export default class APIKeyPermission extends BaseModel {
             Permission.CanEditProjectApiKey,
         ],
     })
-    @TableColumn({ required: true, type: TableColumnType.Array })
+    @TableColumn({ required: false, type: TableColumnType.Array })
     @ManyToMany(() => {
         return Label;
     })
diff --git a/CommonUI/src/Components/Dropdown/Dropdown.tsx b/CommonUI/src/Components/Dropdown/Dropdown.tsx
index dd69ee4524..244d61b460 100644
--- a/CommonUI/src/Components/Dropdown/Dropdown.tsx
+++ b/CommonUI/src/Components/Dropdown/Dropdown.tsx
@@ -23,6 +23,7 @@ export interface ComponentProps {
     value?: string | undefined;
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
+    isMultiSelect?: boolean;
 }
 
 const Dropdown: FunctionComponent<ComponentProps> = (
@@ -68,6 +69,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
                 onBlur={() => {
                     props.onBlur && props.onBlur();
                 }}
+                isMulti={props.isMultiSelect}
                 value={selectedValue}
                 onFocus={() => {
                     props.onFocus && props.onFocus();
diff --git a/CommonUI/src/Components/Forms/BasicForm.tsx b/CommonUI/src/Components/Forms/BasicForm.tsx
index a583f4d39c..c092420173 100644
--- a/CommonUI/src/Components/Forms/BasicForm.tsx
+++ b/CommonUI/src/Components/Forms/BasicForm.tsx
@@ -147,7 +147,7 @@ const BasicForm: Function = <T extends Object>(
                     </Field>
                 )}
 
-                {field.fieldType === FormFieldSchemaType.Dropdown && (
+                {(field.fieldType === FormFieldSchemaType.Dropdown || field.fieldType === FormFieldSchemaType.MultiSelectDropdown) && (
                     <Field name={fieldName}>
                         {({ form }: any) => {
                             return (
@@ -167,6 +167,7 @@ const BasicForm: Function = <T extends Object>(
                                             true
                                         );
                                     }}
+                                    isMultiSelect={field.fieldType === FormFieldSchemaType.MultiSelectDropdown}
                                     options={field.dropdownOptions || []}
                                     placeholder={field.placeholder || ''}
                                     initialValue={
diff --git a/CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts b/CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts
index 1ac825b209..95f51d00ac 100644
--- a/CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts
+++ b/CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts
@@ -13,8 +13,7 @@ enum FormFieldSchemaType {
     LongText,
     Color,
     Dropdown,
-    MultiSelectDropdown, 
-    MultiSelectModelDropdown, 
+    MultiSelectDropdown,
 }
 
 export default FormFieldSchemaType;
diff --git a/Dashboard/src/Pages/Settings/APIKeyView.tsx b/Dashboard/src/Pages/Settings/APIKeyView.tsx
index e543a70305..85af8cdf7e 100644
--- a/Dashboard/src/Pages/Settings/APIKeyView.tsx
+++ b/Dashboard/src/Pages/Settings/APIKeyView.tsx
@@ -111,8 +111,9 @@ const APIKeyView: FunctionComponent<PageComponentProps> = (
                         field: {
                             labels: true,
                         },
-                        title: 'Labels',
-                        fieldType: FormFieldSchemaType.MultiSelectModelDropdown,
+                        title: 'Labels (Optional)',
+                        description: 'Labels on which this permissions will apply on. This is optional and an advanced feature.',
+                        fieldType: FormFieldSchemaType.MultiSelectDropdown,
                         dropdownModal: {
                             type: Label,
                             labelField: "name",