Add OAuth support to odlux

Extend odlux to support oauth, support external login provider for sign-in

Issue-ID: CCSDK-3167
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Id5772e0026fa7ebda22c41c2620a7868598f41aa

4 files changed, 19 insertions, 6 deletions

diff --git a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts
index e528effab..d6283852c 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts
+++ b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts
@@ -35,7 +35,7 @@ export class UpdateDeviceDescription extends Action {
 }
 
 export class UpdatViewDescription extends Action {
-  constructor (public vPath: string, public viewData: any, public displaySpecification: DisplaySpecification = { displayMode: DisplayModeType.doNotDisplay } ) {
+  constructor (public vPath: string, public viewData: any, public displaySpecification: DisplaySpecification = { displayMode: DisplayModeType.doNotDisplay }) {
     super();
   }
 }
@@ -437,7 +437,7 @@ export const updateViewActionAsyncCreator = (vPath: string) => async (dispatch:
         }
       });
     }
-
+    
     // create display specification
     const ds: DisplaySpecification = viewElement! && viewElement!.uiType === "rpc"
       ? {
@@ -449,6 +449,7 @@ export const updateViewActionAsyncCreator = (vPath: string) => async (dispatch:
         displayMode: extractList ? DisplayModeType.displayAsList : DisplayModeType.displayAsObject,
         viewSpecification: resolveViewDescription(defaultNS, vPath, viewSpecification),
         keyProperty: isViewElementList(viewElement!) && viewElement.key || undefined,
+        apidocPath:  isViewElementList(viewElement!) &&  `/apidoc/explorer/index.html?urls.primaryName=$$$standard$$$#/mounted%20${nodeId}%20${viewElement!.module || 'MODULE_NOT_DEFINED'}/$$$action$$$_${dataPath.replace(/^\//,'').replace(/[\/=\-\:]/g,'_')}_${viewElement! != null ? `${viewElement.id.replace(/[\/=\-\:]/g,'_')}_` : '' }` || undefined,
       };
 
     // update display specification
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/handlers/viewDescriptionHandler.ts b/sdnr/wt/odlux/apps/configurationApp/src/handlers/viewDescriptionHandler.ts
index 69710b9e9..ea2036415 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/handlers/viewDescriptionHandler.ts
+++ b/sdnr/wt/odlux/apps/configurationApp/src/handlers/viewDescriptionHandler.ts
@@ -33,7 +33,8 @@ export type DisplaySpecification =  {
 } | {
   displayMode: DisplayModeType.displayAsObject | DisplayModeType.displayAsList ;
   viewSpecification: ViewSpecification;
-  keyProperty: string | undefined;
+  keyProperty?: string;
+  apidocPath?: string;
 } | {
   displayMode: DisplayModeType.displayAsRPC;
   inputViewSpecification?: ViewSpecification;
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/index.html b/sdnr/wt/odlux/apps/configurationApp/src/index.html
index 759b7b535..78fff78c5 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/index.html
+++ b/sdnr/wt/odlux/apps/configurationApp/src/index.html
@@ -19,6 +19,7 @@
         connectApp.register();
         configurationApp.register();
         maintenanceApp.register();
+        app("./app.tsx").configureApplication({ authentication:"oauth",  enablePolicy:  true,});
         app("./app.tsx").runApplication();
       });
   </script>
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
index 45b3081c2..dbaa77874 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
@@ -33,6 +33,7 @@ import { ViewSpecification, isViewElementString, isViewElementNumber, isViewElem
 
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
+import PostAdd from '@material-ui/icons/PostAdd';
 import ArrowBack from '@material-ui/icons/ArrowBack';
 import RemoveIcon from '@material-ui/icons/RemoveCircleOutline';
 import SaveIcon from '@material-ui/icons/Save';
@@ -545,8 +546,11 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
            );
     };
 
-    private renderUIViewList(listSpecification: ViewSpecification, listKeyProperty: string, listData: { [key: string]: any }[]) {
+    private renderUIViewList(listSpecification: ViewSpecification, listKeyProperty: string, apiDocPath: string, listData: { [key: string]: any }[]) {
         const listElements = listSpecification.elements;
+        const apiDocPathCreate = apiDocPath ? `${location.origin}${apiDocPath
+          .replace("$$$standard$$$","topology-netconfnode%20resources%20-%20RestConf%20RFC%208040")
+          .replace("$$$action$$$","put")}_${listKeyProperty.replace(/[\/=\-\:]/g,'_')}_` : undefined;
 
         const navigate = (path: string) => {
             this.props.history.push(`${this.props.match.url}${path}`);
@@ -558,6 +562,12 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
             }
         };
 
+        const addWithApiDocElementAction = {
+            icon: PostAdd, tooltip: 'Add', onClick: () => {
+                window.open(apiDocPathCreate, '_blank');
+            }
+        };
+
         const { classes, removeElement } = this.props;
 
         const DeleteIconWithConfirmation: React.FC<{ rowData: { [key: string]: any }, onReload: () => void }> = (props) => {
@@ -580,7 +590,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
         }
 
         return (
-            <SelectElementTable stickyHeader idProperty={listKeyProperty} rows={listData} customActionButtons={[addNewElementAction]} columns={
+            <SelectElementTable stickyHeader idProperty={listKeyProperty} rows={listData} customActionButtons={apiDocPathCreate ? [addNewElementAction, addWithApiDocElementAction] : [addNewElementAction]} columns={
                 Object.keys(listElements).reduce<ColumnModel<{ [key: string]: any }>[]>((acc, cur) => {
                     const elm = listElements[cur];
                     if (elm.uiType !== "object" && listData.every(entry => entry[elm.label] != null)) {
@@ -790,7 +800,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
                 {ds.displayMode === DisplayModeType.doNotDisplay
                     ? null
                     : ds.displayMode === DisplayModeType.displayAsList && viewData instanceof Array
-                        ? this.renderUIViewList(ds.viewSpecification, ds.keyProperty!, viewData)
+                        ? this.renderUIViewList(ds.viewSpecification, ds.keyProperty!, ds.apidocPath!, viewData)
                         : ds.displayMode === DisplayModeType.displayAsRPC
                             ? this.renderUIViewRPC(ds.inputViewSpecification, viewData!, outputData, undefined, true, false)
                             : this.renderUIViewSelector(ds.viewSpecification, viewData!, ds.keyProperty, editMode, isNew)