Merge pull request #7164 from DilshanSenarath/issue-21689

Onboard Slack and Zoom SSO templates

.changeset/witty-shoes-fly.md

@@ -0,0 +1,8 @@
+---
+"@wso2is/admin.template-core.v1": minor
+"@wso2is/admin.applications.v1": patch
+"@wso2is/console": patch
+"@wso2is/form": patch
+---
+
+Onboard Slack and Zoom SSO templates

features/admin.template-core.v1/components/form-dynamic-field.scss

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+ .dynamic-template-selection-field {
+    .oxygen-form-control {
+        margin-top: 0;
+        margin-bottom: 0;
+
+        .oxygen-input-label {
+            margin-top: 0;
+            margin-left: 0;
+            position: relative;
+            transform: unset;
+            -webkit-transform: unset;
+        }
+
+        .oxygen-select {
+            margin-top: 8px;
+            margin-bottom: 4px;
+        }
+
+        .oxygen-form-helper-text {
+            margin-top: 3px;
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+ }
+
+ .dynamic-template-selection-field-dropdown {
+    &.MuiPopover-root {
+        z-index: 1500;
+        filter: unset !important;
+    }
+ }

features/admin.template-core.v1/components/form-dynamic-field.tsx

@@ -18,15 +18,24 @@
 
 import { getCertificateIllustrations } from "@wso2is/admin.core.v1";
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
-import { CheckboxFieldAdapter, FilePickerAdapter, FinalFormField, FormApi, TextFieldAdapter } from "@wso2is/form";
+import {
+    CheckboxFieldAdapter,
+    FilePickerAdapter,
+    FinalFormField,
+    FormApi,
+    SelectFieldAdapter,
+    TextFieldAdapter
+} from "@wso2is/form";
 import { Hint } from "@wso2is/react-components";
 import React, { FunctionComponent, PropsWithChildren, ReactElement } from "react";
 import { Icon } from "semantic-ui-react";
 import {
+    DynamicDropdownFieldInterface,
     DynamicFieldInterface,
     DynamicFilePickerFieldInterface,
     DynamicInputFieldTypes
 } from "../models/dynamic-fields";
+import "./form-dynamic-field.scss";
 
 /**
  * Prop types for the dynamic input fields.
@@ -139,6 +148,38 @@ export const FormDynamicField: FunctionComponent<PropsWithChildren<
                         }
                     />
                 );
+            case DynamicInputFieldTypes.SELECT:
+                return (
+                    <div className="dynamic-template-selection-field">
+                        <FinalFormField
+                            fullWidth
+                            FormControlProps={ {
+                                margin: "dense"
+                            } }
+                            MenuProps={ {
+                                className: "dynamic-template-selection-field-dropdown"
+                            } }
+                            aria-label={ field?.["aria-label"] }
+                            data-componentid={ field?.dataComponentId }
+                            name={ field?.name }
+                            type={ "dropdown" }
+                            displayEmpty={ true }
+                            label={ field?.label }
+                            placeholder={ field?.placeholder }
+                            component={ SelectFieldAdapter }
+                            readOnly={ readOnly || field?.readOnly }
+                            required={ field?.required }
+                            options={ (field as DynamicDropdownFieldInterface)?.options }
+                            helperText={
+                                field?.helperText ? (
+                                    <Hint compact>
+                                        { field?.helperText }
+                                    </Hint>
+                                ) : null
+                            }
+                        />
+                    </div>
+                );
             case DynamicInputFieldTypes.FILE:
                 return (
                     <FinalFormField

features/admin.template-core.v1/models/dynamic-fields.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { SupportedFileTypes } from "@wso2is/form";
+import { DropDownItemInterface, SupportedFileTypes } from "@wso2is/form";
 
 /**
  * Interface to define a dynamic form.
@@ -120,6 +120,16 @@ export interface DynamicFilePickerFieldInterface extends DynamicFieldInterface {
     hidePasteOption?: boolean;
 }
 
+/**
+ * Data types required to render the dynamic dropdown field.
+ */
+export interface DynamicDropdownFieldInterface extends DynamicFieldInterface {
+    /**
+     * File type to be used in the FilePicker component.
+     */
+    options: DropDownItemInterface[];
+}
+
 /**
  * Interface for the handlers of dynamic fields.
  */
@@ -157,7 +167,11 @@ export enum DynamicInputFieldTypes {
     /**
      * File picker field.
      */
-    FILE = "file"
+    FILE = "file",
+    /**
+     * Dropdown field.
+     */
+    SELECT = "select"
 }
 
 /**

modules/form/src/components/index.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2021-2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2021-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -20,6 +20,7 @@ export * from "./adapters/__DEPRECATED__adapters";
 export * from "./adapters/text-field-adapter";
 export * from "./adapters/url-field-adapter";
 export * from "./adapters/file-picker-adapter";
+export * from "./adapters/select-field-adapter";
 export * from "./adapters/checkbox-field-adapter";
 
 export { default as TextFieldAdapter } from "./adapters/text-field-adapter";