Merge pull request #37 from guardian/da_azure

Azure Support
guardian · May 18, 2023 · 7b0fa4d · 7b0fa4d
2 parents 9d099ea + 17991ad
commit 7b0fa4d
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 110 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -16,6 +16,7 @@ jobs:
       contents: read
       checks: write
       pull-requests: write
+      packages: write
 
     steps:
       - uses: actions/checkout@v2
@@ -56,12 +57,10 @@ jobs:
       - run: if [ -d "junit-tests" ]; then mkdir junit-tests; fi
         name: Prepare test outputs location
 
-      - run: bash ./ci-scripts/setup_headers.sh
-        env:
-          HEADERS_DEPLOY_USER: ${{ secrets.HEADERS_DEPLOY_USER }}
-          HEADERS_DEPLOY_TOKEN: ${{ secrets.HEADERS_DEPLOY_TOKEN }}
-
+      - run: "echo -e \"\n//npm.pkg.github.com/:_authToken=${{secrets.GITHUB_TOKEN}}\" >> .npmrc"
       - run: yarn install --frozen-lockfile
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
       - run: yarn lint
       - run: yarn test-ci
         env:

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+@guardian:registry=https://npm.pkg.github.com
diff --git a/app/Frontpage.tsx b/app/Frontpage.tsx
@@ -15,7 +15,10 @@ import {
 } from "./vidispine/search/FacetResponse";
 import FacetDisplays from "./Frontpage/FacetDisplays";
 import VidispineContext from "./Context/VidispineContext";
-import { SystemNotifcationKind, SystemNotification } from "pluto-headers";
+import {
+  SystemNotifcationKind,
+  SystemNotification,
+} from "@guardian/pluto-headers";
 
 require("./dark.css");
 require("./FrontPageLayout.css");

diff --git a/app/ItemView/MetadataDeliverableView.tsx b/app/ItemView/MetadataDeliverableView.tsx
@@ -18,7 +18,7 @@ import {
   Breadcrumb,
   SystemNotifcationKind,
   SystemNotification,
-} from "pluto-headers";
+} from "@guardian/pluto-headers";
 import { DynamicFeed } from "@material-ui/icons";
 import { DenormalisedDeliverable } from "../pluto-deliverables/DeliverablesTypes";
 import { GetDeliverableById } from "../pluto-deliverables/DeliverablesService";

diff --git a/app/ItemView/RawMetadataView.tsx b/app/ItemView/RawMetadataView.tsx
@@ -9,7 +9,10 @@ import { Grid, IconButton, Paper, Typography } from "@material-ui/core";
 import VidispineContext from "../Context/VidispineContext";
 import { ArrowDownward, ArrowUpward, Drafts, Replay } from "@material-ui/icons";
 import axios from "axios";
-import { SystemNotifcationKind, SystemNotification } from "pluto-headers";
+import {
+  SystemNotifcationKind,
+  SystemNotification,
+} from "@guardian/pluto-headers";
 // @ts-ignore
 import CodeMirror from "codemirror/lib/codemirror"; //see https://github.com/codemirror/CodeMirror/issues/5484
 import "codemirror/lib/codemirror.css";

diff --git a/app/ItemViewComponent.tsx b/app/ItemViewComponent.tsx
@@ -9,7 +9,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import PlayerContainer from "./ItemView/PlayerContainer";
 import VidispineContext from "./Context/VidispineContext";
 import { loadItemMeta } from "./ItemView/LoadItem";
-import { UserContext } from "pluto-headers";
+import { UserContext } from "@guardian/pluto-headers";
 import RawMetadataView from "./ItemView/RawMetadataView";
 import JobDataView from "./ItemView/JobDataView";
 

diff --git a/app/Nearline.tsx b/app/Nearline.tsx
@@ -15,7 +15,10 @@ import {
 } from "./vidispine/search/FacetResponse";
 import FacetDisplays from "./Frontpage/FacetDisplays";
 import VidispineContext from "./Context/VidispineContext";
-import { SystemNotifcationKind, SystemNotification } from "pluto-headers";
+import {
+  SystemNotifcationKind,
+  SystemNotification,
+} from "@guardian/pluto-headers";
 
 require("./dark.css");
 require("./FrontPageLayout.css");

diff --git a/app/index.tsx b/app/index.tsx
@@ -18,14 +18,17 @@ import {
 } from "./vidispine/field-group/VidispineFieldGroup";
 import ItemViewComponent from "./ItemViewComponent";
 import FrontpageComponent from "./Frontpage";
