Merge pull request #568 from dataswift/dev

CR for Facebook Integration
dataswift · May 20, 2022 · f2f4e08 · f2f4e08
2 parents 4f4dc71 + 39d40b1
commit f2f4e08
Show file tree

Hide file tree

Showing 39 changed files with 2,647 additions and 2,408 deletions.
diff --git a/package.json b/package.json
@@ -4,13 +4,13 @@
   "private": true,
   "dependencies": {
     "@dataswift/hat-js": "^0.5.0",
-    "@dataswift/shared": "0.0.4-cad706a",
+    "@dataswift/shared": "0.0.5",
     "@material-ui/core": "^4.11.4",
     "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "date-fns": "^2.22.1",
-    "hmi": "git+ssh://git@github.com:dataswift/hmi-react.git#v0.4.3",
+    "hmi": "git+ssh://git@github.com:dataswift/hmi-react.git#v0.5.1",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
@@ -21,6 +21,7 @@
     "react-date-range": "^1.1.4",
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
+    "react-feather": "^2.0.9",
     "react-redux": "^7.2.4",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
@@ -65,7 +66,6 @@
     "@types/markdown-to-jsx": "^7.0.1",
     "@types/node": "15.9.0",
     "@types/node-sass": "^4.11.0",
-    "@types/react": "17.0.9",
     "@types/react-dom": "17.0.6",
     "@types/react-redux": "^7.1.16",
     "@types/react-router": "^5.1.14",

diff --git a/src/app/Layouts.tsx b/src/app/Layouts.tsx
@@ -7,6 +7,7 @@ import { useSelector } from 'react-redux';
 import { selectLanguage } from '../features/language/languageSlice';
 
 interface CustomRouteProps extends RouteProps {
+  children: React.ReactNode;
   newAuth?: boolean;
   issuedByFooter?: boolean;
   footerBackgroundColor?: string;
@@ -22,20 +23,18 @@ export const PrivateLayoutRoute: React.FC<CustomRouteProps> = ({
 
   return (
     <PrivateRoute {...rest}>
-      <div>
-        {children}
-        {issuedByFooter ? (
-          <IssuedBy
-            language={language}
-            wrapperStyles={footerBackgroundColor ? { backgroundColor: footerBackgroundColor } : {}}
-          />
-        ) : (
-          <Footer
-            language={language}
-            wrapperStyles={footerBackgroundColor ? { backgroundColor: footerBackgroundColor } : {}}
-          />
-        )}
-      </div>
+      {children}
+      {issuedByFooter ? (
+        <IssuedBy
+          language={language}
+          wrapperStyles={footerBackgroundColor ? { backgroundColor: footerBackgroundColor } : {}}
+        />
+      ) : (
+        <Footer
+          language={language}
+          wrapperStyles={footerBackgroundColor ? { backgroundColor: footerBackgroundColor } : {}}
+        />
+      )}
     </PrivateRoute>
   );
 };
@@ -47,7 +46,6 @@ export const LayoutRoute: React.FC<CustomRouteProps> = ({
   ...rest
 }) => {
   const language = useSelector(selectLanguage);
-
   return (
     <Route {...rest}>
       <div>
@@ -80,20 +78,18 @@ export const PrivateSpaceRoute: React.FC<CustomRouteProps> = ({
     <PrivateRoute {...rest}>
       <div>
         <PrivateSpace>
-          <>
-            {children}
-            {issuedByFooter ? (
-              <IssuedBy
-                language={language}
-                wrapperStyles={footerBackgroundColor ? { backgroundColor: footerBackgroundColor } : {}}
-              />
-            ) : (
-              <Footer
-                language={language}
-                wrapperStyles={footerBackgroundColor ? { backgroundColor: footerBackgroundColor } : {}}
-              />
-            )}
-          </>
+          {children}
+          {issuedByFooter ? (
+            <IssuedBy
+              language={language}
+              wrapperStyles={footerBackgroundColor ? { backgroundColor: footerBackgroundColor } : {}}
+            />
+          ) : (
+            <Footer
+              language={language}
+              wrapperStyles={footerBackgroundColor ? { backgroundColor: footerBackgroundColor } : {}}
+            />
+          )}
         </PrivateSpace>
       </div>
     </PrivateRoute>

diff --git a/src/app/PrivateRoute.tsx b/src/app/PrivateRoute.tsx
@@ -7,6 +7,7 @@ import { HatClientService } from '../services/HatClientService';
 import * as queryString from 'query-string';
 
 interface OwnProps extends RouteProps {
+  children?: React.ReactNode;
   newAuth?: boolean;
 }
 

diff --git a/src/components/Menus/ActionMenu.tsx b/src/components/Menus/ActionMenu.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import FormatMessage from '../../features/messages/FormatMessage';
 
-const ActionMenu: React.FC<{ showOptions: boolean }> = ({ showOptions, children }) => {
+const ActionMenu: React.FC<{ showOptions: boolean, children: React.ReactNode }> = ({ showOptions, children }) => {
   const history = useHistory();
   const menuRef = useRef<HTMLObjectElement>(null);
   const [showMenu, setShowMenu] = useState(false);

diff --git a/src/components/Modals/Modal.tsx b/src/components/Modals/Modal.tsx
@@ -6,6 +6,7 @@ type Props = {
   open: boolean;
   onClose: () => void;
   titleMessageId: string;
+  children?: React.ReactNode;
 };
 
 const Modal: React.FC<Props> = ({ open, onClose, titleMessageId, children }) => {

diff --git a/src/components/Modals/RumpelModal.tsx b/src/components/Modals/RumpelModal.tsx
@@ -4,6 +4,7 @@ import './RumpelModal.scss';
 type Props = {
   open: boolean;
   onClose: () => void;
+  children?: React.ReactNode;
 };
 
 const RumpelModal: React.FC<Props> = ({ open, onClose, children }) => {

diff --git a/src/components/headers/DetailsHeader/DetailsHeader.tsx b/src/components/headers/DetailsHeader/DetailsHeader.tsx
@@ -7,6 +7,7 @@ type DetailsHeaderProps = {
   logoAltText: string;
   toolbarActions?: React.ReactNode;
   backgroundColor?: string;
+  children: React.ReactNode;
   isTool?: boolean;
 };
 

diff --git a/src/components/user/ChangePassword/ChangePassword.test.tsx b/src/components/user/ChangePassword/ChangePassword.test.tsx
@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 
 import messagesSlice from '../../../features/messages/messagesSlice';
-import authenticationSlice from '../../../features/authentication/authenticationSlice';
+import authenticationSlice, { AuthState } from '../../../features/authentication/authenticationSlice';
 import messages from '../../../translations/en.json';
 import { ChangePassword } from './ChangePassword';
 
@@ -22,6 +22,9 @@ export const store = configureStore({
   preloadedState: {
     messages,
     authentication: {
+      isAuthenticated: false,
+      rememberMe: false,
+      authState: AuthState.LOGIN_REQUEST,
       hatName: 'Test',
       hatDomain: '.test.com',
     },

diff --git a/src/components/user/Login/Login.tsx b/src/components/user/Login/Login.tsx
@@ -89,7 +89,7 @@ const Login: React.FC = () => {
       <span className={'flex-spacer-small'} />
       <img
         className={'login-dataswift-logo'}
-        src={'https://cdn.dataswift.io/dataswift/logo/ds-full-dark.svg'}
+        src={'https://cdn.dataswift.io/dataswift/logo/dataswift_R_logomark.svg'}
         alt={'Dataswift logo'}
       />
       <hr />

diff --git a/src/features/applications/ApplicationDetails.test.tsx b/src/features/applications/ApplicationDetails.test.tsx
@@ -16,6 +16,9 @@ export const store = configureStore({
   preloadedState: {
     applications: {
       applications: [TEST_HAT_APPLICATION],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
   },
 });

diff --git a/src/features/applications/ApplicationDetails.tsx b/src/features/applications/ApplicationDetails.tsx
@@ -51,7 +51,7 @@ const HatApplicationDetails: React.FC = () => {
           <FormatMessage id="ds.hat.application.details.rated" /> {app.application.info.rating.score}
         </div>
 
-        <a href="https://resources.dataswift.io/contents/4a9f5153-7d52-4b79-8eb1-e570aa331291" className="app-link">
+        <a href="https://docs.dataswift.io/deploy/rating-assurance-and-certification" className="app-link">
           <FormatMessage id="ds.hat.application.details.learn" />
         </a>
 

diff --git a/src/features/applications/ApplicationDetailsActions.test.tsx b/src/features/applications/ApplicationDetailsActions.test.tsx
@@ -19,6 +19,9 @@ export const store = configureStore({
   preloadedState: {
     applications: {
       applications: [TEST_HAT_APPLICATION],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
     messages,
   },

diff --git a/src/features/applications/ApplicationPermissions.test.tsx b/src/features/applications/ApplicationPermissions.test.tsx
@@ -24,13 +24,18 @@ export const store = configureStore({
   preloadedState: {
     applications: {
       applications: [TEST_HAT_APPLICATION],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
     hmi: {
+      parentApp: null,
       dependencyApps: [],
       dependencyTools: []
     },
     tools: {
       tools: [],
+      expirationTime: 20,
     }
   },
 });

diff --git a/src/features/applications/ApplicationPermissions.tsx b/src/features/applications/ApplicationPermissions.tsx
@@ -4,7 +4,7 @@ import { useHistory, useParams } from 'react-router-dom';
 
 import { getApplicationById, getApplications, selectApplicationById, selectApplications } from './applicationsSlice';
 import './HatApplication.scss';
-import { HmiV2 } from "hmi";
+import { Hmi } from "hmi";
 import {
   selectDependencyApps,
   selectDependencyTools,
@@ -54,9 +54,8 @@ const HatApplicationPermissions: React.FC = () => {
   }
 
   return (
-    <HmiV2 
+    <Hmi 
       email={''}
-      hmiType={''} 
       parentApp={app.application}
       dependencyApps={dependencyApps.map(app => app.application)}
       dependencyTools={dependencyTools.map(tool => tool.info.name)}

diff --git a/src/features/applications/HatApplications.test.tsx b/src/features/applications/HatApplications.test.tsx
@@ -17,6 +17,9 @@ const store = configureStore({
   preloadedState: {
     applications: {
       applications: [TEST_HAT_APPLICATION],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
   },
 });

diff --git a/src/features/applications/helper.ts b/src/features/applications/helper.ts
@@ -1,7 +1,7 @@
 import { HatApplication } from '@dataswift/hat-js/lib/interfaces/hat-application.interface';
 import format from 'date-fns/format';
 
-enum HatApplicationStatus {
+export enum HatApplicationStatus {
   GOTO = 'goto',
   RUNNING = 'running',
   FETCHING = 'fetching',
@@ -63,7 +63,7 @@ export const getStatusButtonText = (app: HatApplication): string => {
     case HatApplicationStatus.UPDATE:
       return 'Update';
     default:
-      return 'Connect';
+      return app.application.id.includes("facebook") ? 'Connect with Facebook' : 'Connect';
   }
 };
 

diff --git a/src/features/authentication/AuthChangePassword.test.tsx b/src/features/authentication/AuthChangePassword.test.tsx
@@ -26,7 +26,10 @@ export const store = configureStore({
   preloadedState: {
     messages,
     applications: {
-      applications: []
+      applications: [],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
     language: {
       language: 'en'

diff --git a/src/features/authentication/AuthRecoverPassword.test.tsx b/src/features/authentication/AuthRecoverPassword.test.tsx
@@ -26,7 +26,10 @@ export const store = configureStore({
   preloadedState: {
     messages,
     applications: {
-      applications: []
+      applications: [],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
     language: {
       language: 'en'

diff --git a/src/features/authentication/AuthVerifyEmail.test.tsx b/src/features/authentication/AuthVerifyEmail.test.tsx
@@ -26,7 +26,10 @@ export const store = configureStore({
   preloadedState: {
     messages,
     applications: {
-      applications: []
+      applications: [],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
     language: {
       language: 'en'

diff --git a/src/features/dataplugs/DataPlugDetails.test.tsx b/src/features/dataplugs/DataPlugDetails.test.tsx
@@ -16,6 +16,9 @@ export const store = configureStore({
   preloadedState: {
     applications: {
       applications: [TEST_DATA_PLUG],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
   },
 });

diff --git a/src/features/dataplugs/DataPlugDetails.tsx b/src/features/dataplugs/DataPlugDetails.tsx
@@ -9,7 +9,8 @@ import '../applications/HatApplication.scss';
 import InformationDetails from '../../components/InformationDetails/InformationDetails';
 import { getApplicationById, selectApplicationById } from "../applications/applicationsSlice";
 import AppDetailsToolbarActions from "../applications/ApplicationDetailsActions";
-import { getAppStatus, getStatusButtonText, getStatusIcon } from "../applications/helper";
+import { getAppStatus, getStatusButtonText, getStatusIcon, HatApplicationStatus } from "../applications/helper";
+import { Facebook } from 'react-feather';
 
 const DataPlugDetails: React.FC = () => {
   const dispatch = useDispatch();
@@ -49,6 +50,8 @@ const DataPlugDetails: React.FC = () => {
     ];
   };
 
+  const getApplicationStatus = () => getAppStatus(app);
+
   return (
     <>
       <DetailsHeader
@@ -68,12 +71,17 @@ const DataPlugDetails: React.FC = () => {
           <FormatMessage id="ds.hat.application.details.rated" /> {app.application.info.rating.score}
         </div>
 
-        <a href="https://resources.dataswift.io/contents/4a9f5153-7d52-4b79-8eb1-e570aa331291" className="app-link">
+        <a href="https://docs.dataswift.io/deploy/rating-assurance-and-certification" className="app-link">
           <FormatMessage id="ds.hat.application.details.learn" />
         </a>
 
-        <div onClick={onAppStatusClick} className={`app-details-status ${getAppStatus(app)} link-button`}>
-          <i className="material-icons details-button-icon">{getStatusIcon(app)}</i>
+        <div onClick={onAppStatusClick} className={`app-details-status ${getApplicationStatus()} link-button`}>
+          {appId.includes("facebook") && getApplicationStatus() === HatApplicationStatus.UNTOUCHED &&
+            <Facebook className="details-button-icon" />
+          }
+          {!(appId.includes("facebook") && getApplicationStatus() === HatApplicationStatus.UNTOUCHED) &&
+            <i className="material-icons details-button-icon">{getStatusIcon(app)}</i>
+          }
           {getStatusButtonText(app)}
         </div>
       </DetailsHeader>

diff --git a/src/features/dataplugs/DataPlugs.test.tsx b/src/features/dataplugs/DataPlugs.test.tsx
@@ -17,6 +17,9 @@ export const store = configureStore({
   preloadedState: {
     applications: {
       applications: [TEST_DATA_PLUG],
+      applicationHmi: undefined,
+      applicationHmiState: 'idle',
+      expirationTime: 20,
     },
   },
 });

diff --git a/src/features/feed/FeedList.tsx b/src/features/feed/FeedList.tsx
@@ -11,7 +11,7 @@ type Props = {
 export const FeedList: React.FC<Props> = ({ dayGroupedFeed, loading, lastFeedElementIntersecting }) => {
   const observer = useRef<IntersectionObserver>();
 
-  const lastFeedElementRef = useCallback(node => {
+  const lastFeedElementRef = useCallback((node: any) => {
     if (loading) return;
     if (observer.current) {
       observer.current.disconnect();