Merge pull request #227 from sailpoint-oss/feature/connectivity-menu

added docs for all complex input types

products/idn/docs/identity-now/saas-connectivity/connector-spec/card.md

@@ -0,0 +1,77 @@
+---
+id: connector-spec-card
+title: Card
+pagination_label: Card
+sidebar_label: Card
+keywords: ['connectivity', 'connectors','connector-spec', 'card']
+description: Details on using the Card item
+slug: /docs/saas-connectivity/connector-spec/card
+tags: ['Connectivity', 'Connector Spec']
+---
+
+## How to use the Card type in the connector spec
+You can use the card type to specify cards that allow a user to add/copy/delete and enter submenu to make changes to more details about the card.
+
+When creating a card, you need to specify the fields that are used in the card subMenu that will generate the title and subtitle as shown below.
+
+In this example, clicking on the ```Add table``` button will open a dialog and the values entered for the ```Table Information``` and ```Airtable Id``` will populate the cards ```title``` and ```subtitle```.
+
+### Example card item type
+
+```javascript
+{
+    "key": "tableParameters",
+    "label": "AddTable",
+    "titleKey": "tableName",
+    "subtitleKey": "tableId",
+    "indexKey": "sequenceNumberForTable",
+    "dragNDropEnabled": true,
+    "deleteButton": true,
+    "editButton": true,
+    "addButton": true,
+    "copyButton": true,
+    "buttonLabel": "Add Table",
+    "type": "cardList",
+    "subMenus": [
+        {
+            "label": "Table Information",
+            "items": [
+                {
+                    "key": "tableName",
+                    "label": "Airtable Name",
+                    "type": "text",
+                    "required": true,
+                    "helpKey": "Must be a unique name"
+                },
+                {
+                    "key": "tableId",
+                    "label": "Airtable Id",
+                    "type": "text",
+                    "required": true,
+                    "helpKey": "Must be a unique name"
+                },
+                {
+                    "key": "tableType",
+                    "type": "radio",
+                    "label": "Table data type",
+                    "required": true,
+                    "options": [
+                        {
+                            "label": "Accounts",
+                            "value": "accounts"
+                        },
+                        {
+                            "label": "Entitlements",
+                            "value": "entitlements"
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
+```
+![card input type](../img/card.png)
+
+![card menu input type](../img/cardMenu.png)
+

products/idn/docs/identity-now/saas-connectivity/connector-spec/index.md

@@ -49,12 +49,12 @@ The following describes in detail the different fields in the connector spec:
         - secrettextarea
         - checkbox
         - url
-        - radio
-        - select
+        - [radio](./connector-spec/radio)
+        - [select](./connector-spec/select)
         - toggle
-        - list
-        - keyValue
-        - cardList
+        - [list](./connector-spec/list)
+        - [keyValue](./connector-spec/key-value)
+        - [cardList](./connector-spec/card)
 - **accountSchema:** The schema for an account in IDN populated by data from the source.
   - **displayAttribute:** Identifies the attribute (defined below) used to map to `Account Name` in the IdentityNow account schema. This should be a unique value even though it is not required because the connector will use this value to correlate accounts in IDN to accounts in the source system.
   - **identityAttribute:** Identifies the attribute (defined below) used to map to `Account ID` in the IdentityNow account schema. This must be a globally unique identifier, such as email address, employee ID, etc.

products/idn/docs/identity-now/saas-connectivity/connector-spec/keyValue.md

@@ -0,0 +1,38 @@
+---
+id: connector-spec-key-value
+title: Key Value
+pagination_label: Key Value
+sidebar_label: Key Value
+keywords: ['connectivity', 'connectors','connector-spec', 'keyValue']
+description: Details on using the Key Value item
+slug: /docs/saas-connectivity/connector-spec/key-value
+tags: ['Connectivity', 'Connector Spec']
+---
+
+## How to use the Key Value type in the connector spec
+You can use the keyValue type to allow a user to enter multiple key value items in a single entry box. An example of implementing this is below
+
+### Example Key Value item type
+
+```javascript
+{
+    "key": "header",
+    "label": "Header Values",
+    "type": "keyValue",
+    "keyValueKey": {
+        "key": "key",
+        "label": "Key",
+        "type": "text",
+        "required": true,
+        "maxlength": "4096"
+    },
+    "keyValueValue": {
+        "key": "value",
+        "label": "Value",
+        "type": "text",
+        "required": true,
+        "maxlength": "4096"
+    }
+}
+```
+![list input type](../img/keyValue.png)

products/idn/docs/identity-now/saas-connectivity/connector-spec/list.md

