adds conditional cookie banner for notifying users that data is being…

… collected

app/cdap/components/CookieBanner/index.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright © 2023 Cask Data, Inc.
+ *
+ * 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.
+ */
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Modal from '@material-ui/core/modal';
+import Button from '@material-ui/core/Button';
+import Container from '@material-ui/core/Container';
+import Cookies from 'universal-cookie';
+import T from 'i18n-react';
+
+const okText = 'commons.gotIt';
+const learnMore = 'commons.learnMore';
+
+const thirteenMonths = new Date();
+thirteenMonths.setMonth(thirteenMonths.getMonth() + 13);
+
+const cookies = new Cookies();
+const cdapDataCookieWithTag = (tag: string) => {
+  return `CDAP_DATA_CONSENT_COOKIE_${tag}`;
+};
+
+interface IBannerProps {
+  cookieName: string;
+  cookieLink: string;
+  cookieText: string;
+}
+
+type IModalBodyProps = Omit<IBannerProps, 'cookieName'> & {
+  closeModal: () => void;
+};
+
+const ModalContainer = styled(Container)`
+  background-color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+`;
+
+const ModalBody = ({ cookieLink, cookieText, closeModal }: IModalBodyProps) => {
+  return (
+    <ModalContainer fixed maxWidth="sm">
+      <div>
+        <span>
+          {cookieText} <a href={cookieLink}>{T.translate(learnMore).toString()}</a>
+        </span>
+      </div>
+      <Button style={{ float: 'right' }} onClick={closeModal}>
+        {T.translate(okText).toString()}
+      </Button>
+    </ModalContainer>
+  );
+};
+
+/**
+ * If the user has analytics enabled and if the consent cookie doesn't exist
+ * on their computer, show the cookie banner
+ */
+export const CookieBanner = () => {
+  const gtm = window.CDAP_CONFIG.googleTagManager;
+  if (gtm === '') {
+    return null;
+  }
+  const cookieText = window.CDAP_CONFIG.cookieBannerText;
+  const cookieLink = window.CDAP_CONFIG.cookieBannerLink;
+  const dataCookie = cdapDataCookieWithTag(gtm);
+  const cdapDataConsented = cookies.get(dataCookie);
+  if (!cdapDataConsented && cookieLink !== '' && cookieText !== '') {
+    return <Banner cookieName={dataCookie} cookieLink={cookieLink} cookieText={cookieText} />;
+  }
+
+  return null;
+};
+
+const Banner = ({ cookieName, cookieLink, cookieText }: IBannerProps) => {
+  const [modalOpen, setModalOpen] = useState(true);
+
+  const handleClose = () => {
+    setModalOpen(false);
+    cookies.set(cookieName, true, {
+      expires: thirteenMonths,
+      path: '/',
+    });
+  };
+
+  return (
+    <Modal
+      open={modalOpen}
+      onClose={handleClose}
+      aria-labelledby="simple-modal-title"
+      aria-describedby="simple-modal-description"
+    >
+      <ModalBody closeModal={handleClose} cookieLink={cookieLink} cookieText={cookieText} />
+    </Modal>
+  );
+};

app/cdap/main.js

@@ -62,6 +62,7 @@ import ee from 'event-emitter';
 import globalEvents from 'services/global-events';
 import { handlePageLevelError, objectQuery, setupExperiments } from 'services/helpers';
 import history from 'services/history';
+import { CookieBanner } from 'components/CookieBanner';
 // See ./graphql/fragements/README.md
 import introspectionQueryResultData from '../../graphql/fragments/fragmentTypes.json';
 
@@ -365,6 +366,7 @@ class CDAP extends Component {
       objectQuery(this.state, 'pageLevelError', 'errorCode') === 403;
     return (
       <Router history={history}>
+        <CookieBanner />
         <ApolloProvider client={client}>
           <div className="cdap-container">
             <Helmet title={Theme.productName} />

app/cdap/text/text-en.yaml

@@ -5,6 +5,8 @@ commons:
   apply: Apply
   as: as
   back: Back
+  learnMore: Learn More
+  gotIt: Ok, Got it.
   cask: CASK
   cdap: CDAP
   clickhere: click here

server/config/development/cdap.json

@@ -16,5 +16,7 @@
   "session.secret.key": "sample-secret-key-for-encryption",
   "feature.lifecycle.management.edit.enabled": "true",
   "ui.analyticsTag": "",
-  "ui.GTM": ""
+  "ui.GTM": "",
+  "ui.cookieBannerText": "",
+  "ui.cookieBannerLink": ""
 }

server/express.js

@@ -258,6 +258,9 @@ function makeApp(authAddress, cdapConfig, uiSettings) {
       featureFlags: cdapConfig.featureFlags,
       analyticsTag: cdapConfig['ui.analyticsTag'],
       googleTagManager: cdapConfig['ui.GTM'],
+      cookieBannerText: cdapConfig['ui.cookieBannerText'],
+      cookieBannerLink: cdapConfig['ui.cookieBannerLink']
+
     });
 
     res.header({