-import { SystemNotification } from "pluto-headers";
-
 import {
-  Header,
   AppSwitcher,
-  PlutoThemeProvider,
+  Header,
   JwtDataShape,
-} from "pluto-headers";
+  OAuthContextData,
+  OAuthContextProvider,
+  SystemNotification,
+  UserContextProvider,
+  verifyExistingLogin,
+  PlutoThemeProvider,
+} from "@guardian/pluto-headers";
 import { CircularProgress, CssBaseline, Typography } from "@material-ui/core";
 import { Helmet } from "react-helmet";
 import { setupInterceptors } from "./interceptors";
@@ -76,13 +79,25 @@ const App: React.FC<{}> = () => {
   const [loading, setLoading] = useState(true);
   const [lastError, setLastError] = useState<string | undefined>(undefined);
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [userProfile, setUserProfile] = useState<JwtDataShape | undefined>(
+    undefined
+  );
+
+  const haveToken = () => {
+    return window.localStorage.getItem("pluto:access-token");
+  };
 
-  const onLoginValid = async (
-    valid: boolean,
-    loginData: JwtDataShape | undefined
-  ) => {
-    console.log("onLoginValid: ", valid, loginData);
-    setIsLoggedIn(valid);
+  const oAuthConfigLoaded = (oAuthConfig: OAuthContextData) => {
+    if (haveToken()) {
+      verifyExistingLogin(oAuthConfig)
+        .then((profile) => {
+          setUserProfile(profile);
+          setIsLoggedIn(true);
+        })
+        .catch((err) =>
+          console.error("Could not verify existing user profile: ", err)
+        );
+    }
   };
 
   /**
@@ -158,11 +173,20 @@ const App: React.FC<{}> = () => {
     return (
       <PlutoThemeProvider>
         <CssBaseline />
-        <VidispineContext.Provider value={vidispineDetails}>
-          <Switch>
-            <Route path="/embed/player" component={EmbeddablePlayer} />
-          </Switch>
-        </VidispineContext.Provider>
+        <OAuthContextProvider onLoaded={oAuthConfigLoaded}>
+          <UserContextProvider
+            value={{
+              profile: userProfile,
+              updateProfile: (newValue) => setUserProfile(newValue),
+            }}
+          >
+            <VidispineContext.Provider value={vidispineDetails}>
+              <Switch>
+                <Route path="/embed/player" component={EmbeddablePlayer} />
+              </Switch>
+            </VidispineContext.Provider>
+          </UserContextProvider>
+        </OAuthContextProvider>
       </PlutoThemeProvider>
     );
   } else {
@@ -173,84 +197,95 @@ const App: React.FC<{}> = () => {
           <title>PLUTO Media Browser</title>
         </Helmet>
         <SystemNotification />
-        <Header />
-        <AppSwitcher onLoginValid={onLoginValid} />
-        {lastError ? (
-          <div className="error-dialog">
-            <Typography>{lastError}</Typography>
-          </div>
-        ) : undefined}
-        {loading ? <CircularProgress /> : undefined}
-        {!lastError && !loading ? (
-          <VidispineContext.Provider value={vidispineDetails}>
-            <MediaAtomToolContext.Provider value={mediaAtomDetails}>
-              <Switch>
-                <Route path="/item/:itemId" component={ItemViewComponent} />
+        <OAuthContextProvider onLoaded={oAuthConfigLoaded}>
+          <UserContextProvider
+            value={{
+              profile: userProfile,
+              updateProfile: (newValue) => setUserProfile(newValue),
+            }}
+          >
+            <Header />
+            {userProfile ? <AppSwitcher /> : undefined}
+            {lastError ? (
+              <div className="error-dialog">
+                <Typography>{lastError}</Typography>
+              </div>
+            ) : undefined}
+            {loading ? <CircularProgress /> : undefined}
+            {!lastError && !loading ? (
+              <VidispineContext.Provider value={vidispineDetails}>
+                <MediaAtomToolContext.Provider value={mediaAtomDetails}>
+                  <Switch>
+                    <Route path="/item/:itemId" component={ItemViewComponent} />
 
-                <Route
-                  path="/last/:pageSize"
-                  render={(
-                    props: RouteComponentProps<LastNComponentMatches>
-                  ) => {
-                    let itemLimit: number = 15;
-                    try {
-                      itemLimit = parseInt(props.match.params.pageSize);
-                    } catch (err) {
-                      console.error(
-                        `${props.match.params.pageSize} is not a number`
-                      );
-                    }
-                    return (
-                      <FrontpageComponent
-                        {...props}
-                        itemLimit={itemLimit}
-                        projectIdToLoad={0}
-                      />
-                    );
-                  }}
-                />
-                <Route
-                  path="/search"
-                  render={(props: RouteComponentProps) => (
-                    <FrontpageComponent {...props} projectIdToLoad={0} />
-                  )}
-                />
-                <Route
-                  path="/project/:projectId"
-                  render={(
-                    props: RouteComponentProps<ProjectComponentMatches>
-                  ) => {
-                    let projectIdToLoad: number = 0;
-                    try {
-                      projectIdToLoad = parseInt(props.match.params.projectId);
-                    } catch (err) {
-                      console.error(
-                        `${props.match.params.projectId} is not a number`
-                      );
-                    }
-                    return (
-                      <FrontpageComponent
-                        {...props}
-                        projectIdToLoad={projectIdToLoad}
-                      />
-                    );
-                  }}
-                />
-                <Route
-                  path="/nearline"
-                  render={(props: RouteComponentProps) => (
-                    <NearlineComponent {...props} projectIdToLoad={0} />
-                  )}
-                />
-                <Route
-                  path="/"
-                  exact={true}
-                  component={() => <Redirect to="/last/15" />}
-                />
-              </Switch>
-            </MediaAtomToolContext.Provider>
-          </VidispineContext.Provider>
-        ) : undefined}
+                    <Route
+                      path="/last/:pageSize"
+                      render={(
+                        props: RouteComponentProps<LastNComponentMatches>
+                      ) => {
+                        let itemLimit: number = 15;
+                        try {
+                          itemLimit = parseInt(props.match.params.pageSize);
+                        } catch (err) {
+                          console.error(
+                            `${props.match.params.pageSize} is not a number`
+                          );
+                        }
+                        return (
+                          <FrontpageComponent
+                            {...props}
+                            itemLimit={itemLimit}
+                            projectIdToLoad={0}
+                          />
+                        );
+                      }}
+                    />
+                    <Route
+                      path="/search"
+                      render={(props: RouteComponentProps) => (
+                        <FrontpageComponent {...props} projectIdToLoad={0} />
+                      )}
+                    />
+                    <Route
+                      path="/project/:projectId"
+                      render={(
+                        props: RouteComponentProps<ProjectComponentMatches>
+                      ) => {
+                        let projectIdToLoad: number = 0;
+                        try {
+                          projectIdToLoad = parseInt(
+                            props.match.params.projectId
+                          );
+                        } catch (err) {
+                          console.error(
+                            `${props.match.params.projectId} is not a number`
+                          );
+                        }
+                        return (
+                          <FrontpageComponent
+                            {...props}
+                            projectIdToLoad={projectIdToLoad}
+                          />
+                        );
+                      }}
+                    />
+                    <Route
+                      path="/nearline"
+                      render={(props: RouteComponentProps) => (
+                        <NearlineComponent {...props} projectIdToLoad={0} />
+                      )}
+                    />
+                    <Route
+                      path="/"
+                      exact={true}
+                      component={() => <Redirect to="/last/15" />}
+                    />
+                  </Switch>
+                </MediaAtomToolContext.Provider>
+              </VidispineContext.Provider>
+            ) : undefined}
+          </UserContextProvider>
+        </OAuthContextProvider>
       </PlutoThemeProvider>
     );
   }

diff --git a/app/interceptors.ts b/app/interceptors.ts
@@ -1,5 +1,8 @@
 import axios, { AxiosError } from "axios";
-import { SystemNotifcationKind, SystemNotification } from "pluto-headers";
+import {
+  SystemNotifcationKind,
+  SystemNotification,
+} from "@guardian/pluto-headers";
 
 declare var deploymentRootPath: string;
 

diff --git a/jestSetup.jsx b/jestSetup.jsx
@@ -2,4 +2,10 @@
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-configure({ adapter: new Adapter() });
+configure({ adapter: new Adapter() });
+
+// ensure that global TextEncoder is present, needed to Jose to avoid breaking on ReferenceError: TextEncoder is not defined
+const { TextEncoder, TextDecoder } = require('util');
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/react-fontawesome": "^0.1.8",
+    "@guardian/pluto-headers": "v2.0.4",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
@@ -93,11 +94,11 @@
     "elliptic": "6.5.4",
     "identity-obj-proxy": "^3.0.0",
     "ini": "^1.3.6",
+    "jose": "^4.9.3",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.21",
     "lodash.omit": "^4.5.0",
     "material-ui-chip-input": "^1.1.0",
-    "pluto-headers": "https://gitlab.com/codmill/customer-projects/guardian/pluto-headers.git#v1.6.3",
     "process": "^0.11.10",
     "query-string": "^6.13.1",
     "react": "^16.12.0",