@@ -0,0 +1,25 @@
+---
+id: connector-spec-list
+title: List
+pagination_label: List
+sidebar_label: List
+keywords: ['connectivity', 'connectors','connector-spec', 'list']
+description: Details on using the List item
+slug: /docs/saas-connectivity/connector-spec/list
+tags: ['Connectivity', 'Connector Spec']
+---
+
+## How to use the List type in the connector spec
+You can use the list type to allow a user to enter multiple items in a single entry box. An example of implementing this is below
+
+### Example list item type
+
+```javascript
+{
+    "key": "entitlements",
+    "label": "Entitlements",
+    "type": "list",
+    "helpKey": "Add a list of entitlements to expose via your source"
+}
+```
+![list input type](../img/list.png)

products/idn/docs/identity-now/saas-connectivity/connector-spec/radio.md

@@ -0,0 +1,51 @@
+---
+id: connector-spec-radio
+title: Radio
+pagination_label: Radio
+sidebar_label: Radio
+keywords: ['connectivity', 'connectors','connector-spec', 'radio']
+description: Details on using the Radio item
+slug: /docs/saas-connectivity/connector-spec/radio
+tags: ['Connectivity', 'Connector Spec']
+---
+
+## How to use the Radio type in the connector spec
+You can use the radio type to create radio buttons for users to interact with to select from a predefined set of values. An example of implementing this is below
+
+### Example radio item type
+
+```javascript
+{
+    "key": "airtableURL",
+    "type": "radio",
+    "label": "Airtable URL",
+    "required": true,
+    "options": [
+        {
+            "label": "Standard",
+            "value": "standard"
+        },
+        {
+            "label": "Custom",
+            "value": "custom"
+        }
+    ]
+}
+```
+![radio input type](../img/radio.png)
+
+You can also create dependencies on other fields so they are hidden until the selection is made. This same type of dependency can be built into any field and linked via the parentKey/parentValue fields.
+
+### Example dependency on above select field
+
+```javascript
+{
+    "key": "baseUrl",
+    "type": "text",
+    "label": "Base URL",
+    "parentKey": "airtableURL",
+    "parentValue": "custom",
+    "placeholder": "https://{your domain}",
+    "required": true
+}
+```

products/idn/docs/identity-now/saas-connectivity/connector-spec/select.md

@@ -0,0 +1,51 @@
+---
+id: connector-spec-select
+title: Select
+pagination_label: Select
+sidebar_label: Select
+keywords: ['connectivity', 'connectors','connector-spec', 'select']
+description: Details on using the Select item
+slug: /docs/saas-connectivity/connector-spec/select
+tags: ['Connectivity', 'Connector Spec']
+---
+
+## How to use the Select type in the connector spec
+You can use the select type to create a dropdown for users to interact with to select from a predefined set of values. An example of implementing this is below
+
+### Example select item type
+
+```javascript
+{
+    "key": "airtableURL",
+    "type": "select",
+    "label": "Airtable URL",
+    "required": true,
+    "options": [
+        {
+            "label": "Standard",
+            "value": "standard"
+        },
+        {
+            "label": "Custom",
+            "value": "custom"
+        }
+    ]
+}
+```
+![select input type](../img/select.png)
+
+You can also create dependencies on other fields so they are hidden until the selection is made. This same type of dependency can be built into any field and linked via the parentKey/parentValue fields.
+
+### Example dependency on above select field
+
+```javascript
+{
+    "key": "baseUrl",
+    "type": "text",
+    "label": "Base URL",
+    "parentKey": "airtableURL",
+    "parentValue": "custom",
+    "placeholder": "https://{your domain}",
+    "required": true
+}
+```

products/idn/docs/identity-now/saas-connectivity/videos.md

@@ -10,6 +10,7 @@ description: Helpful videos on using SaaS connectivity
 slug: /docs/saas-connectivity/videos
 tags: ['Connectivity']
 ---
+import Video from '@site/src/components/Video';
 
 ## Videos
 
@@ -18,3 +19,5 @@ During our 2023 Developer Days Conference, we created several connectivity video
  - [Roadmap and Introduction](https://www.youtube.com/watch?v=6FGkKj6aKko)
  - [Building a Complete Connector Walkthrough](https://www.youtube.com/watch?v=KB1jdE09lE4)
  - [SDKs in practice](https://www.youtube.com/watch?v=UWeokOXuAuk)
+
+<Video source="https://www.youtube.com/embed/KB1jdE09lE4"></Video>

src/components/Video.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default function Video({children, source})  {
+return (
+ <iframe 
+    style={{
+      width: '100%',
+      aspectRatio: '16/9',
+    }}
+    src={source}
+    title="YouTube video player" 
+    frameborder="0" 
+    allow="accelerometer; 
+    autoplay; 
+    clipboard-write; 
+    encrypted-media; 
+    gyroscope; 
+    picture-in-picture; 
+    web-share" 
+    allowfullscreen
+ ></iframe>
+)
+}