@os1-platform/console-ui-react 0.7.3 → 0.8.0

package/dist/commonjs/aaa/index.js

@@ -153,7 +153,7 @@ var OS1Provider = function (props) {
 exports.OS1Provider = OS1Provider;
 var OS1Provider2 = function (props) {
     //console.log(props);
-    var userManager = new console_ui_js_1.AAA(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.devTenantId, props.authUrl);
+    var userManager = (0, react_1.useMemo)(function () { return new console_ui_js_1.AAA(props.clientId, props.loginRedirectPath, props.logoutRedirectPath, props.devTenantId, props.authUrl); }, []);
     var value = '';
     //console.log('userManager', userManager);
     var _a = (0, react_1.useState)(true), isLoading = _a[0], setIsLoading = _a[1];

package/dist/commonjs/aaa/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/aaa/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AAA, ConsoleUiInit, OS1HttpClient,  OS1Components, functionBoundOption, functionBoundAutoCompleteOption, AuthHelper, OS1DropDownDefaultValue} from '@os1-platform/console-ui-js';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { ModalProps } from '../components/modal/interface';\nimport { ToastProps } from '../components/toast/interface';\n\nexport const AuthContext = React.createContext<any | undefined>(undefined);\nexport const ConsoleUIContext = React.createContext<any>(undefined);\n\nconst HeaderAndSideBar = (props: any) => {\n  const [consoleInstance, setConsoleInstance] = useState<any>(null);\n\n  useEffect(() => {\n    if (!props.isLoading) {\n      const console = ConsoleUiInit.getInstance(\n        props.clientId,\n        props.loginRedirectPath,\n        props.logoutRedirectPath,\n        props.authurl,\n        props.orgShortName,\n        props.devTenantId,\n        props.appId,\n        props.userManager\n      );\n\n      setConsoleInstance(console);\n      console.renderHeaderAndSidebar('headerAndSidebar', props.controls);\n    }\n  }, [props.isLoading]);\n\n  if (props.isLoading) {\n    if (props.loader) {\n      return props.loader;\n    } else {\n      const keyframes = `\n      @-webkit-keyframes spin {\n        0% {\n          -webkit-transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n        }\n      }\n    `;\n      const styleSheets = Array.from(document.styleSheets).filter(\n        (styleSheet) =>\n          !styleSheet.href || styleSheet.href.startsWith(window.location.origin)\n      );\n      for (let style of styleSheets) {\n        if (style instanceof CSSStyleSheet && style.cssRules) {\n          style.insertRule(keyframes, style.cssRules.length);\n        }\n      }\n      const loaderStyle = () => ({\n        marginTop: '50vh',\n        marginLeft: '50vw',\n        border: '12px solid #F3F3F3',\n        borderRadius: '50%',\n        borderTop: '12px solid grey',\n        width: '40px',\n        height: '40px',\n        animationName: 'spin',\n        animationDuration: '2s',\n        animationTimingFunction: 'linear',\n        animationIterationCount: 'infinite',\n      });\n      return <div style={loaderStyle()}></div>;\n    }\n  }\n  //console.log(consoleInstance, props);\n  return (\n    <ConsoleUIContext.Provider value={consoleInstance}>\n      <div id=\"headerAndSidebar\">{props.children}</div>\n    </ConsoleUIContext.Provider>\n  );\n};\n\nconst OS1Provider = (props: any) => {\n  const [authUrl, setAuthUrl] = useState('');\n  const [orgShortName, setOrgShortName] = useState('');\n  // const [tenantDns, setTenantDns] = useState('');\n  let [isMountedRef, setisMountedRef] = useState<boolean>(false);\n  \n  const  authHelper = new AuthHelper();\n  let authUrls:{tenantUrl: string, orgName:string };\n  useEffect(() => {\n    (async function () {\n      authUrls = await authHelper.getKeyCloakAuthority(\n        window.location.hostname,\n        props.devTenantId\n      );\n      setAuthUrl(authUrls.tenantUrl);\n      setOrgShortName(authUrls.orgName)\n      setisMountedRef(true)\n    })();\n  }, []);\n\n  return (\n    isMountedRef?\n    <OS1Provider2\n      clientId={props.clientId}\n      loginRedirectPath={props.loginRedirectPath}\n      logoutRedirectPath={props.logoutRedirectPath}\n      devTenantId={props.devTenantId}\n      appId={props.appId}\n      controls={props.controls}\n      authUrl={authUrl}\n      authHelper = {authHelper}\n      orgShortName= {orgShortName}\n      props={...props}\n    />:<></>\n  );\n};\nconst OS1Provider2 = (props: any) => {\n  //console.log(props);\n  const userManager = new AAA(\n    props.clientId,\n    props.loginRedirectPath,\n    props.logoutRedirectPath,\n    props.devTenantId,\n    props.authUrl\n  );\n  const value = '';\n  //console.log('userManager', userManager);\n  const [isLoading, setIsLoading] = useState(true);\n  let isMountedRef = useRef<boolean>(false);\n  const { authHelper } = props;\n  useEffect(() => {\n    // Store current isMounted since this could change while awaiting async operations below\n    isMountedRef.current = true;\n    (async () => {\n      let user = undefined;\n      try {\n        user = await userManager!.getUserInfo();\n      } catch (error: any) {\n\n      }\n      /**\n       * Check if the user is returning back from OIDC and throws error.\n       */\n      if (authHelper.hasErrorInUrl(window.location)){\n        \n        await userManager.logout();\n        return\n      }\n      /**\n       * Check if the user is returning back from OIDC.\n       */\n      if (authHelper.hasCodeInUrl(window.location)) {\n        try{\n          await userManager?.logincallback();\n        }catch (error: any) {\n          window.console.log('Error: ', error);\n          await userManager.logout()\n        }\n        authHelper.cleanBrowserUrl();\n        setIsLoading(false);\n        return;\n      }\n\n      if (!(await userManager?.isAuthenticated())) {\n        userManager?.login();\n      } else if (isMountedRef.current) {\n        setIsLoading(false);\n      }\n    })();\n\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, [window.location, userManager]);\n\n  return (\n    <AuthContext.Provider value={value}>\n      <HeaderAndSideBar\n        userManager={userManager}\n        isLoading={isLoading}\n        loader={props.loader}\n        devTenantId={props.devTenantId}\n        controls={props.controls}\n        appId={props.appId}\n        authUrl={props.authUrl}\n        orgShortName= {props.orgShortName}\n      >\n        {props.props.children}\n      </HeaderAndSideBar>\n    </AuthContext.Provider>\n  );\n};\n\n// export { Toast, Modal };\n\nconst OS1Toast = (props: ToastProps) => {\n\n  useEffect(() => {\n    const os1Components = new OS1Components()\n    os1Components.renderToast(props.elementId, props.toastConfig);\n  }, []);\n\n  return <div id={props.elementId}></div>;\n};\n\nconst OS1Modal = (props: ModalProps) => {\n\n  useEffect(() => {\n    const os1Components = new OS1Components()\n    os1Components.renderModal(props.elementId, props.modalConfig);\n  }, []);\n\n  return <div id={props.elementId}></div>;\n};\n\n\nexport {\n  OS1Provider,\n  OS1Toast,\n  OS1Modal,\n  OS1HttpClient,\n  functionBoundOption,\n  functionBoundAutoCompleteOption,\n  OS1DropDownDefaultValue\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/aaa/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AAA, ConsoleUiInit, OS1HttpClient,  OS1Components, functionBoundOption, functionBoundAutoCompleteOption, AuthHelper, OS1DropDownDefaultValue} from '@os1-platform/console-ui-js';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { ModalProps } from '../components/modal/interface';\nimport { ToastProps } from '../components/toast/interface';\n\nexport const AuthContext = React.createContext<any | undefined>(undefined);\nexport const ConsoleUIContext = React.createContext<any>(undefined);\n\nconst HeaderAndSideBar = (props: any) => {\n  const [consoleInstance, setConsoleInstance] = useState<any>(null);\n\n  useEffect(() => {\n    if (!props.isLoading) {\n      const console = ConsoleUiInit.getInstance(\n        props.clientId,\n        props.loginRedirectPath,\n        props.logoutRedirectPath,\n        props.authurl,\n        props.orgShortName,\n        props.devTenantId,\n        props.appId,\n        props.userManager\n      );\n\n      setConsoleInstance(console);\n      console.renderHeaderAndSidebar('headerAndSidebar', props.controls);\n    }\n  }, [props.isLoading]);\n\n  if (props.isLoading) {\n    if (props.loader) {\n      return props.loader;\n    } else {\n      const keyframes = `\n      @-webkit-keyframes spin {\n        0% {\n          -webkit-transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n        }\n      }\n    `;\n      const styleSheets = Array.from(document.styleSheets).filter(\n        (styleSheet) =>\n          !styleSheet.href || styleSheet.href.startsWith(window.location.origin)\n      );\n      for (let style of styleSheets) {\n        if (style instanceof CSSStyleSheet && style.cssRules) {\n          style.insertRule(keyframes, style.cssRules.length);\n        }\n      }\n      const loaderStyle = () => ({\n        marginTop: '50vh',\n        marginLeft: '50vw',\n        border: '12px solid #F3F3F3',\n        borderRadius: '50%',\n        borderTop: '12px solid grey',\n        width: '40px',\n        height: '40px',\n        animationName: 'spin',\n        animationDuration: '2s',\n        animationTimingFunction: 'linear',\n        animationIterationCount: 'infinite',\n      });\n      return <div style={loaderStyle()}></div>;\n    }\n  }\n  //console.log(consoleInstance, props);\n  return (\n    <ConsoleUIContext.Provider value={consoleInstance}>\n      <div id=\"headerAndSidebar\">{props.children}</div>\n    </ConsoleUIContext.Provider>\n  );\n};\n\nconst OS1Provider = (props: any) => {\n  const [authUrl, setAuthUrl] = useState('');\n  const [orgShortName, setOrgShortName] = useState('');\n  // const [tenantDns, setTenantDns] = useState('');\n  let [isMountedRef, setisMountedRef] = useState<boolean>(false);\n  \n  const  authHelper = new AuthHelper();\n  let authUrls:{tenantUrl: string, orgName:string };\n  useEffect(() => {\n    (async function () {\n      authUrls = await authHelper.getKeyCloakAuthority(\n        window.location.hostname,\n        props.devTenantId\n      );\n      setAuthUrl(authUrls.tenantUrl);\n      setOrgShortName(authUrls.orgName)\n      setisMountedRef(true)\n    })();\n  }, []);\n\n  return (\n    isMountedRef?\n    <OS1Provider2\n      clientId={props.clientId}\n      loginRedirectPath={props.loginRedirectPath}\n      logoutRedirectPath={props.logoutRedirectPath}\n      devTenantId={props.devTenantId}\n      appId={props.appId}\n      controls={props.controls}\n      authUrl={authUrl}\n      authHelper = {authHelper}\n      orgShortName= {orgShortName}\n      props={...props}\n    />:<></>\n  );\n};\nconst OS1Provider2 = (props: any) => {\n  //console.log(props);\n  const userManager = useMemo(()=>new AAA(\n      props.clientId,\n      props.loginRedirectPath,\n      props.logoutRedirectPath,\n      props.devTenantId,\n      props.authUrl\n    ),[])\n  const value = '';\n  //console.log('userManager', userManager);\n  const [isLoading, setIsLoading] = useState(true);\n  let isMountedRef = useRef<boolean>(false);\n  const { authHelper } = props;\n  useEffect(() => {\n    // Store current isMounted since this could change while awaiting async operations below\n    isMountedRef.current = true;\n    (async () => {\n      let user = undefined;\n      try {\n        user = await userManager!.getUserInfo();\n      } catch (error: any) {\n\n      }\n      /**\n       * Check if the user is returning back from OIDC and throws error.\n       */\n      if (authHelper.hasErrorInUrl(window.location)){\n        \n        await userManager.logout();\n        return\n      }\n      /**\n       * Check if the user is returning back from OIDC.\n       */\n      if (authHelper.hasCodeInUrl(window.location)) {\n        try{\n          await userManager?.logincallback();\n        }catch (error: any) {\n          window.console.log('Error: ', error);\n          await userManager.logout()\n        }\n        authHelper.cleanBrowserUrl();\n        setIsLoading(false);\n        return;\n      }\n\n      if (!(await userManager?.isAuthenticated())) {\n        userManager?.login();\n      } else if (isMountedRef.current) {\n        setIsLoading(false);\n      }\n    })();\n\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, [window.location, userManager]);\n\n  return (\n    <AuthContext.Provider value={value}>\n      <HeaderAndSideBar\n        userManager={userManager}\n        isLoading={isLoading}\n        loader={props.loader}\n        devTenantId={props.devTenantId}\n        controls={props.controls}\n        appId={props.appId}\n        authUrl={props.authUrl}\n        orgShortName= {props.orgShortName}\n      >\n        {props.props.children}\n      </HeaderAndSideBar>\n    </AuthContext.Provider>\n  );\n};\n\n// export { Toast, Modal };\n\nconst OS1Toast = (props: ToastProps) => {\n\n  useEffect(() => {\n    const os1Components = new OS1Components()\n    os1Components.renderToast(props.elementId, props.toastConfig);\n  }, []);\n\n  return <div id={props.elementId}></div>;\n};\n\nconst OS1Modal = (props: ModalProps) => {\n\n  useEffect(() => {\n    const os1Components = new OS1Components()\n    os1Components.renderModal(props.elementId, props.modalConfig);\n  }, []);\n\n  return <div id={props.elementId}></div>;\n};\n\n\nexport {\n  OS1Provider,\n  OS1Toast,\n  OS1Modal,\n  OS1HttpClient,\n  functionBoundOption,\n  functionBoundAutoCompleteOption,\n  OS1DropDownDefaultValue\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os1-platform/console-ui-react",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "React wrapper for console-ui library",
   "main": "dist/commonjs/aaa/index.js",
   "types": "dist/commonjs/types/aaa/index.d.ts",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^5.0.0",
-    "@os1-platform/console-ui-js": "^0.7.3",
+    "@os1-platform/console-ui-js": "0.8.0",
     "@react-native-community/eslint-config": "^2.0.0",
     "@types/react": "^17.0.37",
     "axios": "^0.21.4",

package/readme.md

@@ -213,6 +213,167 @@
 
 17. Link to acceess [example app](https://github.com/OS1-logistics/vehicle-reference-app/tree/console-v2-integration)
 
+
+18. #### Integration guidelines for Rest Api Calls Using console UI Axios Client:-
+- Console has already exposed the `OS1HttpClient` class that accepts all HTTP methods. 
+- Wherever the user wants to send a callback url in their api call, they have to mention it like a placeholder naming `{{SSE_CALLBACK}}`.  Console will look for this placeholder and replace it with a callback url.
+- Internally this function will establish the sse connection and obtain the callback url from the server. Application developers just need to provide the parameter in api request where the callback url needs to be set.
+
+- Console will make an api call by intercepting the request. Once callback is received from the server, the callback data is sent to the UI as a custom event named: `SSECallBackEvent` 
+
+```javascript
+        // here consoleInstance is an instance that is being created for consoleUI Context while initialization of console UI
+     document.addEventListener(`${consoleInstance.events().SSECallBackEvent}`, (eventData) => {
+            // This event Data can be used further as per the usage of app
+    })
+
+```
+- Users can set the callback url in their url path, query, payload or in headers.
+- If any internal error is there while making a connection, It will be thrown back as an error and an api call will be made with null as callback url. 
+- Retriable errors like re-establishing connection will not be thrown  as those will be retried internally. Only fatal errors along with api errors are thrown in following format:-
+
+```javascript
+       "error": {
+          "code": "200101",
+          "description": "There is a problem in SSE connection from server end"
+        },
+        "status": 503
+```
+
+Example to implement this mentioned below.
+
+- Users can pass the placeholder for callback url as a parameter, body or header in an api and from there a message can be sent.
+```javascript
+    const dto = getDtoFromDisplay(data);
+    dto['callback'] = "{{SSE_CALLBACK}}" 
+    // here client is the context of consoleUI that is set at the time of initialization.
+    const axiosClient = new OS1HttpClient(client.authInitializer,  `${process.env.REACT_APP_BASE_URL}`);
+
+  try {
+   await axiosClient.post(
+            '/vehicles',
+            Dto, // payload for api
+           'createVehicles',
+           { withAuth: false }, // request headers for not sending token headers, this optional parameter
+           {
+           headers: {  // custom headers passed, this is optional parameter
+                'Callback': "{{SSE_CALLBACK}}",
+                'Content-Type': 'application/json',
+              }
+          });
+     return;
+   } catch (error) {
+          console.error('error', error);
+   }
+
+```
+- Here, in the above mentioned example `{{SSE_CALLBACK}}`, is passed in payload as well as in custom headers. Console Will replace this variable from the callback url and make an api call.
+- When msg is received on the client side, an event naming SSECallBackEvent is emitted and the user can listen to this event using document.addEventListener.
+
+``` Javascript
+    // here consoleInstance is an instance that is being created for consoleUI Context while initialization of console UI
+    document.addEventListener(`${consoleInstance.events().SSECallBackEvent}`, (eventData) => {
+            // This event Data can be used further as per the usage of app
+    })  
+    // For better performance use removeEventListener to clean up this event listener. 
+
+```
+
+#### Approach for rest and graphql api both-
+- Console has exposed OS1HttpClient to make api calls. To use Server Side Events in apps, users need to instantiate the OS1HttpClient class. Even if they make their api calls with any other way instead of console axios client.
+ ```Javascript
+    const cl = new OS1HttpClient(props.console.authInitializer, 'https://abc.sandbox.getos1.com');
+    // here, the first parameter is the console UI context and the second parameter is the domain url for which api call is to be made
+ ```
+ - In `OS1HttpCLien`t, we have exposed the `getEventBrokerUrl` function to make Server side connection(example is added below). This function returns the callback url that has been established after successful connection establishment. When the callback url is already present, it will just increase the timer for the sliding window so that connection will persist longer for that particular url. 
+ - A callback url returned from the function, can be set in a state, to be used in the api call. 
+    - For optimized behavior, can use UseEffect hook to optimize the update of state. When the api needs to be triggered, users can check whether the callback url that is present in their state is different from the callback url received from the callback function. If it's different, then just update the state and return, else just call the api with the callback url that is stored in state.
+    - Another approach is, users can maintain their global state or context, and store the callback url in it. Then whenever they need to make an api call just pass that context or state in their api. But they need to make sure that the getEventBrokerUrl function is called before an api call as it will always guarantee that the callback url is still active.
+Example:-
+ ```Javascript
+  const [ callBackUrl, setCallBackUrl] = useState(null)
+   useEffect(()=>{
+     callEvent()
+   }, [callBackUrl])
+
+  if (props.console) {  //consoleInstance that is set at console Initialization
+var cl = new OS1HttpClient(props.console.authInitializer,  
+         'https://os1devs.sandbox.getos1.com');
+   }
+  //This function is called whenever user want to make an api call
+  const handleHandshake = async () => {
+        const callbackResponse = await cl.getEventBrokerUrl() 
+        if (callBackUrl && callbackResponse.callback === callBackUrl){
+            callEvent()
+        } else {
+            setCallBackUrl(callbackResponse.callback)
+        }
+  }
+
+
+  //Sample function to make an api call with generated callback url
+  function callEvent(){
+     if (props.console) {
+        cl.post(`/core/api/v1/aaa/apps`,{
+        properties: {"availability":true,"fuelType":"CNG","operatorId":"op-1" },
+        callBackUrl} // payload passed
+        )
+   .then(response => {
+        console.log("api response", response.data)
+    })
+    .catch(function (err) {
+        console.error('error in api call', err);
+    });
+   }
+ }
+ ```
+ 
+ Here, in the above example:- 
+    - When the user calls handleHandshake function, then a call to establish connection is made and a callback url is received. 
+    - This callback url is being set to a state and can be used in an api call as a path, query, header or as a body.
+    - After an api call is made and a message can be sent to that callback url from the backend application and UI application can listen to those messages via `SSECallBackEvent` that is exposed:
+
+```Javascript
+// here consoleInstance is an instance that is being created for consoleUI Context while initialization of console UI
+    
+ document.addEventListener(`${consoleInstance.events().SSECallBackEvent}`, (eventData) => {
+       // This event Data can be used further as per the usage of app
+     })  
+ // For better performance use removeEventListener to clean up this event listener.
+
+```
+
+### SSE Callback Event Payload:-
+- Event payload that will come from `SSECallBackEvent` will look like this:- 
+```Javascript
+{
+    "payload": {
+        "data": {
+            "name": "Mini Truck 3",
+            "owner": "tenants:cfecb885-e060-514a-b4f7-0094cf6f48e2",
+            "properties": {
+                "availability": true,
+                "fuelType": "CNG",
+                "mode": "truck",
+                "operatorId": "op-2342"
+            },
+            "uniqueCode": "2b8d45f6-7c6c-11ee-b962-0242ac120002"
+        },
+        "eventId": "ebd31aad-7712-441e-b376-b59cf1e23d06",
+        "X-COREOS-REQUEST-ID": "f52d1676-002a-4968-abcc-c3a651537670",
+        "brokerTimestamp": 1699251799599,
+        "agentTimestamp": 1699251799605,
+        "consoleTimestamp": 1699251800245
+    }
+}	
+```
+
+- Here, in the above mentioned example. Object will come under the detail property of the event.
+    - The object contains a payload property that contains `data, consoleTimestamp, agentTimeStamp, BrokerTimeStamp,      eventId and X-COREOS-REQUEST-ID`.
+    - The data property contains the response that has been received by callback url.
+
+
+
 ## Configuration for Injectable Controls offered by the Library
 
 #### Common parameters, that will be passed in  all injectable controls:-