From f5507696c9ed1f3fecdfaa04d55455243531d5d8 Mon Sep 17 00:00:00 2001
From: Tushar Balar <tbalar@splunk.com>
Date: Thu, 4 Mar 2021 13:26:28 +0530
Subject: [PATCH 01/12] feat: Added table component with actions button

---
 .../splunk/default/data/ui/nav/default.xml    |   4 +-
 .../webapp/components/table/InputTable.jsx    | 221 ++++++++++
 .../components/table/InputTableStyle.jsx      |  21 +
 .../webapp/components/table/TableWrapper.jsx  | 381 ++++++++++++++++++
 .../{StartStyles.js => EntryPageStyle.js}     |   0
 .../src/main/webapp/pages/entry_page.jsx      |  12 +-
 .../src/main/webapp/util/configManager.js     |  40 +-
 .../ucc_ui_lib/src/main/webapp/util/script.js |  42 ++
 8 files changed, 680 insertions(+), 41 deletions(-)
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTable.jsx
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTableStyle.jsx
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx
 rename splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/{StartStyles.js => EntryPageStyle.js} (100%)
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/script.js

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml
index 79d0fcff1..76f8b5754 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml
@@ -1,5 +1,5 @@
 <nav>
-    <view name="inputs" />
-    <view name="configuration" default="true"/>
+    <view name="inputs" default="true" />
+    <view name="configuration" />
     <view name="search" />
 </nav>
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTable.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTable.jsx
new file mode 100644
index 000000000..d9c54be32
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTable.jsx
@@ -0,0 +1,221 @@
+import React, { useState, useEffect } from 'react';
+import DL from '@splunk/react-ui/DefinitionList';
+import Table from '@splunk/react-ui/Table';
+import Switch from '@splunk/react-ui/Switch';
+import ButtonGroup from '@splunk/react-ui/ButtonGroup';
+import Pencil from '@splunk/react-icons/Pencil';
+import Clone from '@splunk/react-icons/Clone';
+import Trash from '@splunk/react-icons/Trash';
+import Tooltip from '@splunk/react-ui/Tooltip';
+import { _ } from '@splunk/ui-utils/i18n';
+import { ButtonComponent, TitleComponent, SubTitleComponent, TableCaptionComponent } from './InputTableStyle';
+
+function getExpansionRow(colSpan, row) {
+    return (
+        <Table.Row key={`${row.email}-expansion`}>
+            <Table.Cell style={{ borderTop: 'none' }} colSpan={colSpan}>
+                <DL>
+                    <DL.Term>Name</DL.Term>
+                    <DL.Description>{row.name}</DL.Description>
+                    <DL.Term>Interval</DL.Term>
+                    <DL.Description>{row.interval}</DL.Description>
+                    <DL.Term>Index</DL.Term>
+                    <DL.Description>{row.index}</DL.Description>
+                    <DL.Term>Status</DL.Term>
+                    <DL.Description>{String(row.status) ? "Enabled": "Disabled"}</DL.Description>
+                    <DL.Term>Object</DL.Term>
+                    <DL.Description>{row.object}</DL.Description>
+                    <DL.Term>Object Fields</DL.Term>
+                    <DL.Description>{row.object_fields}</DL.Description>
+                    <DL.Term>Order By</DL.Term>
+                    <DL.Description>{row.order_by}</DL.Description>
+                    <DL.Term>Limit</DL.Term>
+                    <DL.Description>{row.limit}</DL.Description>
+                </DL>
+            </Table.Cell>
+        </Table.Row>
+    );
+}
+
+function InputTable({ data, columns, handleToggleActionClick }) {
+
+    const [sortKey, setSortKey] = useState('name');
+    const [sortDir, setSortDir] = useState('asc');
+
+    const handleSort = (e, val) => {
+        const prevSortKey = sortKey;
+        const prevSortDir = prevSortKey === val.sortKey ? sortDir : 'none';
+        const nextSortDir = prevSortDir === 'asc' ? 'desc' : 'asc';
+        setSortDir(nextSortDir);
+        setSortKey(val.sortKey);
+    };
+
+    const modifyRowData = () => {
+        let rows = []
+        data && data.length && data.forEach((entry) => {
+            let row = {
+                "id": entry.id,
+                "name": entry.name,
+                "account": entry.content.account,
+                "interval": entry.content.interval,
+                "index": entry.content.index,
+                "status": entry.content.disabled,
+                "object": entry.content.object,
+                "object_fields": entry.content.object_fields,
+                "order_by": entry.content.order_by,
+                "limit": entry.content.limit,
+            }
+            rows.push(row)
+        });
+        return rows;
+    }
+
+    const getTableHeaders = () => {
+        return (
+            <Table.Head>
+                {columns && columns.length && columns.map((headData) => (
+                    headData.visible && <Table.HeadCell
+                        key={headData.key}
+                        onSort={headData.sortKey ? handleSort: null}
+                        sortKey={headData.sortKey ? headData.sortKey: null}
+                        sortDir={headData.sortKey ? headData.sortKey === sortKey ? sortDir : 'none': null}
+                    >
+                        {headData.label}
+                    </Table.HeadCell>
+                ))}
+            </Table.Head>
+        )
+    }
+
+    const handleEditActionClick = () => {
+
+    }
+
+    const handleCloneActionClick = () => {
+
+    }
+
+    const handleDeleteActionClick = () => {
+
+    }
+
+    const rowActionsPrimaryButton = (row) => {
+        return (
+            <Table.Cell key={row.id}>
+                <ButtonGroup>
+                    <Tooltip
+                        content={_('Edit')}
+                    >
+                        <ButtonComponent
+                            appearance="primary"
+                            icon={<Pencil screenReaderText={null} size={1} />}
+                            onClick={() => handleEditActionClick(row)}
+                        />
+                    </Tooltip>
+                    <Tooltip
+                        content={_('Clone')}
+                    >
+                        <ButtonComponent
+                            appearance="primary"
+                            icon={<Clone screenReaderText={null} size={1} />}
+                            onClick={() => handleCloneActionClick(row)}
+                        />
+                    </Tooltip>
+                    <Tooltip
+                        content={_('Delete')}
+                    >
+                        <ButtonComponent
+                            appearance="primary"
+                            icon={<Trash screenReaderText={null} size={1} />}
+                            onClick={() => handleDeleteActionClick(row)}
+                        />
+                    </Tooltip>
+                </ButtonGroup>
+            </Table.Cell>
+        )
+    }
+
+    const getTableRow = (row) => {
+        return (
+            <Table.Row 
+                key={row.id} 
+                expansionRow={getExpansionRow(columns.length, row)}
+            >
+                {columns && columns.length && columns.map(
+                    (header) => {
+                        if(header.visible) {
+                            if(header.key === "status") {
+                                return (
+                                    <Table.Cell key={header.key}>
+                                        <Switch
+                                            key={row.name}
+                                            value={row.status}
+                                            onClick={() => handleToggleActionClick(row)}
+                                            selected={!row.status}
+                                            appearance="toggle"
+                                        >
+                                            { row.status ? "Disabled": "Enabled"}
+                                        </Switch>
+                                    </Table.Cell>
+                                )
+                            } else if (header.key == "actions") {
+                                return rowActionsPrimaryButton(row);
+                            } else {
+                                return (
+                                    <Table.Cell key={header.key}>
+                                        {row[header.key]}
+                                    </Table.Cell>
+                                )
+                            }
+                        }
+                    }
+                )}
+            </Table.Row>
+        );
+    }
+
+    const getTableBody = () => {
+        const rows = modifyRowData();
+        return (
+            <Table.Body key={rows}>
+                {rows && rows.length && rows
+                    .sort((rowA, rowB) => {
+                        if (sortDir === 'asc') {
+                            return rowA[sortKey] > rowB[sortKey] ? 1 : -1;
+                        }
+                        if (sortDir === 'desc') {
+                            return rowB[sortKey] > rowA[sortKey] ? 1 : -1;
+                        }
+                        return 0;
+                    })
+                    .map((row) => (
+                        getTableRow(row)
+                    ))
+                }
+            </Table.Body>
+        );
+    }
+
+    return (
+        <>
+            <TitleComponent>Inputs</TitleComponent>
+            <SubTitleComponent>Manage your data inputs</SubTitleComponent>
+            <hr />
+            { data &&
+                <>
+                    <TableCaptionComponent>
+                        <div className="table-caption-inner">
+                            {data.length} Input {data.legnth > 1 && <span>s</span>}
+                        </div>
+                    </TableCaptionComponent>
+                    <Table stripeRows rowExpansion="single">
+                        {getTableHeaders()}
+                        {getTableBody()}
+                    </Table>
+                </>
+            }
+        </>
+    );
+}
+
+export default InputTable;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTableStyle.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTableStyle.jsx
new file mode 100644
index 000000000..1d4f9b479
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTableStyle.jsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import Button from '@splunk/react-ui/Button';
+import { variables } from '@splunk/themes';
+
+export const ButtonComponent = styled(Button)`
+    margin: 0px 5px;
+`;
+
+export const TitleComponent = styled.div`
+    font-size: ${variables.fontSizeXXLarge};
+`;
+
+export const SubTitleComponent = styled.div`
+    font-size: ${variables.fontSize};
+`;
+
+export const TableCaptionComponent = styled.div`
+    .table-caption-inner {
+        text-align: left;
+    }
+`;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx
new file mode 100644
index 000000000..580444081
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx
@@ -0,0 +1,381 @@
+import React, { useState, useEffect } from 'react';
+import { createURL } from '@splunk/splunk-utils/url';
+import {defaultFetchInit} from '@splunk/splunk-utils/fetch';
+import * as _ from "lodash";
+
+import InputTable from './InputTable';
+
+function TableWrapper() {
+
+    const [data, setData] = useState([
+        {
+          "name": "account",
+          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
+          "updated": "1970-01-01T00:00:00+00:00",
+          "links": {
+            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
+            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
+            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
+            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account"
+          },
+          "author": "nobody",
+          "acl": {
+            "app": "Splunk_TA_salesforce",
+            "can_list": true,
+            "can_write": true,
+            "modifiable": false,
+            "owner": "nobody",
+            "perms": {
+              "read": [
+                "admin",
+                "power",
+                "splunk-system-role",
+                "user"
+              ],
+              "write": [
+                "admin",
+                "splunk-system-role"
+              ]
+            },
+            "removable": true,
+            "sharing": "app"
+          },
+          "content": {
+            "disabled": false,
+            "eai:acl": null,
+            "host": "$decideOnStartup",
+            "host_resolved": "so1",
+            "index": "11default",
+            "interval": "1200",
+            "limit": "1000",
+            "object": "Account",
+            "object_fields": "Id,LastModifiedById,LastModifiedDate,Name",
+            "order_by": "LastModifiedDate",
+            "python.version": null,
+            "sourcetype": "sfdc:object",
+            "start_by_shell": "false"
+          }
+        },
+        {
+          "name": "contentversion",
+          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
+          "updated": "1970-01-01T00:00:00+00:00",
+          "links": {
+            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
+            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
+            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
+            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion"
+          },
+          "author": "nobody",
+          "acl": {
+            "app": "Splunk_TA_salesforce",
+            "can_list": true,
+            "can_write": true,
+            "modifiable": false,
+            "owner": "nobody",
+            "perms": {
+              "read": [
+                "admin",
+                "power",
+                "splunk-system-role",
+                "user"
+              ],
+              "write": [
+                "admin",
+                "splunk-system-role"
+              ]
+            },
+            "removable": true,
+            "sharing": "app"
+          },
+          "content": {
+            "disabled": false,
+            "eai:acl": null,
+            "host": "$decideOnStartup",
+            "host_resolved": "so1",
+            "index": "default",
+            "interval": "1200",
+            "limit": "1000",
+            "object": "ContentVersion",
+            "object_fields": "Id,LastModifiedById,LastModifiedDate,Title",
+            "order_by": "LastModifiedDate",
+            "python.version": null,
+            "sourcetype": "sfdc:object",
+            "start_by_shell": "false"
+          }
+        },
+        {
+          "name": "dashboard",
+          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
+          "updated": "1970-01-01T00:00:00+00:00",
+          "links": {
+            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
+            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
+            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
+            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard"
+          },
+          "author": "nobody",
+          "acl": {
+            "app": "Splunk_TA_salesforce",
+            "can_list": true,
+            "can_write": true,
+            "modifiable": false,
+            "owner": "nobody",
+            "perms": {
+              "read": [
+                "admin",
+                "power",
+                "splunk-system-role",
+                "user"
+              ],
+              "write": [
+                "admin",
+                "splunk-system-role"
+              ]
+            },
+            "removable": true,
+            "sharing": "app"
+          },
+          "content": {
+            "disabled": true,
+            "eai:acl": null,
+            "account": "Temp1",
+            "host": "$decideOnStartup",
+            "host_resolved": "so1",
+            "index": "22default",
+            "interval": "1200",
+            "limit": "1000",
+            "object": "Dashboard",
+            "object_fields": "Id,LastModifiedDate,Title",
+            "order_by": "LastModifiedDate",
+            "python.version": null,
+            "sourcetype": "sfdc:object",
+            "start_by_shell": "false"
+          }
+        },
+        {
+          "name": "loginhistory",
+          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
+          "updated": "1970-01-01T00:00:00+00:00",
+          "links": {
+            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
+            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
+            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
+            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory"
+          },
+          "author": "nobody",
+          "acl": {
+            "app": "Splunk_TA_salesforce",
+            "can_list": true,
+            "can_write": true,
+            "modifiable": false,
+            "owner": "nobody",
+            "perms": {
+              "read": [
+                "admin",
+                "power",
+                "splunk-system-role",
+                "user"
+              ],
+              "write": [
+                "admin",
+                "splunk-system-role"
+              ]
+            },
+            "removable": true,
+            "sharing": "app"
+          },
+          "content": {
+            "disabled": true,
+            "eai:acl": null,
+            "account": "Other",
+            "host": "$decideOnStartup",
+            "host_resolved": "so1",
+            "index": "default",
+            "interval": "60",
+            "limit": "1000",
+            "object": "LoginHistory",
+            "object_fields": "ApiType,ApiVersion,Application,Browser,ClientVersion,Id,LoginTime,LoginType,LoginUrl,Platform,SourceIp,Status,UserId",
+            "order_by": "LoginTime",
+            "python.version": null,
+            "sourcetype": "sfdc:object",
+            "start_by_shell": "false"
+          }
+        },
+        {
+          "name": "opportunity",
+          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
+          "updated": "1970-01-01T00:00:00+00:00",
+          "links": {
+            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
+            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
+            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
+            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity"
+          },
+          "author": "nobody",
+          "acl": {
+            "app": "Splunk_TA_salesforce",
+            "can_list": true,
+            "can_write": true,
+            "modifiable": false,
+            "owner": "nobody",
+            "perms": {
+              "read": [
+                "admin",
+                "power",
+                "splunk-system-role",
+                "user"
+              ],
+              "write": [
+                "admin",
+                "splunk-system-role"
+              ]
+            },
+            "removable": true,
+            "sharing": "app"
+          },
+          "content": {
+            "disabled": true,
+            "eai:acl": null,
+            "account": "Dummy1",
+            "host": "$decideOnStartup",
+            "host_resolved": "so1",
+            "index": "default",
+            "interval": "1200",
+            "limit": "1000",
+            "object": "Opportunity",
+            "object_fields": "Id,LastModifiedById,LastModifiedDate,Name",
+            "order_by": "LastModifiedDate",
+            "python.version": null,
+            "sourcetype": "sfdc:object",
+            "start_by_shell": "false"
+          }
+        },
+        {
+          "name": "report",
+          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
+          "updated": "1970-01-01T00:00:00+00:00",
+          "links": {
+            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
+            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
+            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
+            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report"
+          },
+          "author": "nobody",
+          "acl": {
+            "app": "Splunk_TA_salesforce",
+            "can_list": true,
+            "can_write": true,
+            "modifiable": false,
+            "owner": "nobody",
+            "perms": {
+              "read": [
+                "admin",
+                "power",
+                "splunk-system-role",
+                "user"
+              ],
+              "write": [
+                "admin",
+                "splunk-system-role"
+              ]
+            },
+            "removable": true,
+            "sharing": "app"
+          },
+          "content": {
+            "disabled": true,
+            "eai:acl": null,
+            "account": "Test",
+            "host": "$decideOnStartup",
+            "host_resolved": "so1",
+            "index": "default",
+            "interval": "1200",
+            "limit": "1000",
+            "object": "Report",
+            "object_fields": "Id,LastModifiedDate,Name",
+            "order_by": "LastModifiedDate",
+            "python.version": null,
+            "sourcetype": "sfdc:object",
+            "start_by_shell": "false"
+          }
+        },
+        {
+          "name": "user",
+          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
+          "updated": "1970-01-01T00:00:00+00:00",
+          "links": {
+            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
+            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
+            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
+            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user"
+          },
+          "author": "nobody",
+          "acl": {
+            "app": "Splunk_TA_salesforce",
+            "can_list": true,
+            "can_write": true,
+            "modifiable": false,
+            "owner": "nobody",
+            "perms": {
+              "read": [
+                "admin",
+                "power",
+                "splunk-system-role",
+                "user"
+              ],
+              "write": [
+                "admin",
+                "splunk-system-role"
+              ]
+            },
+            "removable": true,
+            "sharing": "app"
+          },
+          "content": {
+            "disabled": true,
+            "account": "Tushar",
+            "eai:acl": null,
+            "host": "$decideOnStartup",
+            "host_resolved": "so1",
+            "index": "default",
+            "interval": "1200",
+            "limit": "1000",
+            "object": "User",
+            "object_fields": "LastModifiedDate,City,Country,FirstName,Id,IsActive,LastLoginDate,LastName,Latitude,Longitude,MobilePhone,Name,PostalCode,State,Username,UserRoleId,UserType,Email,CompanyName,ProfileId,Profile.PermissionsApiEnabled,Profile.PermissionsModifyAllData,Profile.PermissionsViewSetup",
+            "order_by": "LastModifiedDate",
+            "python.version": null,
+            "sourcetype": "sfdc:object",
+            "start_by_shell": "false"
+          }
+        }
+      ]);
+      
+    const [columns, setColumns] = useState([
+        { sortKey: 'name', key: 'name', label: 'Name', width: 300, minWidth: 80, visible: true },
+        { sortKey: 'account', key: 'account', label: 'Account Name', width: 300, minWidth: 80, visible: true },
+        { sortKey: 'interval', key: 'interval', label: 'Interval', width: 300, minWidth: 80, visible: true },
+        { sortKey: 'index', key: 'index', label: 'Index', width: 300, minWidth: 80, visible: true },
+        { sortKey: 'status', key: 'status', label: 'Status', width: 300, minWidth: 80, visible: true },
+        { sortKey: '', key: 'actions', label: 'Actions', width: 200, minWidth: 80, visible: true }
+    ]);
+
+    const changeStatus = (row) => {
+        let oldData = _.cloneDeep(data);
+        const index = _.findIndex(oldData, (o) => { return o.id == row.id });
+        if (index != -1) {
+            oldData[index].content.disabled = !oldData[index].content.disabled;
+        }
+        setData(oldData);
+    }
+
+    return (
+        <InputTable 
+            data={data} 
+            columns={columns} 
+            handleToggleActionClick={(row) => changeStatus(row)}
+        />
+    );
+}
+
+export default TableWrapper;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/StartStyles.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/EntryPageStyle.js
similarity index 100%
rename from splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/StartStyles.js
rename to splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/EntryPageStyle.js
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
index 66287f671..944d9ea97 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
@@ -1,13 +1,12 @@
 import React from 'react';
