Merge pull request #40 from kaleido-io/fetch

add credentials to fetch requests

Author: shorsher

package.json

@@ -1,6 +1,6 @@
 {
   "name": "firefly-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",

src/App.tsx

@@ -38,6 +38,7 @@ import {
   IStatus,
 } from './interfaces';
 import ReconnectingWebsocket from 'reconnecting-websocket';
+import { fetchWithCredentials } from './utils';
 
 const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
 const history = createBrowserHistory({
@@ -118,7 +119,10 @@ function App(): JSX.Element {
   const [lastEvent, setLastEvent] = useState<any>();
 
   useEffect(() => {
-    Promise.all([fetch('/api/v1/namespaces'), fetch('/api/v1/status')])
+    Promise.all([
+      fetchWithCredentials('/api/v1/namespaces'),
+      fetchWithCredentials('/api/v1/status'),
+    ])
       .then(async ([namespaceResponse, statusResponse]) => {
         if (namespaceResponse.ok && statusResponse.ok) {
           const status: IStatus = await statusResponse.json();

src/utils.ts

@@ -0,0 +1,22 @@
+// Copyright © 2021 Kaleido, Inc.
+//
+// SPDX-License-Identifier: Apache-2.0
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export const fetchWithCredentials = (
+  resource: string,
+  options?: RequestInit
+): Promise<Response> => {
+  return fetch(resource, { ...options, credentials: 'include' });
+};

src/views/Dashboard.tsx

@@ -37,6 +37,7 @@ import { NamespaceContext } from '../contexts/NamespaceContext';
 import { ApplicationContext } from '../contexts/ApplicationContext';
 import { RecentTransactions } from '../components/RecentTransactions/RecentTransactions';
 import { FilterSelect } from '../components/FilterSelect';
+import { fetchWithCredentials } from '../utils';
 
 export const Dashboard: React.FC = () => {
   const classes = useStyles();
@@ -76,14 +77,14 @@ export const Dashboard: React.FC = () => {
     }
 
     Promise.all([
-      fetch(`/api/v1/network/organizations?limit=100`),
-      fetch(
+      fetchWithCredentials(`/api/v1/network/organizations?limit=100`),
+      fetchWithCredentials(
         `/api/v1/namespaces/${selectedNamespace}/data?limit=200${createdFilterString}`
       ),
-      fetch(
+      fetchWithCredentials(
         `/api/v1/namespaces/${selectedNamespace}/messages?limit=200${createdFilterString}`
       ),
-      fetch(
+      fetchWithCredentials(
         `/api/v1/namespaces/${selectedNamespace}/transactions?limit=200&created=>=${dayjs()
           .subtract(24, 'hours')
           .unix()}${createdFilterString}`

src/views/Data/Data.tsx

@@ -32,6 +32,7 @@ import { NamespaceContext } from '../../contexts/NamespaceContext';
 import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { FilterSelect } from '../../components/FilterSelect';
 import { DataDetails } from './DataDetails';
+import { fetchWithCredentials } from '../../utils';
 
 const PAGE_LIMITS = [10, 25];
 
@@ -106,7 +107,7 @@ export const Data: React.FC = () => {
       createdFilterString = `&created=>=${dayjs().subtract(7, 'days').unix()}`;
     }
 
-    fetch(
+    fetchWithCredentials(
       `/api/v1/namespaces/${selectedNamespace}/data?limit=${rowsPerPage}&skip=${
         rowsPerPage * currentPage
       }${createdFilterString}`

src/views/Messages/MessageDetails.tsx

@@ -35,6 +35,7 @@ import clsx from 'clsx';
 import { NamespaceContext } from '../../contexts/NamespaceContext';
 import { useHistory } from 'react-router-dom';
 import Highlight from 'react-highlight';
+import { fetchWithCredentials } from '../../utils';
 
 interface Props {
   message: IMessage;
@@ -65,10 +66,10 @@ export const MessageDetails: React.FC<Props> = ({ message, open, onClose }) => {
   useEffect(() => {
     setLoading(true);
     Promise.all([
-      fetch(
+      fetchWithCredentials(
         `/api/v1/namespaces/${selectedNamespace}/batches/${message.batchID}`
       ),
-      fetch(
+      fetchWithCredentials(
         `/api/v1/namespaces/${selectedNamespace}/messages/${message.header.id}?data`
       ),
     ])

src/views/Messages/Messages.tsx

@@ -41,6 +41,7 @@ import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { DataViewSwitch } from '../../components/DataViewSwitch';
 import { useHistory } from 'react-router-dom';
 import { FilterSelect } from '../../components/FilterSelect';
+import { fetchWithCredentials } from '../../utils';
 
 const PAGE_LIMITS = [10, 25];
 
@@ -84,7 +85,7 @@ export const Messages: React.FC = () => {
       createdFilterString = `&created=>=${dayjs().subtract(7, 'days').unix()}`;
     }
 
-    fetch(
+    fetchWithCredentials(
       `/api/v1/namespaces/${selectedNamespace}/messages?limit=${rowsPerPage}&skip=${
         rowsPerPage * currentPage
       }${createdFilterString}`

src/views/Transactions/TransactionDetails.tsx

@@ -32,6 +32,7 @@ import {
   CardContent,
   makeStyles,
 } from '@material-ui/core';
+import { fetchWithCredentials } from '../../utils';
 
 export const TransactionDetails: React.FC = () => {
   const history = useHistory();
@@ -55,7 +56,9 @@ export const TransactionDetails: React.FC = () => {
 
   useEffect(() => {
     setLoading(true);
-    fetch(`/api/v1/namespaces/${selectedNamespace}/transactions/${id}`)
+    fetchWithCredentials(
+      `/api/v1/namespaces/${selectedNamespace}/transactions/${id}`
+    )
       .then(async (response) => {
         if (response.ok) {
           setTransaction(await response.json());

src/views/Transactions/Transactions.tsx

@@ -39,6 +39,7 @@ import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { DataTimeline } from '../../components/DataTimeline/DataTimeline';
 import { DataViewSwitch } from '../../components/DataViewSwitch';
 import { FilterSelect } from '../../components/FilterSelect';
+import { fetchWithCredentials } from '../../utils';
 
 const PAGE_LIMITS = [10, 25];
 
@@ -114,7 +115,7 @@ export const Transactions: React.FC = () => {
       createdFilterString = `&created=>=${dayjs().subtract(7, 'days').unix()}`;
     }
 
-    fetch(
+    fetchWithCredentials(
       `/api/v1/namespaces/${selectedNamespace}/transactions?limit=${rowsPerPage}&skip=${
         rowsPerPage * currentPage
       }${createdFilterString}`