-
 import layout from '@splunk/react-page';
 import { SplunkThemeProvider } from '@splunk/themes';
-
 import { defaultTheme } from '@splunk/splunk-utils/themes';
 
 import ConfigManager from '../util/configManager';
 import TestComponent from '../components/TestComponent';
-import { StyledContainer, StyledGreeting } from './StartStyles';
+import TableWrapper from '../components/table/TableWrapper';
+import { StyledContainer, StyledGreeting } from './EntryPageStyle';
 
 const defaultThemeSplunkThemeProviderMap = {
     enterprise: {
@@ -41,12 +40,7 @@ if (page === 'inputs') {
             <StyledContainer>
                 <ConfigManager>
                     {({loading, appData}) => {
-                        return !loading && appData && (
-                            <>
-                                <StyledGreeting>Hello, from inside Inputs!</StyledGreeting>
-                                <TestComponent name="from inside TestComponent" />
-                            </>
-                        )
+                        return !loading && appData && <TableWrapper />
                     }}
                 </ConfigManager>
             </StyledContainer>
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js
index 6e0e5cde0..b1084cecf 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js
@@ -1,12 +1,19 @@
 import React, {Component} from "react";
 import WaitSpinner from '@splunk/react-ui/WaitSpinner';
+import styled from 'styled-components';
 import * as _ from "lodash";
 
 import { validateSchema } from './uccConfigurationValidators';
 import { getFormattedMessage } from './messageUtil';
 import { setMetaInfo, setUnifiedConfig } from './util';
+import { loadGlobalConfig } from './script';
 import ErrorModal from '../components/ErrorModal';
 
+const WaitSpinnerWrapper = styled(WaitSpinner)`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+`;
 class ConfigManager extends Component {
 
     constructor(props) {
@@ -21,7 +28,8 @@ class ConfigManager extends Component {
     }
 
     componentWillMount() {
-        this.loadGlobalConfig().then((val) => {
+        this.setState({loading: true});
+        loadGlobalConfig().then((val) => {
             // The configuration object should be attached to global object,
             // before executing the code below.
             // this.unifiedConfig = window.__globalConfig;
@@ -35,34 +43,6 @@ class ConfigManager extends Component {
         });
     }
 
-    loadGlobalConfig() {
-        // Get the configuraiton json file in sync mode
-        this.setState({loading: true});
-        return new Promise((resolve, reject) => {
-            fetch(`${this.getBuildDirPath()}/globalConfig.json`).then((res) => {
-                return res.json();     
-            }).then((json) => {
-                // window.__globalConfig = json;
-                resolve(json);
-            }).catch((err) => {
-                reject(err);
-            });
-        });
-    }
-
-    getBuildDirPath() {
-        const scripts = document.getElementsByTagName('script');
-        const scriptsCount = scripts.length;
-        for (let i = 0; i < scriptsCount; i++) {
-            const s = scripts[i];
-            if(s.src && s.src.match(/js\/build/)) {
-                const lastSlashIndex = s.src.lastIndexOf('/');
-                return s.src.slice(0, lastSlashIndex);
-            }
-        }
-        return '';
-    }
-
     attchPropertie(unifiedConfig) {
         const validationResult = validateSchema(unifiedConfig);
         const { meta } = unifiedConfig;
@@ -104,7 +84,7 @@ class ConfigManager extends Component {
             <>
                 {
                     this.state.loading ? 
-                    <WaitSpinner size="large" /> : 
+                    <WaitSpinnerWrapper size="large" /> : 
                     this.renderComponents()
                 }
             </>
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/script.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/script.js
new file mode 100644
index 000000000..0eac1a2bb
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/script.js
@@ -0,0 +1,42 @@
+// NOTE: The resolve will only be executed if the globalConfig exist
+export function loadGlobalConfig() {
+    // Get the configuraiton json file in sync mode
+    return new Promise((resolve, reject) => {
+        fetch(`${getBuildDirPath()}/globalConfig.json`).then((res) => {
+            return res.json();     
+        }).then((json) => {
+            // window.__globalConfig = json;
+            resolve(json);
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}
+
+// NOTE: if bundle script is put some dir instead of js/build, this function will broken.
+export function getBuildDirPath() {
+    const scripts = document.getElementsByTagName('script');
+    const scriptsCount = scripts.length;
+    for (let i = 0; i < scriptsCount; i++) {
+        const s = scripts[i];
+        if(s.src && s.src.match(/js\/build/)) {
+            const lastSlashIndex = s.src.lastIndexOf('/');
+            return s.src.slice(0, lastSlashIndex);
+        }
+    }
+    return '';
+}
+
+export function parseFuncRawStr(rawStr) {
+    let result;
+
+    try {
+        if (rawStr) {
+            result = eval(`(${rawStr})`);
+        }
+    } catch (e) {
+        console.warn(`${rawStr} ${_('is not a function').t()}${_('.').t()}`);
+    }
+
+    return result;
+}

From 5cb5f13f029f2a26755c0d966e252903c585a282 Mon Sep 17 00:00:00 2001
From: harshpatel <harshpatel@splunk.com>
Date: Thu, 4 Mar 2021 14:08:29 +0530
Subject: [PATCH 02/12] ADDON-34285-ucc-ui-lib: feat: added axios call wrapper
 and updated package.json

---
 .../ucc_ui_lib/package.json                   |  8 +--
 .../main/webapp/components/TestComponent.jsx  | 18 ++++---
 .../src/main/webapp/util/axiosCallWrapper.js  | 50 +++++++++++++++++++
 .../ucc_ui_lib/src/main/webapp/util/util.js   |  8 +--
 .../ucc_ui_lib/yarn.lock                      | 22 ++++++++
 5 files changed, 90 insertions(+), 16 deletions(-)
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/axiosCallWrapper.js

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/package.json b/splunk_add_on_ucc_framework/ucc_ui_lib/package.json
index 3d1888c5c..1c087712a 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/package.json
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/package.json
@@ -10,7 +10,6 @@
     "eslint": "eslint src --ext \".js,.jsx\"",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
     "eslint:fix": "eslint src --ext \".js, .jsx\" --fix",
-    "link:app": "ln -s $PWD/stage $SPLUNK_HOME/etc/apps/my-splunk-app",
     "lint": "yarn run eslint && yarn run stylelint",
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "webpack --watch",
@@ -31,6 +30,7 @@
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/themes": "^0.7.0",
     "@splunk/webpack-configs": "^5.0.0",
+    "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.4",
     "chai": "^3.5.0",
@@ -49,16 +49,16 @@
     "html-webpack-plugin": "^3.2.0",
     "jest": "^25.1.0",
     "jest-junit": "^10.0.0",
+    "jsonschema": "^1.4.0",
     "prettier": "^2.0.5",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "styled-components": "^5.1.1",
     "stylelint": "^13.0.0",
+    "underscore": "^1.12.0",
     "webpack": "^4.16.2",
     "webpack-cli": "^3.1.0",
-    "webpack-merge": "^4.1.3",
-    "jsonschema": "^1.4.0",
-    "underscore": "^1.12.0"
+    "webpack-merge": "^4.1.3"
   },
   "engines": {
     "node": ">=6"
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx
index 74468207e..183954185 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Button from '@splunk/react-ui/Button';
 import { StyledContainer, StyledGreeting } from './TestComponentStyles';
 import { getUnifiedConfigs } from '../util/util';
+import { axiosCallWrapper } from '../util/axiosCallWrapper';
 
 class TestComponent extends Component {
     static propTypes = {
@@ -11,6 +12,7 @@ class TestComponent extends Component {
 
     static defaultProps = {
         name: 'User',
+        serviceName: 'example_input_one',
     };
 
     constructor(props) {
@@ -19,7 +21,14 @@ class TestComponent extends Component {
     }
 
     componentDidMount() {
-        console.log("getUnifiedConfigs: ", getUnifiedConfigs());
+        console.log('getUnifiedConfigs: ', getUnifiedConfigs());
+        axiosCallWrapper(this.props.serviceName)
+            .then((response) => {
+                console.log(response.data);
+            })
+            .catch((error) => {
+                console.log(error);
+            });
     }
 
     render() {
@@ -30,13 +39,6 @@ class TestComponent extends Component {
             counter === 0
                 ? 'You should try clicking the button.'
                 : `You've clicked the button ${counter} time${counter > 1 ? 's' : ''}.`;
-        // const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
-        function requireDynamically(path) {
-            return eval(`require`); // Ensure Webpack does not analyze the require statement
-        }
-        requireDynamically(['custom/' + module], (CustomRow) => {
-            this.CustomRow = CustomRow;
-        });
 
         return (
             <StyledContainer>
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/axiosCallWrapper.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/axiosCallWrapper.js
new file mode 100644
index 000000000..022c8cc76
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/axiosCallWrapper.js
@@ -0,0 +1,50 @@
+import axios from 'axios';
+import { CSRFToken, app } from '@splunk/splunk-utils/config';
+import { createRESTURL } from '@splunk/splunk-utils/url';
+import { generateEndPointUrl } from './util';
+
+/**
+ * Provides a axios wrapper with applied common options
+ * @param {string} serviceName service name which is input name or tab name based on the page
+ * @param {string} endpointUrl rest endpoint path
+ * @param {object} params object with params as key value pairs
+ * @param {object} customHeaders extra headers as key value pair
+ * @param {string} method rest method type
+ */
+const axiosCallWrapper = (
+    serviceName,
+    endpointUrl = null,
+    params = {},
+    customHeaders = {},
+    method = 'get'
+) => {
+    const endpoint = serviceName ? generateEndPointUrl(serviceName) : endpointUrl;
+    const appData = {
+        app,
+        owner: 'nobody',
+    };
+    const baseHeaders = {
+        'X-Splunk-Form-Key': CSRFToken,
+        'X-Requested-With': 'XMLHttpRequest',
+        'Content-Type': 'application/json',
+    };
+    const headers = Object.assign(baseHeaders, customHeaders);
+    const url = `${createRESTURL(endpoint, appData)}?output_mode=json`;
+
+    const options = {
+        method,
+        url,
+        credentials: 'include',
+        headers,
+    };
+
+    if (method === 'post') {
+        options.data = params;
+    } else {
+        options.params = params;
+    }
+
+    return axios(options);
+};
+
+export { axiosCallWrapper };
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/util.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/util.js
index 8222aa04c..24e75e3a0 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/util.js
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/util.js
@@ -7,12 +7,12 @@ export function setMetaInfo(data) {
 
 export function getMetaInfo() {
     return {
-        appData: appData
-    }
+        appData: appData,
+    };
 }
 
 export function generateEndPointUrl(name) {
-    return `${unifiedConfigs.meta.restRoot}/${name}`;
+    return `${unifiedConfigs.meta.restRoot}_${name}`;
 }
 
 export function setUnifiedConfig(unifiedConfig) {
@@ -21,4 +21,4 @@ export function setUnifiedConfig(unifiedConfig) {
 
 export function getUnifiedConfigs() {
     return unifiedConfigs;
-}
\ No newline at end of file
+}
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/yarn.lock b/splunk_add_on_ucc_framework/ucc_ui_lib/yarn.lock
index 57ed90ce7..870cf11fb 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/yarn.lock
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/yarn.lock
@@ -2045,6 +2045,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
   integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -4155,6 +4162,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.10.0:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
+  integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -5651,6 +5663,11 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
+jsonschema@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/jsonschema/-/jsonschema-1.4.0.tgz#1afa34c4bc22190d8e42271ec17ac8b3404f87b2"
+  integrity sha512-/YgW6pRMr6M7C+4o8kS+B/2myEpHCrxO4PEWnqJNBFMjn7EWXqlQ4tGwL6xTHeRplwuZmcAncdvfOad1nT2yMw==
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -8641,6 +8658,11 @@ uglify-js@3.4.x:
     commander "~2.19.0"
     source-map "~0.6.1"
 
+underscore@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.0.tgz#4814940551fc80587cef7840d1ebb0f16453be97"
+  integrity sha512-21rQzss/XPMjolTiIezSu3JAjgagXKROtNrYFEOWK109qY1Uv2tVjPTZ1ci2HgvQDA16gHYSthQIJfB+XId/rQ==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"

From 84b0e1e0772c24d1c3fb272e8c7aeb76be25a609 Mon Sep 17 00:00:00 2001
From: harshpatel <harshpatel@splunk.com>
Date: Thu, 4 Mar 2021 17:07:34 +0530
Subject: [PATCH 03/12] ADDON-34285 reverting script removal for link:app

---
 splunk_add_on_ucc_framework/ucc_ui_lib/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/package.json b/splunk_add_on_ucc_framework/ucc_ui_lib/package.json
index 1c087712a..1f31703b9 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/package.json
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/package.json
@@ -10,6 +10,7 @@
     "eslint": "eslint src --ext \".js,.jsx\"",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
     "eslint:fix": "eslint src --ext \".js, .jsx\" --fix",
+    "link:app": "ln -s $PWD/stage $SPLUNK_HOME/etc/apps/my-splunk-app",
     "lint": "yarn run eslint && yarn run stylelint",
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "webpack --watch",

From d7746da071bf9e6047fc4fb10481a07a490b0408 Mon Sep 17 00:00:00 2001
From: "Mahir Chavda (C)" <mchavda@splunk.com>
Date: Thu, 4 Mar 2021 18:39:30 +0530
Subject: [PATCH 04/12] Add mulitselect compomemt

---
 .../webapp/components/MultiInputControl.jsx   | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/MultiInputControl.jsx

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/MultiInputControl.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/MultiInputControl.jsx
new file mode 100644
index 000000000..ef254b8f2
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/MultiInputControl.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Multiselect from '@splunk/react-ui/Multiselect';
+
+function MultiInputControl(props) {
+    const { id, field, disabled = false, value, controlOptions, ...restProps } = props;
+    const { items, placeholder, createSearchChoice, delimiter = ',' } = controlOptions;
+
+    function handleChange(e, { values }) {
+        restProps.handleChange(id, values.join(delimiter));
+    }
+
+    const valueList = value ? value.split(delimiter) : [];
+
+    return (
+        <Multiselect
+            values={valueList}
+            name={field}
+            placeholder={placeholder}
+            disabled={disabled}
+            allowNewValues={createSearchChoice}
+            onChange={handleChange}
+        >
+            {items.map((item) => (
+                <Multiselect.Option label={item.label} value={item.value} key={item.value} />
+            ))}
+        </Multiselect>
+    );
+}
+
+MultiInputControl.propTypes = {
+    id: PropTypes.number.isRequired,
+    disabled: PropTypes.bool,
+    value: PropTypes.string,
+    handleChange: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.shape({
+        delimiter: PropTypes.string,
+        placeholder: PropTypes.string,
+        createSearchChoice: PropTypes.bool,
+        items: PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                value: PropTypes.string.isRequired,
+            })
+        ).isRequired,
+    }),
+};
+
+export default MultiInputControl;

From 200b680fdbb79d843bce83614e138d14eaff112e Mon Sep 17 00:00:00 2001
From: dkhatri-crest <dkhatri@splunk.com>
Date: Fri, 5 Mar 2021 12:18:53 +0530
Subject: [PATCH 05/12] ADDON-34289: Added Text, Radio and CheckBox components

---
 .../webapp/components/CheckBoxComponent.jsx   | 38 ++++++++++++++++++
 .../main/webapp/components/RadioComponent.jsx | 40 +++++++++++++++++++
 .../main/webapp/components/TextComponent.jsx  | 37 +++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
new file mode 100644
index 000000000..878c0085b
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Switch from '@splunk/react-ui/Switch';
+
+class CheckBoxComponent extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleClick = (e) => {
+        this.props.handleClick(this.props.id, e.target.value);
+    };
+
+    render() {
+        return (
+            <Switch
+                key={this.props.field}
+                value={this.props.value}
+                onClick={this.handleClick}
+                selected={this.props.value === 1 ? true : false}
+                appearance="checkbox"
+            >
+                {this.props.label}
+            </Switch>
+        );
+    }
+}
+
+CheckBoxComponent.propTypes = {
+    id: PropTypes.number.isRequired,
+    value: PropTypes.string,
+    handleClick: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    label: PropTypes.string,
+    controlOptions: PropTypes.object,
+};
+
+export default CheckBoxComponent;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx
new file mode 100644
index 000000000..0a9efb4b5
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RadioBar from '@splunk/react-ui/RadioBar';
+
+class RadioComponent extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleChange = (e) => {
+        this.props.handleChange(this.props.id, e.target.value)
+    };
+
+    render() {
+        return (
+            <RadioBar
+                onChange={this.handleChange}
+                value={this.props.value}
+                key={this.props.field}
+                style={{ width: 200 }}
+            >
+                {this.props.controlOptions.items.map(item => (
+                    <RadioBar.Option key={item.value} value={item.value} label={item.label} />
+                ))}
+            </RadioBar>
+        );
+    }
+}
+
+RadioComponent.propTypes = {
+    id: PropTypes.number.isRequired,
+    value: PropTypes.string,
+    handleChange: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.object 
+};
+
+
+export default RadioComponent;
+
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
new file mode 100644
index 000000000..13b258b0d
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Text from '@splunk/react-ui/Text';
+
+class TextComponent extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleChange = (e) => {
+        this.props.handleChange(this.props.id, e.target.value);
+    };
+
+    render() {
+        return (
+            <Text
+                inline
+                placeholder={this.props.controlOptions.placeholder}
+                className={this.props.field}
+                disabled={this.props.controlOptions.display === false ? true : false}
+                value={this.props.value}
+                onChange={this.handleChange}
+                type={this.props.encrypted === true ? 'password' : 'text'}
+            />
+        );
+    }
+}
+
+TextComponent.propTypes = {
+    id: PropTypes.number.isRequired,
+    value: PropTypes.string,
+    handleChange: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.object,
+};
+
+export default TextComponent;

From 057b670dd5a30bbcc466749542a60c0a00f674e4 Mon Sep 17 00:00:00 2001
From: dkhatri-crest <dkhatri@splunk.com>
Date: Fri, 5 Mar 2021 17:34:02 +0530
Subject: [PATCH 06/12] ADDON-34289: Updated Text, Radio and CheckBox
 components

---
 .../src/main/webapp/components/CheckBoxComponent.jsx      | 8 +++-----
 .../src/main/webapp/components/RadioComponent.jsx         | 8 ++++----
 .../src/main/webapp/components/TextComponent.jsx          | 6 +++---
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
index 878c0085b..69a655c87 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
@@ -7,8 +7,8 @@ class CheckBoxComponent extends Component {
         super(props);
     }
 
-    handleClick = (e) => {
-        this.props.handleClick(this.props.id, e.target.value);
+    handleChange = (e, {value}) => {
+        this.props.handleChange(this.props.id, value);
     };
 
     render() {
@@ -16,11 +16,10 @@ class CheckBoxComponent extends Component {
             <Switch
                 key={this.props.field}
                 value={this.props.value}
-                onClick={this.handleClick}
+                onClick={this.handleChange}
                 selected={this.props.value === 1 ? true : false}
                 appearance="checkbox"
             >
-                {this.props.label}
             </Switch>
         );
     }
@@ -31,7 +30,6 @@ CheckBoxComponent.propTypes = {
     value: PropTypes.string,
     handleClick: PropTypes.func.isRequired,
     field: PropTypes.string,
-    label: PropTypes.string,
     controlOptions: PropTypes.object,
 };
 
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx
index 0a9efb4b5..a64c312bf 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx
@@ -7,17 +7,17 @@ class RadioComponent extends Component {
         super(props);
     }
 
-    handleChange = (e) => {
-        this.props.handleChange(this.props.id, e.target.value)
+    handleChange = (e, { value }) => {
+        this.props.handleChange(this.props.id, value);
     };
 
     render() {
         return (
             <RadioBar
+                inline
                 onChange={this.handleChange}
                 value={this.props.value}
                 key={this.props.field}
-                style={{ width: 200 }}
             >
                 {this.props.controlOptions.items.map(item => (
                     <RadioBar.Option key={item.value} value={item.value} label={item.label} />
@@ -32,7 +32,7 @@ RadioComponent.propTypes = {
     value: PropTypes.string,
     handleChange: PropTypes.func.isRequired,
     field: PropTypes.string,
-    controlOptions: PropTypes.object 
+    controlOptions: PropTypes.object
 };
 
 
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
index 13b258b0d..5668afdca 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
@@ -7,8 +7,8 @@ class TextComponent extends Component {
         super(props);
     }
 
-    handleChange = (e) => {
-        this.props.handleChange(this.props.id, e.target.value);
+    handleChange = (e, {value}) => {
+        this.props.handleChange(this.props.id, value);
     };
 
     render() {
@@ -17,7 +17,7 @@ class TextComponent extends Component {
                 inline
                 placeholder={this.props.controlOptions.placeholder}
                 className={this.props.field}
-                disabled={this.props.controlOptions.display === false ? true : false}
+                disabled={this.props.disabled}
                 value={this.props.value}
                 onChange={this.handleChange}
                 type={this.props.encrypted === true ? 'password' : 'text'}

From 4206ce3b229fd0f377b784d3e85ddf7f3ae360bb Mon Sep 17 00:00:00 2001
From: Tushar Balar <tbalar@splunk.com>
Date: Mon, 8 Mar 2021 10:52:37 +0530
Subject: [PATCH 07/12] feat: Refactored table component

---
 .../webapp/components/table/InputTable.jsx    | 221 ---------
 .../main/webapp/components/table/Table.jsx    | 201 +++++++++
 .../components/table/TableExpansionRow.js     |  37 ++
 .../webapp/components/table/TableStyle.jsx    |  13 +
 .../webapp/components/table/TableWrapper.jsx  | 381 ----------------
 .../pages/Configuration/ConfigurationPage.jsx |  14 +
 .../src/main/webapp/pages/Input/InputPage.jsx | 420 ++++++++++++++++++
 .../Input/InputPageStyle.jsx}                 |   5 -
 .../src/main/webapp/pages/entry_page.jsx      |  15 +-
 .../src/main/webapp/util/configManager.js     |   3 +-
 .../webapp/util/uccConfigurationValidators.js |   2 +-
 .../ucc_ui_lib/src/main/webapp/util/util.js   |   2 +-
 12 files changed, 694 insertions(+), 620 deletions(-)
 delete mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTable.jsx
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableStyle.jsx
 delete mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Configuration/ConfigurationPage.jsx
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
 rename splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/{components/table/InputTableStyle.jsx => pages/Input/InputPageStyle.jsx} (76%)

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTable.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTable.jsx
deleted file mode 100644
index d9c54be32..000000000
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTable.jsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import DL from '@splunk/react-ui/DefinitionList';
-import Table from '@splunk/react-ui/Table';
-import Switch from '@splunk/react-ui/Switch';
-import ButtonGroup from '@splunk/react-ui/ButtonGroup';
-import Pencil from '@splunk/react-icons/Pencil';
-import Clone from '@splunk/react-icons/Clone';
-import Trash from '@splunk/react-icons/Trash';
-import Tooltip from '@splunk/react-ui/Tooltip';
-import { _ } from '@splunk/ui-utils/i18n';
-import { ButtonComponent, TitleComponent, SubTitleComponent, TableCaptionComponent } from './InputTableStyle';
-
-function getExpansionRow(colSpan, row) {
-    return (
-        <Table.Row key={`${row.email}-expansion`}>
-            <Table.Cell style={{ borderTop: 'none' }} colSpan={colSpan}>
-                <DL>
-                    <DL.Term>Name</DL.Term>
-                    <DL.Description>{row.name}</DL.Description>
-                    <DL.Term>Interval</DL.Term>
-                    <DL.Description>{row.interval}</DL.Description>
-                    <DL.Term>Index</DL.Term>
-                    <DL.Description>{row.index}</DL.Description>
-                    <DL.Term>Status</DL.Term>
-                    <DL.Description>{String(row.status) ? "Enabled": "Disabled"}</DL.Description>
-                    <DL.Term>Object</DL.Term>
-                    <DL.Description>{row.object}</DL.Description>
-                    <DL.Term>Object Fields</DL.Term>
-                    <DL.Description>{row.object_fields}</DL.Description>
-                    <DL.Term>Order By</DL.Term>
-                    <DL.Description>{row.order_by}</DL.Description>
-                    <DL.Term>Limit</DL.Term>
-                    <DL.Description>{row.limit}</DL.Description>
-                </DL>
-            </Table.Cell>
-        </Table.Row>
-    );
-}
-
-function InputTable({ data, columns, handleToggleActionClick }) {
-
-    const [sortKey, setSortKey] = useState('name');
-    const [sortDir, setSortDir] = useState('asc');
-
-    const handleSort = (e, val) => {
-        const prevSortKey = sortKey;
-        const prevSortDir = prevSortKey === val.sortKey ? sortDir : 'none';
-        const nextSortDir = prevSortDir === 'asc' ? 'desc' : 'asc';
-        setSortDir(nextSortDir);
-        setSortKey(val.sortKey);
-    };
-
-    const modifyRowData = () => {
-        let rows = []
-        data && data.length && data.forEach((entry) => {
-            let row = {
-                "id": entry.id,
-                "name": entry.name,
-                "account": entry.content.account,
-                "interval": entry.content.interval,
-                "index": entry.content.index,
-                "status": entry.content.disabled,
-                "object": entry.content.object,
-                "object_fields": entry.content.object_fields,
-                "order_by": entry.content.order_by,
-                "limit": entry.content.limit,
-            }
-            rows.push(row)
-        });
-        return rows;
-    }
-
-    const getTableHeaders = () => {
-        return (
-            <Table.Head>
-                {columns && columns.length && columns.map((headData) => (
-                    headData.visible && <Table.HeadCell
-                        key={headData.key}
-                        onSort={headData.sortKey ? handleSort: null}
-                        sortKey={headData.sortKey ? headData.sortKey: null}
-                        sortDir={headData.sortKey ? headData.sortKey === sortKey ? sortDir : 'none': null}
-                    >
-                        {headData.label}
-                    </Table.HeadCell>
-                ))}
-            </Table.Head>
-        )
-    }
-
-    const handleEditActionClick = () => {
-
-    }
-
-    const handleCloneActionClick = () => {
-
-    }
-
-    const handleDeleteActionClick = () => {
-
-    }
-
-    const rowActionsPrimaryButton = (row) => {
-        return (
-            <Table.Cell key={row.id}>
-                <ButtonGroup>
-                    <Tooltip
-                        content={_('Edit')}
-                    >
-                        <ButtonComponent
-                            appearance="primary"
-                            icon={<Pencil screenReaderText={null} size={1} />}
-                            onClick={() => handleEditActionClick(row)}
-                        />
-                    </Tooltip>
-                    <Tooltip
-                        content={_('Clone')}
-                    >
-                        <ButtonComponent
-                            appearance="primary"
-                            icon={<Clone screenReaderText={null} size={1} />}
-                            onClick={() => handleCloneActionClick(row)}
-                        />
-                    </Tooltip>
-                    <Tooltip
-                        content={_('Delete')}
-                    >
-                        <ButtonComponent
-                            appearance="primary"
-                            icon={<Trash screenReaderText={null} size={1} />}
-                            onClick={() => handleDeleteActionClick(row)}
-                        />
-                    </Tooltip>
-                </ButtonGroup>
-            </Table.Cell>
-        )
-    }
-
-    const getTableRow = (row) => {
-        return (
-            <Table.Row 
-                key={row.id} 
-                expansionRow={getExpansionRow(columns.length, row)}
-            >
-                {columns && columns.length && columns.map(
-                    (header) => {
-                        if(header.visible) {
-                            if(header.key === "status") {
-                                return (
-                                    <Table.Cell key={header.key}>
-                                        <Switch
-                                            key={row.name}
-                                            value={row.status}
-                                            onClick={() => handleToggleActionClick(row)}
-                                            selected={!row.status}
-                                            appearance="toggle"
-                                        >
-                                            { row.status ? "Disabled": "Enabled"}
-                                        </Switch>
-                                    </Table.Cell>
-                                )
-                            } else if (header.key == "actions") {
-                                return rowActionsPrimaryButton(row);
-                            } else {
-                                return (
-                                    <Table.Cell key={header.key}>
-                                        {row[header.key]}
-                                    </Table.Cell>
-                                )
-                            }
-                        }
-                    }
-                )}
-            </Table.Row>
-        );
-    }
-
-    const getTableBody = () => {
-        const rows = modifyRowData();
-        return (
-            <Table.Body key={rows}>
-                {rows && rows.length && rows
-                    .sort((rowA, rowB) => {
-                        if (sortDir === 'asc') {
-                            return rowA[sortKey] > rowB[sortKey] ? 1 : -1;
-                        }
-                        if (sortDir === 'desc') {
-                            return rowB[sortKey] > rowA[sortKey] ? 1 : -1;
-                        }
-                        return 0;
-                    })
-                    .map((row) => (
-                        getTableRow(row)
-                    ))
-                }
-            </Table.Body>
-        );
-    }
-
-    return (
-        <>
-            <TitleComponent>Inputs</TitleComponent>
-            <SubTitleComponent>Manage your data inputs</SubTitleComponent>
-            <hr />
-            { data &&
-                <>
-                    <TableCaptionComponent>
-                        <div className="table-caption-inner">
-                            {data.length} Input {data.legnth > 1 && <span>s</span>}
-                        </div>
-                    </TableCaptionComponent>
-                    <Table stripeRows rowExpansion="single">
-                        {getTableHeaders()}
-                        {getTableBody()}
-                    </Table>
-                </>
-            }
-        </>
-    );
-}
-
-export default InputTable;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx
new file mode 100644
index 000000000..55be7e6c9
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx
@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+import DL from '@splunk/react-ui/DefinitionList';
+import Table from '@splunk/react-ui/Table';
+import Switch from '@splunk/react-ui/Switch';
+import ButtonGroup from '@splunk/react-ui/ButtonGroup';
+import Pencil from '@splunk/react-icons/Pencil';
+import Clone from '@splunk/react-icons/Clone';
+import Trash from '@splunk/react-icons/Trash';
+import Tooltip from '@splunk/react-ui/Tooltip';
+import { _ } from '@splunk/ui-utils/i18n';
+import PropTypes from 'prop-types';
+
+import { ActionButtonComponent } from './TableStyle';
+import { getUnifiedConfigs } from '../../util/util';
+import { getExpansionRow } from './TableExpansionRow';
+
+
+function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
+
+    const [sortKey, setSortKey] = useState('name');
+    const [sortDir, setSortDir] = useState('asc');
+    const [columns, setColumns] = useState([]);
+
+    useEffect(() => {
+        console.log("isInput: ", isInput);
+        console.log("Unified config: ", getUnifiedConfigs());
+        generateColumns();
+    }, []);
+
+    const generateColumns = () => {
+        const unifiedConfigs = getUnifiedConfigs();
+        let column = [];
+        if (isInput) {
+            let headers = unifiedConfigs.pages.inputs.table.header;
+            if (headers && headers.length) {
+                headers.forEach((header) => {
+                    column.push({
+                        ...header,
+                        sortKey: header.field || null
+                    });
+                });
+            }
+            column.push({ label: 'Actions', field: 'actions', sortKey: '' });
+            console.log("Columns: ", column);
+            setColumns(column);
+        }
+    }
+
+    const handleSort = (e, val) => {
+        const prevSortKey = sortKey;
+        const prevSortDir = prevSortKey === val.sortKey ? sortDir : 'none';
+        const nextSortDir = prevSortDir === 'asc' ? 'desc' : 'asc';
+        setSortDir(nextSortDir);
+        setSortKey(val.sortKey);
+    };
+
+    const getTableHeaders = () => {
+        return (
+            <Table.Head>
+                {columns && columns.length && columns.map((headData) => (
+                    <Table.HeadCell
+                        key={headData.field}
+                        onSort={headData.sortKey ? handleSort: null}
+                        sortKey={headData.sortKey ? headData.sortKey: null}
+                        sortDir={headData.sortKey ? headData.sortKey === sortKey ? sortDir : 'none': null}
+                    >
+                        {headData.label}
+                    </Table.HeadCell>
+                ))}
+            </Table.Head>
+        )
+    }
+
+    const handleEditActionClick = () => {
+
+    }
+
+    const handleCloneActionClick = () => {
+
+    }
+
+    const handleDeleteActionClick = () => {
+
+    }
+
+    const rowActionsPrimaryButton = (row) => {
+        return (
+            <Table.Cell key={row.id}>
+                <ButtonGroup>
+                    <Tooltip
+                        content={_('Edit')}
+                    >
+                        <ActionButtonComponent
+                            appearance="primary"
+                            icon={<Pencil screenReaderText={null} size={1} />}
+                            onClick={() => handleEditActionClick(row)}
+                        />
+                    </Tooltip>
+                    <Tooltip
+                        content={_('Clone')}
+                    >
+                        <ActionButtonComponent
+                            appearance="primary"
+                            icon={<Clone screenReaderText={null} size={1} />}
+                            onClick={() => handleCloneActionClick(row)}
+                        />
+                    </Tooltip>
+                    <Tooltip
+                        content={_('Delete')}
+                    >
+                        <ActionButtonComponent
+                            appearance="primary"
+                            icon={<Trash screenReaderText={null} size={1} />}
+                            onClick={() => handleDeleteActionClick(row)}
+                        />
+                    </Tooltip>
+                </ButtonGroup>
+            </Table.Cell>
+        )
+    }
+
+    const getTableRow = (row) => {
+        return (
+            <Table.Row 
+                key={row.id}
+                expansionRow={getExpansionRow(columns.length, row)}
+            >
+                {columns && columns.length && columns.map((header) => {
+                    if(header.field === "disabled") {
+                        return (
+                            <Table.Cell key={header.field}>
+                                <Switch
+                                    key={row.name}
+                                    value={row.disabled}
+                                    onClick={() => handleToggleActionClick(row)}
+                                    selected={!row.disabled}
+                                    appearance="toggle"
+                                >
+                                    { row.disabled ? "Disabled" : "Enabled" }
+                                </Switch>
+                            </Table.Cell>
+                        )
+                    } else if (header.field == "actions") {
+                        return rowActionsPrimaryButton(row);
+                    } else {
+                        return (
+                            <Table.Cell key={header.field}>
+                                {row[header.field]}
+                            </Table.Cell>
+                        )
+                    }
+                })}
+            </Table.Row>
+        );
+    }
+
+    const getTableBody = () => {
+        const rows = data;
+        return (
+            <Table.Body>
+                {data && data.length && data
+                    .sort((rowA, rowB) => {
+                        if (sortDir === 'asc') {
+                            return rowA[sortKey] > rowB[sortKey] ? 1 : -1;
+                        }
+                        if (sortDir === 'desc') {
+                            return rowB[sortKey] > rowA[sortKey] ? 1 : -1;
+                        }
+                        return 0;
+                    })
+                    .map((row) => (
+                        getTableRow(row)
+                    ))
+                }
+            </Table.Body>
+        );
+    }
+
+    return (
+        <>
+            { columns && columns.length &&
+                <>
+                    <Table stripeRows rowExpansion="single">
+                        {getTableHeaders()}
+                        {getTableBody()}
+                    </Table>
+                </>
+            }
+        </>
+    );
+}
+
+InputTable.propTypes = {
+    isInput: PropTypes.boolean,
+    serviceName: PropTypes.string.isRequired,
+    data: PropTypes.object.isRequired,
+    handleToggleActionClick: PropTypes.func
+};
+
+export default InputTable;
+
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js
new file mode 100644
index 000000000..b46aa8b6c
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import DL from '@splunk/react-ui/DefinitionList';
+import Table from '@splunk/react-ui/Table';
+import { getUnifiedConfigs } from '../../util/util';
+
+function getExpansionRowData(row) {
+    const unifiedConfigs = getUnifiedConfigs();
+    let moreInfo = unifiedConfigs.pages.inputs.table.moreInfo;
+    return (
+        moreInfo && moreInfo.length && moreInfo.map((val) => {
+            return (
+                <>
+                    { (row[val.field] || val.label == "Status") &&
+                        <>
+                            <DL.Term>{val.label}</DL.Term>
+                            <DL.Description>
+                                { val.label == "Status" ? row[val.field] ? 'Disabled': 'Enabled': `${row[val.field]}` }
+                            </DL.Description>
+                        </>
+                    }
+                </>
+            )
+        })
+    )
+}
+
+export function getExpansionRow(colSpan, row) {
+    return (
+        <Table.Row key={`${row.id}-expansion`}>
+            <Table.Cell style={{ borderTop: 'none' }} colSpan={colSpan}>
+                <DL>
+                    {getExpansionRowData(row)}
+                </DL>
+            </Table.Cell>
+        </Table.Row>
+    );
+}
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableStyle.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableStyle.jsx
new file mode 100644
index 000000000..098eb5697
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableStyle.jsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import Button from '@splunk/react-ui/Button';
+import WaitSpinner from '@splunk/react-ui/WaitSpinner';
+
+export const ActionButtonComponent = styled(Button)`
+    margin: 0px 5px;
+`;
+
+export const WaitSpinnerWrapper = styled(WaitSpinner)`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+`;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx
deleted file mode 100644
index 580444081..000000000
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx
+++ /dev/null
@@ -1,381 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { createURL } from '@splunk/splunk-utils/url';
-import {defaultFetchInit} from '@splunk/splunk-utils/fetch';
-import * as _ from "lodash";
-
-import InputTable from './InputTable';
-
-function TableWrapper() {
-
-    const [data, setData] = useState([
-        {
-          "name": "account",
-          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
-          "updated": "1970-01-01T00:00:00+00:00",
-          "links": {
-            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
-            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
-            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
-            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account"
-          },
-          "author": "nobody",
-          "acl": {
-            "app": "Splunk_TA_salesforce",
-            "can_list": true,
-            "can_write": true,
-            "modifiable": false,
-            "owner": "nobody",
-            "perms": {
-              "read": [
-                "admin",
-                "power",
-                "splunk-system-role",
-                "user"
-              ],
-              "write": [
-                "admin",
-                "splunk-system-role"
-              ]
-            },
-            "removable": true,
-            "sharing": "app"
-          },
-          "content": {
-            "disabled": false,
-            "eai:acl": null,
-            "host": "$decideOnStartup",
-            "host_resolved": "so1",
-            "index": "11default",
-            "interval": "1200",
-            "limit": "1000",
-            "object": "Account",
-            "object_fields": "Id,LastModifiedById,LastModifiedDate,Name",
-            "order_by": "LastModifiedDate",
-            "python.version": null,
-            "sourcetype": "sfdc:object",
-            "start_by_shell": "false"
-          }
-        },
-        {
-          "name": "contentversion",
-          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
-          "updated": "1970-01-01T00:00:00+00:00",
-          "links": {
-            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
-            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
-            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
-            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion"
-          },
-          "author": "nobody",
-          "acl": {
-            "app": "Splunk_TA_salesforce",
-            "can_list": true,
-            "can_write": true,
-            "modifiable": false,
-            "owner": "nobody",
-            "perms": {
-              "read": [
-                "admin",
-                "power",
-                "splunk-system-role",
-                "user"
-              ],
-              "write": [
-                "admin",
-                "splunk-system-role"
-              ]
-            },
-            "removable": true,
-            "sharing": "app"
-          },
-          "content": {
-            "disabled": false,
-            "eai:acl": null,
-            "host": "$decideOnStartup",
-            "host_resolved": "so1",
-            "index": "default",
-            "interval": "1200",
-            "limit": "1000",
-            "object": "ContentVersion",
-            "object_fields": "Id,LastModifiedById,LastModifiedDate,Title",
-            "order_by": "LastModifiedDate",
-            "python.version": null,
-            "sourcetype": "sfdc:object",
-            "start_by_shell": "false"
-          }
-        },
-        {
-          "name": "dashboard",
-          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
-          "updated": "1970-01-01T00:00:00+00:00",
-          "links": {
-            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
-            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
-            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
-            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard"
-          },
-          "author": "nobody",
-          "acl": {
-            "app": "Splunk_TA_salesforce",
-            "can_list": true,
-            "can_write": true,
-            "modifiable": false,
-            "owner": "nobody",
-            "perms": {
-              "read": [
-                "admin",
-                "power",
-                "splunk-system-role",
-                "user"
-              ],
-              "write": [
-                "admin",
-                "splunk-system-role"
-              ]
-            },
-            "removable": true,
-            "sharing": "app"
-          },
-          "content": {
-            "disabled": true,
-            "eai:acl": null,
-            "account": "Temp1",
-            "host": "$decideOnStartup",
-            "host_resolved": "so1",
-            "index": "22default",
-            "interval": "1200",
-            "limit": "1000",
-            "object": "Dashboard",
-            "object_fields": "Id,LastModifiedDate,Title",
-            "order_by": "LastModifiedDate",
-            "python.version": null,
-            "sourcetype": "sfdc:object",
-            "start_by_shell": "false"
-          }
-        },
-        {
-          "name": "loginhistory",
-          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
-          "updated": "1970-01-01T00:00:00+00:00",
-          "links": {
-            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
-            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
-            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
-            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory"
-          },
-          "author": "nobody",
-          "acl": {
-            "app": "Splunk_TA_salesforce",
-            "can_list": true,
-            "can_write": true,
-            "modifiable": false,
-            "owner": "nobody",
-            "perms": {
-              "read": [
-                "admin",
-                "power",
-                "splunk-system-role",
-                "user"
-              ],
-              "write": [
-                "admin",
-                "splunk-system-role"
-              ]
-            },
-            "removable": true,
-            "sharing": "app"
-          },
-          "content": {
-            "disabled": true,
-            "eai:acl": null,
-            "account": "Other",
-            "host": "$decideOnStartup",
-            "host_resolved": "so1",
-            "index": "default",
-            "interval": "60",
-            "limit": "1000",
-            "object": "LoginHistory",
-            "object_fields": "ApiType,ApiVersion,Application,Browser,ClientVersion,Id,LoginTime,LoginType,LoginUrl,Platform,SourceIp,Status,UserId",
-            "order_by": "LoginTime",
-            "python.version": null,
-            "sourcetype": "sfdc:object",
-            "start_by_shell": "false"
-          }
-        },
-        {
-          "name": "opportunity",
-          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
-          "updated": "1970-01-01T00:00:00+00:00",
-          "links": {
-            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
-            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
-            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
-            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity"
-          },
-          "author": "nobody",
-          "acl": {
-            "app": "Splunk_TA_salesforce",
-            "can_list": true,
-            "can_write": true,
-            "modifiable": false,
-            "owner": "nobody",
-            "perms": {
-              "read": [
-                "admin",
-                "power",
-                "splunk-system-role",
-                "user"
-              ],
-              "write": [
-                "admin",
-                "splunk-system-role"
-              ]
-            },
-            "removable": true,
-            "sharing": "app"
-          },
-          "content": {
-            "disabled": true,
-            "eai:acl": null,
-            "account": "Dummy1",
-            "host": "$decideOnStartup",
-            "host_resolved": "so1",
-            "index": "default",
-            "interval": "1200",
-            "limit": "1000",
-            "object": "Opportunity",
-            "object_fields": "Id,LastModifiedById,LastModifiedDate,Name",
-            "order_by": "LastModifiedDate",
-            "python.version": null,
-            "sourcetype": "sfdc:object",
-            "start_by_shell": "false"
-          }
-        },
-        {
-          "name": "report",
-          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
-          "updated": "1970-01-01T00:00:00+00:00",
-          "links": {
-            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
-            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
-            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
-            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report"
-          },
-          "author": "nobody",
-          "acl": {
-            "app": "Splunk_TA_salesforce",
-            "can_list": true,
-            "can_write": true,
-            "modifiable": false,
-            "owner": "nobody",
-            "perms": {
-              "read": [
-                "admin",
-                "power",
-                "splunk-system-role",
-                "user"
-              ],
-              "write": [
-                "admin",
-                "splunk-system-role"
-              ]
-            },
-            "removable": true,
-            "sharing": "app"
-          },
-          "content": {
-            "disabled": true,
-            "eai:acl": null,
-            "account": "Test",
-            "host": "$decideOnStartup",
-            "host_resolved": "so1",
-            "index": "default",
-            "interval": "1200",
-            "limit": "1000",
-            "object": "Report",
-            "object_fields": "Id,LastModifiedDate,Name",
-            "order_by": "LastModifiedDate",
-            "python.version": null,
-            "sourcetype": "sfdc:object",
-            "start_by_shell": "false"
-          }
-        },
-        {
-          "name": "user",
-          "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
-          "updated": "1970-01-01T00:00:00+00:00",
-          "links": {
-            "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
-            "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
-            "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
-            "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user"
-          },
-          "author": "nobody",
-          "acl": {
-            "app": "Splunk_TA_salesforce",
-            "can_list": true,
-            "can_write": true,
-            "modifiable": false,
-            "owner": "nobody",
-            "perms": {
-              "read": [
-                "admin",
-                "power",
-                "splunk-system-role",
-                "user"
-              ],
-              "write": [
-                "admin",
-                "splunk-system-role"
-              ]
-            },
-            "removable": true,
-            "sharing": "app"
-          },
-          "content": {
-            "disabled": true,
-            "account": "Tushar",
-            "eai:acl": null,
-            "host": "$decideOnStartup",
-            "host_resolved": "so1",
-            "index": "default",
-            "interval": "1200",
-            "limit": "1000",
-            "object": "User",
-            "object_fields": "LastModifiedDate,City,Country,FirstName,Id,IsActive,LastLoginDate,LastName,Latitude,Longitude,MobilePhone,Name,PostalCode,State,Username,UserRoleId,UserType,Email,CompanyName,ProfileId,Profile.PermissionsApiEnabled,Profile.PermissionsModifyAllData,Profile.PermissionsViewSetup",
-            "order_by": "LastModifiedDate",
-            "python.version": null,
-            "sourcetype": "sfdc:object",
-            "start_by_shell": "false"
-          }
-        }
-      ]);
-      
-    const [columns, setColumns] = useState([
-        { sortKey: 'name', key: 'name', label: 'Name', width: 300, minWidth: 80, visible: true },
-        { sortKey: 'account', key: 'account', label: 'Account Name', width: 300, minWidth: 80, visible: true },
-        { sortKey: 'interval', key: 'interval', label: 'Interval', width: 300, minWidth: 80, visible: true },
-        { sortKey: 'index', key: 'index', label: 'Index', width: 300, minWidth: 80, visible: true },
-        { sortKey: 'status', key: 'status', label: 'Status', width: 300, minWidth: 80, visible: true },
-        { sortKey: '', key: 'actions', label: 'Actions', width: 200, minWidth: 80, visible: true }
-    ]);
-
-    const changeStatus = (row) => {
-        let oldData = _.cloneDeep(data);
-        const index = _.findIndex(oldData, (o) => { return o.id == row.id });
-        if (index != -1) {
-            oldData[index].content.disabled = !oldData[index].content.disabled;
-        }
-        setData(oldData);
-    }
-
-    return (
-        <InputTable 
-            data={data} 
-            columns={columns} 
-            handleToggleActionClick={(row) => changeStatus(row)}
-        />
-    );
-}
-
-export default TableWrapper;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Configuration/ConfigurationPage.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Configuration/ConfigurationPage.jsx
new file mode 100644
index 000000000..2ec133218
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Configuration/ConfigurationPage.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { TitleComponent, SubTitleComponent } from '../Input/InputPageStyle';
+
+function ConfigurationPage() {
+    return (
+        <>
+            <TitleComponent>Configuration</TitleComponent>
+            <SubTitleComponent>Set up your add-on</SubTitleComponent>
+            <hr />
+        </>
+    )
+};
+
+export default ConfigurationPage;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
new file mode 100644
index 000000000..eae512acb
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
@@ -0,0 +1,420 @@
+import React, { useState, useEffect } from 'react';
+import { createURL } from '@splunk/splunk-utils/url';
+import {defaultFetchInit} from '@splunk/splunk-utils/fetch';
+
+import { WaitSpinnerWrapper } from '../../components/table/TableStyle';
+import { TitleComponent, SubTitleComponent, TableCaptionComponent } from './InputPageStyle';
+import Table from '../../components/table/Table';
+
+function InputPage({isInput, serviceName}) {
+
+    const [loading, setLoading] = useState(true);
+    const [rowData, setRowData] = useState([]);
+
+    useEffect(() => {
+      setLoading(true);
+      setTimeout(() => {
+        // API call response
+        const data = [
+          {
+            "name": "account",
+            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
+            "updated": "1970-01-01T00:00:00+00:00",
+            "links": {
+              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
+              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
+              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
+              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account"
+            },
+            "author": "nobody",
+            "acl": {
+              "app": "Splunk_TA_salesforce",
+              "can_list": true,
+              "can_write": true,
+              "modifiable": false,
+              "owner": "nobody",
+              "perms": {
+                "read": [
+                  "admin",
+                  "power",
+                  "splunk-system-role",
+                  "user"
+                ],
+                "write": [
+                  "admin",
+                  "splunk-system-role"
+                ]
+              },
+              "removable": true,
+              "sharing": "app"
+            },
+            "content": {
+              "disabled": false,
+              "eai:acl": null,
+              "host": "$decideOnStartup",
+              "host_resolved": "so1",
+              "index": "11default",
+              "interval": "1200",
+              "limit": "1000",
+              "object": "Account",
+              "object_fields": "Id,LastModifiedById,LastModifiedDate,Name",
+              "order_by": "LastModifiedDate",
+              "python.version": null,
+              "sourcetype": "sfdc:object",
+              "start_by_shell": "false"
+            }
+          },
+          {
+            "name": "contentversion",
+            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
+            "updated": "1970-01-01T00:00:00+00:00",
+            "links": {
+              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
+              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
+              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
+              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion"
+            },
+            "author": "nobody",
+            "acl": {
+              "app": "Splunk_TA_salesforce",
+              "can_list": true,
+              "can_write": true,
+              "modifiable": false,
+              "owner": "nobody",
+              "perms": {
+                "read": [
+                  "admin",
+                  "power",
+                  "splunk-system-role",
+                  "user"
+                ],
+                "write": [
+                  "admin",
+                  "splunk-system-role"
+                ]
+              },
+              "removable": true,
+              "sharing": "app"
+            },
+            "content": {
+              "disabled": false,
+              "eai:acl": null,
+              "host": "$decideOnStartup",
+              "host_resolved": "so1",
+              "index": "default",
+              "interval": "1200",
+              "limit": "1000",
+              "object": "ContentVersion",
+              "object_fields": "Id,LastModifiedById,LastModifiedDate,Title",
+              "order_by": "LastModifiedDate",
+              "python.version": null,
+              "sourcetype": "sfdc:object",
+              "start_by_shell": "false"
+            }
+          },
+          {
+            "name": "dashboard",
+            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
+            "updated": "1970-01-01T00:00:00+00:00",
+            "links": {
+              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
+              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
+              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
+              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard"
+            },
+            "author": "nobody",
+            "acl": {
+              "app": "Splunk_TA_salesforce",
+              "can_list": true,
+              "can_write": true,
+              "modifiable": false,
+              "owner": "nobody",
+              "perms": {
+                "read": [
+                  "admin",
+                  "power",
+                  "splunk-system-role",
+                  "user"
+                ],
+                "write": [
+                  "admin",
+                  "splunk-system-role"
+                ]
+              },
+              "removable": true,
+              "sharing": "app"
+            },
+            "content": {
+              "disabled": true,
+              "eai:acl": null,
+              "account": "Temp1",
+              "host": "$decideOnStartup",
+              "host_resolved": "so1",
+              "index": "22default",
+              "interval": "1200",
+              "limit": "1000",
+              "object": "Dashboard",
+              "object_fields": "Id,LastModifiedDate,Title",
+              "order_by": "LastModifiedDate",
+              "python.version": null,
+              "sourcetype": "sfdc:object",
+              "start_by_shell": "false"
+            }
+          },
+          {
+            "name": "loginhistory",
+            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
+            "updated": "1970-01-01T00:00:00+00:00",
+            "links": {
+              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
+              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
+              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
+              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory"
+            },
+            "author": "nobody",
+            "acl": {
+              "app": "Splunk_TA_salesforce",
+              "can_list": true,
+              "can_write": true,
+              "modifiable": false,
+              "owner": "nobody",
+              "perms": {
+                "read": [
+                  "admin",
+                  "power",
+                  "splunk-system-role",
+                  "user"
+                ],
+                "write": [
+                  "admin",
+                  "splunk-system-role"
+                ]
+              },
+              "removable": true,
+              "sharing": "app"
+            },
+            "content": {
+              "disabled": true,
+              "eai:acl": null,
+              "account": "Other",
+              "host": "$decideOnStartup",
+              "host_resolved": "so1",
+              "index": "default",
+              "interval": "60",
+              "limit": "1000",
+              "object": "LoginHistory",
+              "object_fields": "ApiType,ApiVersion,Application,Browser,ClientVersion,Id,LoginTime,LoginType,LoginUrl,Platform,SourceIp,Status,UserId",
+              "order_by": "LoginTime",
+              "python.version": null,
+              "sourcetype": "sfdc:object",
+              "start_by_shell": "false"
+            }
+          },
+          {
+            "name": "opportunity",
+            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
+            "updated": "1970-01-01T00:00:00+00:00",
+            "links": {
+              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
+              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
+              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
+              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity"
+            },
+            "author": "nobody",
+            "acl": {
+              "app": "Splunk_TA_salesforce",
+              "can_list": true,
+              "can_write": true,
+              "modifiable": false,
+              "owner": "nobody",
+              "perms": {
+                "read": [
+                  "admin",
+                  "power",
+                  "splunk-system-role",
+                  "user"
+                ],
+                "write": [
+                  "admin",
+                  "splunk-system-role"
+                ]
+              },
+              "removable": true,
+              "sharing": "app"
+            },
+            "content": {
+              "disabled": true,
+              "eai:acl": null,
+              "account": "Dummy1",
+              "host": "$decideOnStartup",
+              "host_resolved": "so1",
+              "index": "default",
+              "interval": "1200",
+              "limit": "1000",
+              "object": "Opportunity",
+              "object_fields": "Id,LastModifiedById,LastModifiedDate,Name",
+              "order_by": "LastModifiedDate",
+              "python.version": null,
+              "sourcetype": "sfdc:object",
+              "start_by_shell": "false"
+            }
+          },
+          {
+            "name": "report",
+            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
+            "updated": "1970-01-01T00:00:00+00:00",
+            "links": {
+              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
+              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
+              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
+              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report"
+            },
+            "author": "nobody",
+            "acl": {
+              "app": "Splunk_TA_salesforce",
+              "can_list": true,
+              "can_write": true,
+              "modifiable": false,
+              "owner": "nobody",
+              "perms": {
+                "read": [
+                  "admin",
+                  "power",
+                  "splunk-system-role",
+                  "user"
+                ],
+                "write": [
+                  "admin",
+                  "splunk-system-role"
+                ]
+              },
+              "removable": true,
+              "sharing": "app"
+            },
+            "content": {
+              "disabled": true,
+              "eai:acl": null,
+              "account": "Test",
+              "host": "$decideOnStartup",
+              "host_resolved": "so1",
+              "index": "default",
+              "interval": "1200",
+              "limit": "1000",
+              "object": "Report",
+              "object_fields": "Id,LastModifiedDate,Name",
+              "order_by": "LastModifiedDate",
+              "python.version": null,
+              "sourcetype": "sfdc:object",
+              "start_by_shell": "false"
+            }
+          },
+          {
+            "name": "user",
+            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
+            "updated": "1970-01-01T00:00:00+00:00",
+            "links": {
+              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
+              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
+              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
+              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user"
+            },
+            "author": "nobody",
+            "acl": {
+              "app": "Splunk_TA_salesforce",
+              "can_list": true,
+              "can_write": true,
+              "modifiable": false,
+              "owner": "nobody",
+              "perms": {
+                "read": [
+                  "admin",
+                  "power",
+                  "splunk-system-role",
+                  "user"
+                ],
+                "write": [
+                  "admin",
+                  "splunk-system-role"
+                ]
+              },
+              "removable": true,
+              "sharing": "app"
+            },
+            "content": {
+              "disabled": true,
+              "account": "Tushar",
+              "eai:acl": null,
+              "host": "$decideOnStartup",
+              "host_resolved": "so1",
+              "index": "default",
+              "interval": "1200",
+              "limit": "1000",
+              "object": "User",
+              "object_fields": "LastModifiedDate,City,Country,FirstName,Id,IsActive,LastLoginDate,LastName,Latitude,Longitude,MobilePhone,Name,PostalCode,State,Username,UserRoleId,UserType,Email,CompanyName,ProfileId,Profile.PermissionsApiEnabled,Profile.PermissionsModifyAllData,Profile.PermissionsViewSetup",
+              "order_by": "LastModifiedDate",
+              "python.version": null,
+              "sourcetype": "sfdc:object",
+              "start_by_shell": "false"
+            }
+          }
+        ];
+        modifyAPIResponse(data);
+      }, 1000);
+    }, []);
+
+    const modifyAPIResponse = (data) => {
+      if (data && data.length) {
+        let rowData = [];
+        data.map((val) => {
+          rowData.push({
+            ...val.content,
+            id: val.id,
+            name: val.name
+          });
+        });
+        setRowData(rowData);
+        console.log("Row Data: ", rowData);
+        setLoading(false);
+      }
+    }
+
+    /**
+     * 
+     * @param row {Object} row
+     */
+    const changeStatus = (row) => {
+        let oldData = rowData;
+        const index = oldData.findIndex((val) => { return val.id == row.id });
+        if (index != -1) {
+            oldData[index].disabled = !oldData[index].disabled;
+        }
+        setRowData(data => ([...oldData]));
+    }
+
+    return (
+      <>
+        { loading ? 
+          <WaitSpinnerWrapper size="large" /> :
+          
+          <>
+            <TitleComponent>Inputs</TitleComponent>
+            <SubTitleComponent>Manage your data inputs</SubTitleComponent>
+            <hr />
+            <TableCaptionComponent>
+              <div className="table-caption-inner">
+                  {rowData.length} Input {rowData.legnth > 1 && <span>s</span>}
+              </div>
+            </TableCaptionComponent>
+            <Table
+                isInput={isInput}
+                serviceName={serviceName}
+                data={rowData} 
+                handleToggleActionClick={(row) => changeStatus(row)}
+            />
+          </>
+        }
+      </>
+    );
+};
+
+export default InputPage;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTableStyle.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPageStyle.jsx
similarity index 76%
rename from splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTableStyle.jsx
rename to splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPageStyle.jsx
index 1d4f9b479..2088c95f8 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/InputTableStyle.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPageStyle.jsx
@@ -1,11 +1,6 @@
 import styled from 'styled-components';
-import Button from '@splunk/react-ui/Button';
 import { variables } from '@splunk/themes';
 
-export const ButtonComponent = styled(Button)`
-    margin: 0px 5px;
-`;
-
 export const TitleComponent = styled.div`
     font-size: ${variables.fontSizeXXLarge};
 `;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
index 944d9ea97..114333b4d 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
@@ -3,10 +3,10 @@ import layout from '@splunk/react-page';
 import { SplunkThemeProvider } from '@splunk/themes';
 import { defaultTheme } from '@splunk/splunk-utils/themes';
 
+import { StyledContainer } from './entryPageStyle';
 import ConfigManager from '../util/configManager';
-import TestComponent from '../components/TestComponent';
-import TableWrapper from '../components/table/TableWrapper';
-import { StyledContainer, StyledGreeting } from './EntryPageStyle';
+import InputPage from './Input/InputPage';
+import ConfigurationPage from './Configuration/ConfigurationPage';
 
 const defaultThemeSplunkThemeProviderMap = {
     enterprise: {
@@ -40,7 +40,7 @@ if (page === 'inputs') {
             <StyledContainer>
                 <ConfigManager>
                     {({loading, appData}) => {
-                        return !loading && appData && <TableWrapper />
+                        return !loading && appData && <InputPage isInput serviceName="" />
                     }}
                 </ConfigManager>
             </StyledContainer>
@@ -53,12 +53,7 @@ if (page === 'inputs') {
             <StyledContainer>
                 <ConfigManager>
                     {({loading, appData}) => {
-                        return !loading && appData && (
-                            <>
-                                <StyledGreeting>Hello, from inside Configuration!</StyledGreeting>
-                                <TestComponent name="from inside TestComponent" />
-                            </>
-                        )
+                        return !loading && appData && <ConfigurationPage />
                     }}
                 </ConfigManager>
             </StyledContainer>
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js
index b1084cecf..91de7ca20 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js
@@ -14,6 +14,7 @@ const WaitSpinnerWrapper = styled(WaitSpinner)`
     top: 50%;
     left: 50%;
 `;
+
 class ConfigManager extends Component {
 
     constructor(props) {
@@ -83,7 +84,7 @@ class ConfigManager extends Component {
         return (
             <>
                 {
-                    this.state.loading ? 
+                    this.state.loading ?
                     <WaitSpinnerWrapper size="large" /> : 
                     this.renderComponents()
                 }
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/uccConfigurationValidators.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/uccConfigurationValidators.js
index 725cb5755..08c14fc7a 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/uccConfigurationValidators.js
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/uccConfigurationValidators.js
@@ -252,4 +252,4 @@ export const validateSchema = (config) => {
         failed: !!res.errors.length,
         errors: res.errors
     });
-}
\ No newline at end of file
+}
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/util.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/util.js
index 8222aa04c..bc8172106 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/util.js
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/util.js
@@ -21,4 +21,4 @@ export function setUnifiedConfig(unifiedConfig) {
 
 export function getUnifiedConfigs() {
     return unifiedConfigs;
-}
\ No newline at end of file
+}

From 86404131ec50f5e91c357a2efaef716e047215d4 Mon Sep 17 00:00:00 2001
From: Tushar Balar <tbalar@splunk.com>
Date: Mon, 8 Mar 2021 11:00:20 +0530
Subject: [PATCH 08/12] feat: Updated file name

---
 .../ucc_ui_lib/src/main/webapp/pages/entry_page.jsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
index 114333b4d..5facbb451 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
@@ -3,7 +3,7 @@ import layout from '@splunk/react-page';
 import { SplunkThemeProvider } from '@splunk/themes';
 import { defaultTheme } from '@splunk/splunk-utils/themes';
 
-import { StyledContainer } from './entryPageStyle';
+import { StyledContainer } from './EntryPageStyle';
 import ConfigManager from '../util/configManager';
 import InputPage from './Input/InputPage';
 import ConfigurationPage from './Configuration/ConfigurationPage';
@@ -39,8 +39,8 @@ if (page === 'inputs') {
         <SplunkThemeProvider {...themeProviderSettings}>
             <StyledContainer>
                 <ConfigManager>
-                    {({loading, appData}) => {
-                        return !loading && appData && <InputPage isInput serviceName="" />
+                    {({ loading, appData }) => {
+                        return !loading && appData && <InputPage isInput serviceName="" />;
                     }}
                 </ConfigManager>
             </StyledContainer>
@@ -52,8 +52,8 @@ if (page === 'inputs') {
         <SplunkThemeProvider {...themeProviderSettings}>
             <StyledContainer>
                 <ConfigManager>
-                    {({loading, appData}) => {
-                        return !loading && appData && <ConfigurationPage />
+                    {({ loading, appData }) => {
+                        return !loading && appData && <ConfigurationPage />;
                     }}
                 </ConfigManager>
             </StyledContainer>

From 6b7150a506c39b65da4b50f65e8f2b4847bb7dd7 Mon Sep 17 00:00:00 2001
From: Tushar Balar <tbalar@splunk.com>
Date: Mon, 8 Mar 2021 11:16:05 +0530
Subject: [PATCH 09/12] feat: Set configuration page to default

---
 .../src/main/resources/splunk/default/data/ui/nav/default.xml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml
index 76f8b5754..4fb6bfd91 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml
@@ -1,5 +1,5 @@
 <nav>
-    <view name="inputs" default="true" />
-    <view name="configuration" />
+    <view name="inputs" />
+    <view name="configuration" default="true" />
     <view name="search" />
 </nav>

From 24f663b9bb09956e395fa1ce50bb75d85c80c8fd Mon Sep 17 00:00:00 2001
From: Tushar Balar <tbalar@splunk.com>
Date: Mon, 8 Mar 2021 12:25:52 +0530
Subject: [PATCH 10/12] feat: Added localization in titles

---
 .../main/webapp/components/table/Table.jsx    | 162 ++--
 .../components/table/TableExpansionRow.js     |   7 +-
 .../src/main/webapp/pages/Input/InputPage.jsx | 776 +++++++++---------
 3 files changed, 460 insertions(+), 485 deletions(-)

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx
index 55be7e6c9..f5bbcc0a2 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import DL from '@splunk/react-ui/DefinitionList';
 import Table from '@splunk/react-ui/Table';
 import Switch from '@splunk/react-ui/Switch';
 import ButtonGroup from '@splunk/react-ui/ButtonGroup';
@@ -14,16 +13,12 @@ import { ActionButtonComponent } from './TableStyle';
 import { getUnifiedConfigs } from '../../util/util';
 import { getExpansionRow } from './TableExpansionRow';
 
-
 function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
-
     const [sortKey, setSortKey] = useState('name');
     const [sortDir, setSortDir] = useState('asc');
     const [columns, setColumns] = useState([]);
 
     useEffect(() => {
-        console.log("isInput: ", isInput);
-        console.log("Unified config: ", getUnifiedConfigs());
         generateColumns();
     }, []);
 
@@ -36,15 +31,14 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
                 headers.forEach((header) => {
                     column.push({
                         ...header,
-                        sortKey: header.field || null
+                        sortKey: header.field || null,
                     });
                 });
             }
             column.push({ label: 'Actions', field: 'actions', sortKey: '' });
-            console.log("Columns: ", column);
             setColumns(column);
         }
-    }
+    };
 
     const handleSort = (e, val) => {
         const prevSortKey = sortKey;
@@ -57,57 +51,53 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
     const getTableHeaders = () => {
         return (
             <Table.Head>
-                {columns && columns.length && columns.map((headData) => (
-                    <Table.HeadCell
-                        key={headData.field}
-                        onSort={headData.sortKey ? handleSort: null}
-                        sortKey={headData.sortKey ? headData.sortKey: null}
-                        sortDir={headData.sortKey ? headData.sortKey === sortKey ? sortDir : 'none': null}
-                    >
-                        {headData.label}
-                    </Table.HeadCell>
-                ))}
+                {columns &&
+                    columns.length &&
+                    columns.map((headData) => (
+                        <Table.HeadCell
+                            key={headData.field}
+                            onSort={headData.sortKey ? handleSort : null}
+                            sortKey={headData.sortKey ? headData.sortKey : null}
+                            sortDir={
+                                headData.sortKey
+                                    ? headData.sortKey === sortKey
+                                        ? sortDir
+                                        : 'none'
+                                    : null
+                            }
+                        >
+                            {headData.label}
+                        </Table.HeadCell>
+                    ))}
             </Table.Head>
-        )
-    }
-
-    const handleEditActionClick = () => {
-
-    }
-
-    const handleCloneActionClick = () => {
+        );
+    };
 
-    }
+    const handleEditActionClick = () => {};
 
-    const handleDeleteActionClick = () => {
+    const handleCloneActionClick = () => {};
 
-    }
+    const handleDeleteActionClick = () => {};
 
     const rowActionsPrimaryButton = (row) => {
         return (
             <Table.Cell key={row.id}>
                 <ButtonGroup>
-                    <Tooltip
-                        content={_('Edit')}
-                    >
+                    <Tooltip content={_('Edit')}>
                         <ActionButtonComponent
                             appearance="primary"
                             icon={<Pencil screenReaderText={null} size={1} />}
                             onClick={() => handleEditActionClick(row)}
                         />
                     </Tooltip>
-                    <Tooltip
-                        content={_('Clone')}
-                    >
+                    <Tooltip content={_('Clone')}>
                         <ActionButtonComponent
                             appearance="primary"
                             icon={<Clone screenReaderText={null} size={1} />}
                             onClick={() => handleCloneActionClick(row)}
                         />
                     </Tooltip>
-                    <Tooltip
-                        content={_('Delete')}
-                    >
+                    <Tooltip content={_('Delete')}>
                         <ActionButtonComponent
                             appearance="primary"
                             icon={<Trash screenReaderText={null} size={1} />}
@@ -116,76 +106,69 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
                     </Tooltip>
                 </ButtonGroup>
             </Table.Cell>
-        )
-    }
+        );
+    };
 
     const getTableRow = (row) => {
         return (
-            <Table.Row 
-                key={row.id}
-                expansionRow={getExpansionRow(columns.length, row)}
-            >
-                {columns && columns.length && columns.map((header) => {
-                    if(header.field === "disabled") {
-                        return (
-                            <Table.Cell key={header.field}>
-                                <Switch
-                                    key={row.name}
-                                    value={row.disabled}
-                                    onClick={() => handleToggleActionClick(row)}
-                                    selected={!row.disabled}
-                                    appearance="toggle"
-                                >
-                                    { row.disabled ? "Disabled" : "Enabled" }
-                                </Switch>
-                            </Table.Cell>
-                        )
-                    } else if (header.field == "actions") {
-                        return rowActionsPrimaryButton(row);
-                    } else {
-                        return (
-                            <Table.Cell key={header.field}>
-                                {row[header.field]}
-                            </Table.Cell>
-                        )
-                    }
-                })}
+            <Table.Row key={row.id} expansionRow={getExpansionRow(columns.length, row)}>
+                {columns &&
+                    columns.length &&
+                    columns.map((header) => {
+                        if (header.field === 'disabled') {
+                            return (
+                                <Table.Cell key={header.field}>
+                                    <Switch
+                                        key={row.name}
+                                        value={row.disabled}
+                                        onClick={() => handleToggleActionClick(row)}
+                                        selected={!row.disabled}
+                                        appearance="toggle"
+                                    >
+                                        {row.disabled ? 'Disabled' : 'Enabled'}
+                                    </Switch>
+                                </Table.Cell>
+                            );
+                        } else if (header.field == 'actions') {
+                            return rowActionsPrimaryButton(row);
+                        } else {
+                            return <Table.Cell key={header.field}>{row[header.field]}</Table.Cell>;
+                        }
+                    })}
             </Table.Row>
         );
-    }
+    };
 
     const getTableBody = () => {
-        const rows = data;
         return (
             <Table.Body>
-                {data && data.length && data
-                    .sort((rowA, rowB) => {
-                        if (sortDir === 'asc') {
-                            return rowA[sortKey] > rowB[sortKey] ? 1 : -1;
-                        }
-                        if (sortDir === 'desc') {
-                            return rowB[sortKey] > rowA[sortKey] ? 1 : -1;
-                        }
-                        return 0;
-                    })
-                    .map((row) => (
-                        getTableRow(row)
-                    ))
-                }
+                {data &&
+                    data.length &&
+                    data
+                        .sort((rowA, rowB) => {
+                            if (sortDir === 'asc') {
+                                return rowA[sortKey] > rowB[sortKey] ? 1 : -1;
+                            }
+                            if (sortDir === 'desc') {
+                                return rowB[sortKey] > rowA[sortKey] ? 1 : -1;
+                            }
+                            return 0;
+                        })
+                        .map((row) => getTableRow(row))}
             </Table.Body>
         );
-    }
+    };
 
     return (
         <>
-            { columns && columns.length &&
+            {columns && columns.length && (
                 <>
                     <Table stripeRows rowExpansion="single">
                         {getTableHeaders()}
                         {getTableBody()}
                     </Table>
                 </>
-            }
+            )}
         </>
     );
 }
@@ -194,8 +177,7 @@ InputTable.propTypes = {
     isInput: PropTypes.boolean,
     serviceName: PropTypes.string.isRequired,
     data: PropTypes.object.isRequired,
-    handleToggleActionClick: PropTypes.func
+    handleToggleActionClick: PropTypes.func,
 };
 
 export default InputTable;
-
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js
index b46aa8b6c..db23ad989 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js
@@ -1,6 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import DL from '@splunk/react-ui/DefinitionList';
 import Table from '@splunk/react-ui/Table';
+import { _ } from '@splunk/ui-utils/i18n';
+
 import { getUnifiedConfigs } from '../../util/util';
 
 function getExpansionRowData(row) {
@@ -8,11 +10,12 @@ function getExpansionRowData(row) {
     let moreInfo = unifiedConfigs.pages.inputs.table.moreInfo;
     return (
         moreInfo && moreInfo.length && moreInfo.map((val) => {
+            const label = _(val.label);
             return (
                 <>
                     { (row[val.field] || val.label == "Status") &&
                         <>
-                            <DL.Term>{val.label}</DL.Term>
+                            <DL.Term>{label}</DL.Term>
                             <DL.Description>
                                 { val.label == "Status" ? row[val.field] ? 'Disabled': 'Enabled': `${row[val.field]}` }
                             </DL.Description>
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
index eae512acb..62328c4fa 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
@@ -1,420 +1,410 @@
 import React, { useState, useEffect } from 'react';
-import { createURL } from '@splunk/splunk-utils/url';
-import {defaultFetchInit} from '@splunk/splunk-utils/fetch';
+import { _ } from '@splunk/ui-utils/i18n';
 
+import { getUnifiedConfigs } from '../../util/util';
 import { WaitSpinnerWrapper } from '../../components/table/TableStyle';
 import { TitleComponent, SubTitleComponent, TableCaptionComponent } from './InputPageStyle';
 import Table from '../../components/table/Table';
 
-function InputPage({isInput, serviceName}) {
-
+function InputPage({ isInput, serviceName }) {
     const [loading, setLoading] = useState(true);
     const [rowData, setRowData] = useState([]);
+    const [title, setTitle] = useState(null);
+    const [description, setDescription] = useState(null);
 
     useEffect(() => {
-      setLoading(true);
-      setTimeout(() => {
-        // API call response
-        const data = [
-          {
-            "name": "account",
-            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
-            "updated": "1970-01-01T00:00:00+00:00",
-            "links": {
-              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
-              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
-              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account",
-              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account"
-            },
-            "author": "nobody",
-            "acl": {
-              "app": "Splunk_TA_salesforce",
-              "can_list": true,
-              "can_write": true,
-              "modifiable": false,
-              "owner": "nobody",
-              "perms": {
-                "read": [
-                  "admin",
-                  "power",
-                  "splunk-system-role",
-                  "user"
-                ],
-                "write": [
-                  "admin",
-                  "splunk-system-role"
-                ]
-              },
-              "removable": true,
-              "sharing": "app"
-            },
-            "content": {
-              "disabled": false,
-              "eai:acl": null,
-              "host": "$decideOnStartup",
-              "host_resolved": "so1",
-              "index": "11default",
-              "interval": "1200",
-              "limit": "1000",
-              "object": "Account",
-              "object_fields": "Id,LastModifiedById,LastModifiedDate,Name",
-              "order_by": "LastModifiedDate",
-              "python.version": null,
-              "sourcetype": "sfdc:object",
-              "start_by_shell": "false"
-            }
-          },
-          {
-            "name": "contentversion",
-            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
-            "updated": "1970-01-01T00:00:00+00:00",
-            "links": {
-              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
-              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
-              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion",
-              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion"
-            },
-            "author": "nobody",
-            "acl": {
-              "app": "Splunk_TA_salesforce",
-              "can_list": true,
-              "can_write": true,
-              "modifiable": false,
-              "owner": "nobody",
-              "perms": {
-                "read": [
-                  "admin",
-                  "power",
-                  "splunk-system-role",
-                  "user"
-                ],
-                "write": [
-                  "admin",
-                  "splunk-system-role"
-                ]
-              },
-              "removable": true,
-              "sharing": "app"
-            },
-            "content": {
-              "disabled": false,
-              "eai:acl": null,
-              "host": "$decideOnStartup",
-              "host_resolved": "so1",
-              "index": "default",
-              "interval": "1200",
-              "limit": "1000",
-              "object": "ContentVersion",
-              "object_fields": "Id,LastModifiedById,LastModifiedDate,Title",
-              "order_by": "LastModifiedDate",
-              "python.version": null,
-              "sourcetype": "sfdc:object",
-              "start_by_shell": "false"
-            }
-          },
-          {
-            "name": "dashboard",
-            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
-            "updated": "1970-01-01T00:00:00+00:00",
-            "links": {
-              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
-              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
-              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard",
-              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard"
-            },
-            "author": "nobody",
-            "acl": {
-              "app": "Splunk_TA_salesforce",
-              "can_list": true,
-              "can_write": true,
-              "modifiable": false,
-              "owner": "nobody",
-              "perms": {
-                "read": [
-                  "admin",
-                  "power",
-                  "splunk-system-role",
-                  "user"
-                ],
-                "write": [
-                  "admin",
-                  "splunk-system-role"
-                ]
-              },
-              "removable": true,
-              "sharing": "app"
-            },
-            "content": {
-              "disabled": true,
-              "eai:acl": null,
-              "account": "Temp1",
-              "host": "$decideOnStartup",
-              "host_resolved": "so1",
-              "index": "22default",
-              "interval": "1200",
-              "limit": "1000",
-              "object": "Dashboard",
-              "object_fields": "Id,LastModifiedDate,Title",
-              "order_by": "LastModifiedDate",
-              "python.version": null,
-              "sourcetype": "sfdc:object",
-              "start_by_shell": "false"
-            }
-          },
-          {
-            "name": "loginhistory",
-            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
-            "updated": "1970-01-01T00:00:00+00:00",
-            "links": {
-              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
-              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
-              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory",
-              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory"
-            },
-            "author": "nobody",
-            "acl": {
-              "app": "Splunk_TA_salesforce",
-              "can_list": true,
-              "can_write": true,
-              "modifiable": false,
-              "owner": "nobody",
-              "perms": {
-                "read": [
-                  "admin",
-                  "power",
-                  "splunk-system-role",
-                  "user"
-                ],
-                "write": [
-                  "admin",
-                  "splunk-system-role"
-                ]
-              },
-              "removable": true,
-              "sharing": "app"
-            },
-            "content": {
-              "disabled": true,
-              "eai:acl": null,
-              "account": "Other",
-              "host": "$decideOnStartup",
-              "host_resolved": "so1",
-              "index": "default",
-              "interval": "60",
-              "limit": "1000",
-              "object": "LoginHistory",
-              "object_fields": "ApiType,ApiVersion,Application,Browser,ClientVersion,Id,LoginTime,LoginType,LoginUrl,Platform,SourceIp,Status,UserId",
-              "order_by": "LoginTime",
-              "python.version": null,
-              "sourcetype": "sfdc:object",
-              "start_by_shell": "false"
-            }
-          },
-          {
-            "name": "opportunity",
-            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
-            "updated": "1970-01-01T00:00:00+00:00",
-            "links": {
-              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
-              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
-              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity",
-              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity"
-            },
-            "author": "nobody",
-            "acl": {
-              "app": "Splunk_TA_salesforce",
-              "can_list": true,
-              "can_write": true,
-              "modifiable": false,
-              "owner": "nobody",
-              "perms": {
-                "read": [
-                  "admin",
-                  "power",
-                  "splunk-system-role",
-                  "user"
-                ],
-                "write": [
-                  "admin",
-                  "splunk-system-role"
-                ]
-              },
-              "removable": true,
-              "sharing": "app"
-            },
-            "content": {
-              "disabled": true,
-              "eai:acl": null,
-              "account": "Dummy1",
-              "host": "$decideOnStartup",
-              "host_resolved": "so1",
-              "index": "default",
-              "interval": "1200",
-              "limit": "1000",
-              "object": "Opportunity",
-              "object_fields": "Id,LastModifiedById,LastModifiedDate,Name",
-              "order_by": "LastModifiedDate",
-              "python.version": null,
-              "sourcetype": "sfdc:object",
-              "start_by_shell": "false"
-            }
-          },
-          {
-            "name": "report",
-            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
-            "updated": "1970-01-01T00:00:00+00:00",
-            "links": {
-              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
-              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
-              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report",
-              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report"
-            },
-            "author": "nobody",
-            "acl": {
-              "app": "Splunk_TA_salesforce",
-              "can_list": true,
-              "can_write": true,
-              "modifiable": false,
-              "owner": "nobody",
-              "perms": {
-                "read": [
-                  "admin",
-                  "power",
-                  "splunk-system-role",
-                  "user"
-                ],
-                "write": [
-                  "admin",
-                  "splunk-system-role"
-                ]
-              },
-              "removable": true,
-              "sharing": "app"
-            },
-            "content": {
-              "disabled": true,
-              "eai:acl": null,
-              "account": "Test",
-              "host": "$decideOnStartup",
-              "host_resolved": "so1",
-              "index": "default",
-              "interval": "1200",
-              "limit": "1000",
-              "object": "Report",
-              "object_fields": "Id,LastModifiedDate,Name",
-              "order_by": "LastModifiedDate",
-              "python.version": null,
-              "sourcetype": "sfdc:object",
-              "start_by_shell": "false"
-            }
-          },
-          {
-            "name": "user",
-            "id": "https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
-            "updated": "1970-01-01T00:00:00+00:00",
-            "links": {
-              "alternate": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
-              "list": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
-              "edit": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user",
-              "remove": "/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user"
-            },
-            "author": "nobody",
-            "acl": {
-              "app": "Splunk_TA_salesforce",
-              "can_list": true,
-              "can_write": true,
-              "modifiable": false,
-              "owner": "nobody",
-              "perms": {
-                "read": [
-                  "admin",
-                  "power",
-                  "splunk-system-role",
-                  "user"
-                ],
-                "write": [
-                  "admin",
-                  "splunk-system-role"
-                ]
-              },
-              "removable": true,
-              "sharing": "app"
-            },
-            "content": {
-              "disabled": true,
-              "account": "Tushar",
-              "eai:acl": null,
-              "host": "$decideOnStartup",
-              "host_resolved": "so1",
-              "index": "default",
-              "interval": "1200",
-              "limit": "1000",
-              "object": "User",
-              "object_fields": "LastModifiedDate,City,Country,FirstName,Id,IsActive,LastLoginDate,LastName,Latitude,Longitude,MobilePhone,Name,PostalCode,State,Username,UserRoleId,UserType,Email,CompanyName,ProfileId,Profile.PermissionsApiEnabled,Profile.PermissionsModifyAllData,Profile.PermissionsViewSetup",
-              "order_by": "LastModifiedDate",
-              "python.version": null,
-              "sourcetype": "sfdc:object",
-              "start_by_shell": "false"
-            }
-          }
-        ];
-        modifyAPIResponse(data);
-      }, 1000);
+        const unifiedConfigs = getUnifiedConfigs();
+        setTitle(_(unifiedConfigs.pages.inputs.title));
+        setDescription(_(unifiedConfigs.pages.inputs.description));
+        fetchInputs();
     }, []);
 
+    const fetchInputs = () => {
+        setLoading(true);
+        setTimeout(() => {
+            // API call response
+            const data = [
+                {
+                    name: 'account',
+                    id:
+                        'https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account',
+                    updated: '1970-01-01T00:00:00+00:00',
+                    links: {
+                        alternate:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account',
+                        list:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account',
+                        edit:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account',
+                        remove:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/account',
+                    },
+                    author: 'nobody',
+                    acl: {
+                        app: 'Splunk_TA_salesforce',
+                        can_list: true,
+                        can_write: true,
+                        modifiable: false,
+                        owner: 'nobody',
+                        perms: {
+                            read: ['admin', 'power', 'splunk-system-role', 'user'],
+                            write: ['admin', 'splunk-system-role'],
+                        },
+                        removable: true,
+                        sharing: 'app',
+                    },
+                    content: {
+                        disabled: false,
+                        'eai:acl': null,
+                        host: '$decideOnStartup',
+                        host_resolved: 'so1',
+                        index: '11default',
+                        interval: '1200',
+                        limit: '1000',
+                        object: 'Account',
+                        object_fields: 'Id,LastModifiedById,LastModifiedDate,Name',
+                        order_by: 'LastModifiedDate',
+                        'python.version': null,
+                        sourcetype: 'sfdc:object',
+                        start_by_shell: 'false',
+                    },
+                },
+                {
+                    name: 'contentversion',
+                    id:
+                        'https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion',
+                    updated: '1970-01-01T00:00:00+00:00',
+                    links: {
+                        alternate:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion',
+                        list:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion',
+                        edit:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion',
+                        remove:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/contentversion',
+                    },
+                    author: 'nobody',
+                    acl: {
+                        app: 'Splunk_TA_salesforce',
+                        can_list: true,
+                        can_write: true,
+                        modifiable: false,
+                        owner: 'nobody',
+                        perms: {
+                            read: ['admin', 'power', 'splunk-system-role', 'user'],
+                            write: ['admin', 'splunk-system-role'],
+                        },
+                        removable: true,
+                        sharing: 'app',
+                    },
+                    content: {
+                        disabled: false,
+                        'eai:acl': null,
+                        host: '$decideOnStartup',
+                        host_resolved: 'so1',
+                        index: 'default',
+                        interval: '1200',
+                        limit: '1000',
+                        object: 'ContentVersion',
+                        object_fields: 'Id,LastModifiedById,LastModifiedDate,Title',
+                        order_by: 'LastModifiedDate',
+                        'python.version': null,
+                        sourcetype: 'sfdc:object',
+                        start_by_shell: 'false',
+                    },
+                },
+                {
+                    name: 'dashboard',
+                    id:
+                        'https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard',
+                    updated: '1970-01-01T00:00:00+00:00',
+                    links: {
+                        alternate:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard',
+                        list:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard',
+                        edit:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard',
+                        remove:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/dashboard',
+                    },
+                    author: 'nobody',
+                    acl: {
+                        app: 'Splunk_TA_salesforce',
+                        can_list: true,
+                        can_write: true,
+                        modifiable: false,
+                        owner: 'nobody',
+                        perms: {
+                            read: ['admin', 'power', 'splunk-system-role', 'user'],
+                            write: ['admin', 'splunk-system-role'],
+                        },
+                        removable: true,
+                        sharing: 'app',
+                    },
+                    content: {
+                        disabled: true,
+                        'eai:acl': null,
+                        account: 'Temp1',
+                        host: '$decideOnStartup',
+                        host_resolved: 'so1',
+                        index: '22default',
+                        interval: '1200',
+                        limit: '1000',
+                        object: 'Dashboard',
+                        object_fields: 'Id,LastModifiedDate,Title',
+                        order_by: 'LastModifiedDate',
+                        'python.version': null,
+                        sourcetype: 'sfdc:object',
+                        start_by_shell: 'false',
+                    },
+                },
+                {
+                    name: 'loginhistory',
+                    id:
+                        'https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory',
+                    updated: '1970-01-01T00:00:00+00:00',
+                    links: {
+                        alternate:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory',
+                        list:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory',
+                        edit:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory',
+                        remove:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/loginhistory',
+                    },
+                    author: 'nobody',
+                    acl: {
+                        app: 'Splunk_TA_salesforce',
+                        can_list: true,
+                        can_write: true,
+                        modifiable: false,
+                        owner: 'nobody',
+                        perms: {
+                            read: ['admin', 'power', 'splunk-system-role', 'user'],
+                            write: ['admin', 'splunk-system-role'],
+                        },
+                        removable: true,
+                        sharing: 'app',
+                    },
+                    content: {
+                        disabled: true,
+                        'eai:acl': null,
+                        account: 'Other',
+                        host: '$decideOnStartup',
+                        host_resolved: 'so1',
+                        index: 'default',
+                        interval: '60',
+                        limit: '1000',
+                        object: 'LoginHistory',
+                        object_fields:
+                            'ApiType,ApiVersion,Application,Browser,ClientVersion,Id,LoginTime,LoginType,LoginUrl,Platform,SourceIp,Status,UserId',
+                        order_by: 'LoginTime',
+                        'python.version': null,
+                        sourcetype: 'sfdc:object',
+                        start_by_shell: 'false',
+                    },
+                },
+                {
+                    name: 'opportunity',
+                    id:
+                        'https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity',
+                    updated: '1970-01-01T00:00:00+00:00',
+                    links: {
+                        alternate:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity',
+                        list:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity',
+                        edit:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity',
+                        remove:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/opportunity',
+                    },
+                    author: 'nobody',
+                    acl: {
+                        app: 'Splunk_TA_salesforce',
+                        can_list: true,
+                        can_write: true,
+                        modifiable: false,
+                        owner: 'nobody',
+                        perms: {
+                            read: ['admin', 'power', 'splunk-system-role', 'user'],
+                            write: ['admin', 'splunk-system-role'],
+                        },
+                        removable: true,
+                        sharing: 'app',
+                    },
+                    content: {
+                        disabled: true,
+                        'eai:acl': null,
+                        account: 'Dummy1',
+                        host: '$decideOnStartup',
+                        host_resolved: 'so1',
+                        index: 'default',
+                        interval: '1200',
+                        limit: '1000',
+                        object: 'Opportunity',
+                        object_fields: 'Id,LastModifiedById,LastModifiedDate,Name',
+                        order_by: 'LastModifiedDate',
+                        'python.version': null,
+                        sourcetype: 'sfdc:object',
+                        start_by_shell: 'false',
+                    },
+                },
+                {
+                    name: 'report',
+                    id:
+                        'https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report',
+                    updated: '1970-01-01T00:00:00+00:00',
+                    links: {
+                        alternate:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report',
+                        list:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report',
+                        edit:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report',
+                        remove:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/report',
+                    },
+                    author: 'nobody',
+                    acl: {
+                        app: 'Splunk_TA_salesforce',
+                        can_list: true,
+                        can_write: true,
+                        modifiable: false,
+                        owner: 'nobody',
+                        perms: {
+                            read: ['admin', 'power', 'splunk-system-role', 'user'],
+                            write: ['admin', 'splunk-system-role'],
+                        },
+                        removable: true,
+                        sharing: 'app',
+                    },
+                    content: {
+                        disabled: true,
+                        'eai:acl': null,
+                        account: 'Test',
+                        host: '$decideOnStartup',
+                        host_resolved: 'so1',
+                        index: 'default',
+                        interval: '1200',
+                        limit: '1000',
+                        object: 'Report',
+                        object_fields: 'Id,LastModifiedDate,Name',
+                        order_by: 'LastModifiedDate',
+                        'python.version': null,
+                        sourcetype: 'sfdc:object',
+                        start_by_shell: 'false',
+                    },
+                },
+                {
+                    name: 'user',
+                    id:
+                        'https://10.202.39.212:8000/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user',
+                    updated: '1970-01-01T00:00:00+00:00',
+                    links: {
+                        alternate:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user',
+                        list:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user',
+                        edit:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user',
+                        remove:
+                            '/servicesNS/nobody/Splunk_TA_salesforce/Splunk_TA_salesforce_sfdc_object/user',
+                    },
+                    author: 'nobody',
+                    acl: {
+                        app: 'Splunk_TA_salesforce',
+                        can_list: true,
+                        can_write: true,
+                        modifiable: false,
+                        owner: 'nobody',
+                        perms: {
+                            read: ['admin', 'power', 'splunk-system-role', 'user'],
+                            write: ['admin', 'splunk-system-role'],
+                        },
+                        removable: true,
+                        sharing: 'app',
+                    },
+                    content: {
+                        disabled: true,
+                        account: 'Tushar',
+                        'eai:acl': null,
+                        host: '$decideOnStartup',
+                        host_resolved: 'so1',
+                        index: 'default',
+                        interval: '1200',
+                        limit: '1000',
+                        object: 'User',
+                        object_fields:
+                            'LastModifiedDate,City,Country,FirstName,Id,IsActive,LastLoginDate,LastName,Latitude,Longitude,MobilePhone,Name,PostalCode,State,Username,UserRoleId,UserType,Email,CompanyName,ProfileId,Profile.PermissionsApiEnabled,Profile.PermissionsModifyAllData,Profile.PermissionsViewSetup',
+                        order_by: 'LastModifiedDate',
+                        'python.version': null,
+                        sourcetype: 'sfdc:object',
+                        start_by_shell: 'false',
+                    },
+                },
+            ];
+            modifyAPIResponse(data);
+        }, 1000);
+    };
+
     const modifyAPIResponse = (data) => {
-      if (data && data.length) {
-        let rowData = [];
-        data.map((val) => {
-          rowData.push({
-            ...val.content,
-            id: val.id,
-            name: val.name
-          });
-        });
-        setRowData(rowData);
-        console.log("Row Data: ", rowData);
-        setLoading(false);
-      }
-    }
+        if (data && data.length) {
+            let modifiedResponse = [];
+            data.map((val) => {
+                modifiedResponse.push({
+                    ...val.content,
+                    id: val.id,
+                    name: val.name,
+                });
+            });
+            setRowData(modifiedResponse);
+            setLoading(false);
+        }
+    };
 
     /**
-     * 
+     *
      * @param row {Object} row
      */
     const changeStatus = (row) => {
         let oldData = rowData;
-        const index = oldData.findIndex((val) => { return val.id == row.id });
+        const index = oldData.findIndex((val) => {
+            return val.id == row.id;
+        });
         if (index != -1) {
             oldData[index].disabled = !oldData[index].disabled;
         }
-        setRowData(data => ([...oldData]));
-    }
+        setRowData((data) => [...oldData]);
+    };
 
     return (
-      <>
-        { loading ? 
-          <WaitSpinnerWrapper size="large" /> :
-          
-          <>
-            <TitleComponent>Inputs</TitleComponent>
-            <SubTitleComponent>Manage your data inputs</SubTitleComponent>
-            <hr />
-            <TableCaptionComponent>
-              <div className="table-caption-inner">
-                  {rowData.length} Input {rowData.legnth > 1 && <span>s</span>}
-              </div>
-            </TableCaptionComponent>
-            <Table
-                isInput={isInput}
-                serviceName={serviceName}
-                data={rowData} 
-                handleToggleActionClick={(row) => changeStatus(row)}
-            />
-          </>
-        }
-      </>
+        <>
+            {loading ? (
+                <WaitSpinnerWrapper size="large" />
+            ) : (
+                <>
+                    <TitleComponent>{title}</TitleComponent>
+                    <SubTitleComponent>{description}</SubTitleComponent>
+                    <hr />
+                    <TableCaptionComponent>
+                        <div className="table-caption-inner">
+                            {rowData.length} Input {rowData.legnth > 1 && <span>s</span>}
+                        </div>
+                    </TableCaptionComponent>
+                    <Table
+                        isInput={isInput}
+                        serviceName={serviceName}
+                        data={rowData}
+                        handleToggleActionClick={(row) => changeStatus(row)}
+                    />
+                </>
+            )}
+        </>
     );
-};
+}
 
 export default InputPage;

From 9cb3558615e6b26c8d42f2a6b83dd68ebd15a54e Mon Sep 17 00:00:00 2001
From: dkhatri-crest <dkhatri@splunk.com>
Date: Mon, 8 Mar 2021 14:07:32 +0530
Subject: [PATCH 11/12] ADDON-34289: Updated CheckBox and Text components

---
 .../src/main/webapp/components/CheckBoxComponent.jsx | 12 ++++++------
 .../src/main/webapp/components/TextComponent.jsx     |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
index 69a655c87..e21fce7ca 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx
@@ -7,20 +7,20 @@ class CheckBoxComponent extends Component {
         super(props);
     }
 
-    handleChange = (e, {value}) => {
-        this.props.handleChange(this.props.id, value);
+    handleChange = (e) => {
+        this.props.handleChange(this.props.id, 1 - this.props.value);
     };
 
     render() {
         return (
             <Switch
                 key={this.props.field}
-                value={this.props.value}
+                value={this.props.field}
                 onClick={this.handleChange}
-                selected={this.props.value === 1 ? true : false}
+                disabled={this.props.disabled}
+                selected={this.props.value ? true : false}
                 appearance="checkbox"
-            >
-            </Switch>
+            ></Switch>
         );
     }
 }
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
index 5668afdca..85ae0036e 100644
--- a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
@@ -20,7 +20,7 @@ class TextComponent extends Component {
                 disabled={this.props.disabled}
                 value={this.props.value}
                 onChange={this.handleChange}
-                type={this.props.encrypted === true ? 'password' : 'text'}
+                type={this.props.encrypted ? 'password' : 'text'}
             />
         );
     }

From 1263f82b3d3f2690da67b06019b65c996fab79fe Mon Sep 17 00:00:00 2001
From: "Mahir Chavda (C)" <mchavda@splunk.com>
Date: Mon, 8 Mar 2021 16:52:50 +0530
Subject: [PATCH 12/12] ADDON-34278: Add singleselect component

---
 .../webapp/components/SingleInputControl.jsx  | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputControl.jsx

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputControl.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputControl.jsx
new file mode 100644
index 000000000..df7ff873e
--- /dev/null
+++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputControl.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from '@splunk/react-ui/Select';
+
+function SingleInputControl(props) {
+    const { id, field, disabled = false, value, controlOptions, ...restProps } = props;
+    const { autoCompleteFields } = controlOptions;
+
+    function handleChange(e, { value }) {
+        restProps.handleChange(id, value);
+    }
+
+    function generateOptions() {
+        const data = [];
+        autoCompleteFields.forEach((item) => {
+            if (item.value && item.label) {
+                data.push(<Select.Option label={item.label} value={item.value} key={item.value} />);
+            }
+            if (item.children && item.label) {
+                data.push(<Select.Heading key={item.label}>{item.label}</Select.Heading>);
+                item.children.forEach((child) => {
+                    data.push(
+                        <Select.Option label={child.label} value={child.value} key={child.value} />
+                    );
+                });
+            }
+        });
+        return data;
+    }
+
+    return (
+        <Select value={value} name={field} disabled={disabled} onChange={handleChange}>
+            {generateOptions()}
+        </Select>
+    );
+}
+
+SingleInputControl.propTypes = {
+    id: PropTypes.number.isRequired,
+    disabled: PropTypes.bool,
+    value: PropTypes.string,
+    handleChange: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.shape({
+        autoCompleteFields: PropTypes.array.isRequired,
+    }),
+};
+
+export default SingleInputControl;