From a9667e6f37ed8107265429b81b767d192c0154c1 Mon Sep 17 00:00:00 2001 From: Oreoluwa Agunbiade Date: Fri, 17 Dec 2021 14:53:45 -0700 Subject: [PATCH 1/8] Initial commit --- sample.js | 15 +++++ src/components/Modal.module.css | 3 + src/components/Modal.tsx | 115 ++++++++++++++++++++++++++++++++ src/theme/Root.js | 46 +++++++++++++ 4 files changed, 179 insertions(+) create mode 100644 sample.js create mode 100644 src/components/Modal.module.css create mode 100644 src/components/Modal.tsx create mode 100644 src/theme/Root.js diff --git a/sample.js b/sample.js new file mode 100644 index 0000000000..095c24602b --- /dev/null +++ b/sample.js @@ -0,0 +1,15 @@ +// const ExecutionEnvironment = require("@docusaurus/ExecutionEnvironment"); + +module.exports = (function () { + // if (!ExecutionEnvironment.canUseDOM) { + // return null + // } + + console.log("Running!!!!!!!!!!!") + // const update = (location) => onRouteUpdate({ location }) { + // _paq.push(["setCustomUrl", location.pathname]) + // _paq.push(["setDocumentTitle", document.title]) + // _paq.push(["trackPageView"]) + // } + return +})() diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css new file mode 100644 index 0000000000..c1d8f90c97 --- /dev/null +++ b/src/components/Modal.module.css @@ -0,0 +1,3 @@ +.subscription_notice { + z-index: 99; +} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx new file mode 100644 index 0000000000..0bebc3a9e8 --- /dev/null +++ b/src/components/Modal.tsx @@ -0,0 +1,115 @@ +import React, { ReactElement, useEffect } from "react" +import ModalCmp from "react-modal" + +import styles from "./Modal.module.css" + +interface ModalProps { + externalLink: string + showModal: boolean + children?: React.ReactNode + disclaimer?: string | ReactElement + shouldCloseOnEsc?: boolean + shouldAcceptOnEnter?: boolean + shouldCloseOnOverlayClick?: boolean + handleCancelRequest: () => void + handleAcceptRequest?: () => void +} + +export const idOfNoticeLink = "notice" + +if (typeof window !== "undefined") { + ModalCmp.setAppElement("body") +} + +// const modalDefaultstyle = +// "outline-none absolute top-1/2 md:left-1/2 transform md:-translate-x-1/2 -translate-y-1/2 md:-mr-50% md:right-auto bg-white rounded-md shadow-xl px-8 py-15 mt-4 md:ml-0 md:mr-0 sm:px-24 w-auto md:w-564px w-full-mx-5 overflow-y-auto max-h-full" + +export const SusbscriptionNoticeModal: React.FC = ({ + externalLink, + showModal, + disclaimer, + shouldCloseOnEsc = false, + shouldAcceptOnEnter = false, + shouldCloseOnOverlayClick = false, + handleCancelRequest, + handleAcceptRequest, +}) => { + const onRequestClose = () => { + handleCancelRequest() + } + + // function to check if there's any active button (focus on the button) to avoid conflicts with shouldAcceptOnEnter property + const checkIfAnyActiveButton = () => { + const activeElement = document.activeElement + if (activeElement && activeElement.tagName.toLowerCase() === "button") { + return true + } + return false + } + + useEffect(() => { + if (showModal) { + document.body.style.overflow = "hidden" + } + const timer = setTimeout(() => { + if (!showModal) { + document.body.style.overflow = "unset" + } + }, 300) + return () => clearTimeout(timer) + }, [showModal]) + + useEffect(() => { + const listener = (e: any) => { + const code = e.key + if ( + code === "Enter" && + handleAcceptRequest && + shouldAcceptOnEnter && + showModal && + !checkIfAnyActiveButton() + ) { + e.preventDefault() + handleAcceptRequest() + } + } + document.addEventListener("keydown", listener, false) + return () => { + document.removeEventListener("keydown", listener, false) + } + }) + + return ( + +

+ You need to be a subscriber to access this Gruntwork repository. +

+

+ + Continue to Link + +

+

+ onRequestClose()} href="#"> + Dismiss + +

+ {disclaimer && ( +
+

{disclaimer}

+
+ )} + + ) +} diff --git a/src/theme/Root.js b/src/theme/Root.js new file mode 100644 index 0000000000..130bea9052 --- /dev/null +++ b/src/theme/Root.js @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from "react" +import { + SusbscriptionNoticeModal, + idOfNoticeLink, +} from "/src/components/Modal.tsx" + +const gruntworkRepos = "https://github.com/gruntwork-io" + +function Root({ children }) { + const [displaySubscriberNotice, setDisplaySubscriberNotice] = useState(false) + const [externalLink, setExternalLink] = useState("") + + useEffect(() => { + const listener = (event) => { + console.log("Route------->", event.target.id) + if (event.target.id === idOfNoticeLink) { + setDisplaySubscriberNotice(false) + return + } + + if (event.target.href && event.target.href.includes(gruntworkRepos)) { + event.preventDefault() + console.log + setExternalLink(event.target.href) + setDisplaySubscriberNotice(true) + } + } + + window.addEventListener("click", listener) + + // use-effect cleanup + return () => window.removeEventListener("click", listener) + }, []) + + return ( + <> + + {children} + + ) +} + +export default Root From 926f79ccb29c5996cd69fd160c473f54d688cea9 Mon Sep 17 00:00:00 2001 From: Oreoluwa Agunbiade Date: Mon, 3 Jan 2022 13:38:10 -0700 Subject: [PATCH 2/8] Adds skeleton subscriber notice for private Github links --- package.json | 1 + sample.js | 15 --------------- src/components/Modal.module.css | 3 --- src/components/Modal.tsx | 30 +++++++++--------------------- src/theme/Root.js | 9 ++++++--- yarn.lock | 24 +++++++++++++++++++++++- 6 files changed, 39 insertions(+), 43 deletions(-) delete mode 100644 sample.js delete mode 100644 src/components/Modal.module.css diff --git a/package.json b/package.json index 66fa2d3cbe..6cb82e3a08 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "raw-loader": "^4.0.2", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-modal": "^3.14.4", "url-loader": "^4.1.1" }, "devDependencies": { diff --git a/sample.js b/sample.js deleted file mode 100644 index 095c24602b..0000000000 --- a/sample.js +++ /dev/null @@ -1,15 +0,0 @@ -// const ExecutionEnvironment = require("@docusaurus/ExecutionEnvironment"); - -module.exports = (function () { - // if (!ExecutionEnvironment.canUseDOM) { - // return null - // } - - console.log("Running!!!!!!!!!!!") - // const update = (location) => onRouteUpdate({ location }) { - // _paq.push(["setCustomUrl", location.pathname]) - // _paq.push(["setDocumentTitle", document.title]) - // _paq.push(["trackPageView"]) - // } - return -})() diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css deleted file mode 100644 index c1d8f90c97..0000000000 --- a/src/components/Modal.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.subscription_notice { - z-index: 99; -} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 0bebc3a9e8..898d0408c7 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,13 +1,10 @@ -import React, { ReactElement, useEffect } from "react" +import React, { useEffect } from "react" import ModalCmp from "react-modal" -import styles from "./Modal.module.css" - interface ModalProps { externalLink: string showModal: boolean children?: React.ReactNode - disclaimer?: string | ReactElement shouldCloseOnEsc?: boolean shouldAcceptOnEnter?: boolean shouldCloseOnOverlayClick?: boolean @@ -21,13 +18,9 @@ if (typeof window !== "undefined") { ModalCmp.setAppElement("body") } -// const modalDefaultstyle = -// "outline-none absolute top-1/2 md:left-1/2 transform md:-translate-x-1/2 -translate-y-1/2 md:-mr-50% md:right-auto bg-white rounded-md shadow-xl px-8 py-15 mt-4 md:ml-0 md:mr-0 sm:px-24 w-auto md:w-564px w-full-mx-5 overflow-y-auto max-h-full" - -export const SusbscriptionNoticeModal: React.FC = ({ +export const SubscriptionNoticeModal: React.FC = ({ externalLink, showModal, - disclaimer, shouldCloseOnEsc = false, shouldAcceptOnEnter = false, shouldCloseOnOverlayClick = false, @@ -87,14 +80,14 @@ export const SusbscriptionNoticeModal: React.FC = ({ shouldCloseOnEsc={shouldCloseOnEsc} shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} closeTimeoutMS={200} - className={styles.subscription_notice} + defaultStyles={{ + overlay: { + ...ModalCmp.defaultStyles.overlay, + zIndex: 999, + }, + }} > -

- You need to be a subscriber to access this Gruntwork repository. -

+

You need to be a subscriber to access this Gruntwork repository.

Continue to Link @@ -105,11 +98,6 @@ export const SusbscriptionNoticeModal: React.FC = ({ Dismiss

- {disclaimer && ( -
-

{disclaimer}

-
- )} ) } diff --git a/src/theme/Root.js b/src/theme/Root.js index 130bea9052..3b11df5108 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react" import { - SusbscriptionNoticeModal, + SubscriptionNoticeModal, idOfNoticeLink, } from "/src/components/Modal.tsx" @@ -12,7 +12,6 @@ function Root({ children }) { useEffect(() => { const listener = (event) => { - console.log("Route------->", event.target.id) if (event.target.id === idOfNoticeLink) { setDisplaySubscriberNotice(false) return @@ -34,9 +33,13 @@ function Root({ children }) { return ( <> - { + setDisplaySubscriberNotice(false) + setExternalLink("") + }} /> {children} diff --git a/yarn.lock b/yarn.lock index 074718d7f1..be8443b22a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3929,6 +3929,11 @@ execa@^5.0.0: signal-exit "^3.0.3" strip-final-newline "^2.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + express@^4.17.1: version "4.17.1" resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134" @@ -6844,7 +6849,7 @@ react-json-view@^1.21.3: react-lifecycles-compat "^3.0.4" react-textarea-autosize "^8.3.2" -react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -6856,6 +6861,16 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1: dependencies: "@babel/runtime" "^7.10.3" +react-modal@^3.14.4: + version "3.14.4" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3" + integrity sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-router-config@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988" @@ -8271,6 +8286,13 @@ wait-on@^6.0.0: minimist "^1.2.5" rxjs "^7.1.0" +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.2.0.tgz#47d78f5415fe550ecd740f99fe2882323a58b1ce" From 09edc2c0a07e9467c7a5911a093b2a5dde6a59d4 Mon Sep 17 00:00:00 2001 From: Eugene K Date: Thu, 13 Jan 2022 16:06:30 -0500 Subject: [PATCH 3/8] Updated text and added repo name to modal. Also added initial css file --- src/components/Modal.module.css | 15 +++++++++++++++ src/components/Modal.tsx | 20 +++++++++++++------- 2 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 src/components/Modal.module.css diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css new file mode 100644 index 0000000000..a7039a66ca --- /dev/null +++ b/src/components/Modal.module.css @@ -0,0 +1,15 @@ +.mainContainer { +} + +.modalTitle { + margin-bottom: 3rem; + font-size: 1.5rem /* 24px */; + line-height: 2rem /* 32px */; + --tw-text-opacity: 1; + color: rgba(45, 55, 72, var(--tw-text-opacity)); + font-weight: 700; +} + +.modalButtonsContainer { + flex: auto; +} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 898d0408c7..3e2b6b0760 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react" import ModalCmp from "react-modal" +import styles from "./Modal.module.css" interface ModalProps { externalLink: string @@ -31,6 +32,9 @@ export const SubscriptionNoticeModal: React.FC = ({ handleCancelRequest() } + const gitHubRepoName = externalLink.match(/https:\/\/github.com\/gruntwork-io\/(.*?)\/.*/) + + // function to check if there's any active button (focus on the button) to avoid conflicts with shouldAcceptOnEnter property const checkIfAnyActiveButton = () => { const activeElement = document.activeElement @@ -80,6 +84,7 @@ export const SubscriptionNoticeModal: React.FC = ({ shouldCloseOnEsc={shouldCloseOnEsc} shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} closeTimeoutMS={200} + className={styles.mainContainer} defaultStyles={{ overlay: { ...ModalCmp.defaultStyles.overlay, @@ -87,17 +92,18 @@ export const SubscriptionNoticeModal: React.FC = ({ }, }} > -

You need to be a subscriber to access this Gruntwork repository.

+

For Subscribers Only

- - Continue to Link - + This link leads to the private {gitHubRepoName && gitHubRepoName.length >= 1 && {gitHubRepoName[1]}} repository visible only to subscribers; everyone else will see a 404.

-

+

) } From 847dca3f459d2b8004e44e344fcb2c620d24a262 Mon Sep 17 00:00:00 2001 From: Oreoluwa Agunbiade Date: Fri, 17 Dec 2021 14:53:45 -0700 Subject: [PATCH 4/8] Initial commit --- sample.js | 15 +++++ src/components/Modal.module.css | 3 + src/components/Modal.tsx | 115 ++++++++++++++++++++++++++++++++ src/theme/Root.js | 46 +++++++++++++ 4 files changed, 179 insertions(+) create mode 100644 sample.js create mode 100644 src/components/Modal.module.css create mode 100644 src/components/Modal.tsx create mode 100644 src/theme/Root.js diff --git a/sample.js b/sample.js new file mode 100644 index 0000000000..095c24602b --- /dev/null +++ b/sample.js @@ -0,0 +1,15 @@ +// const ExecutionEnvironment = require("@docusaurus/ExecutionEnvironment"); + +module.exports = (function () { + // if (!ExecutionEnvironment.canUseDOM) { + // return null + // } + + console.log("Running!!!!!!!!!!!") + // const update = (location) => onRouteUpdate({ location }) { + // _paq.push(["setCustomUrl", location.pathname]) + // _paq.push(["setDocumentTitle", document.title]) + // _paq.push(["trackPageView"]) + // } + return +})() diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css new file mode 100644 index 0000000000..c1d8f90c97 --- /dev/null +++ b/src/components/Modal.module.css @@ -0,0 +1,3 @@ +.subscription_notice { + z-index: 99; +} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx new file mode 100644 index 0000000000..0bebc3a9e8 --- /dev/null +++ b/src/components/Modal.tsx @@ -0,0 +1,115 @@ +import React, { ReactElement, useEffect } from "react" +import ModalCmp from "react-modal" + +import styles from "./Modal.module.css" + +interface ModalProps { + externalLink: string + showModal: boolean + children?: React.ReactNode + disclaimer?: string | ReactElement + shouldCloseOnEsc?: boolean + shouldAcceptOnEnter?: boolean + shouldCloseOnOverlayClick?: boolean + handleCancelRequest: () => void + handleAcceptRequest?: () => void +} + +export const idOfNoticeLink = "notice" + +if (typeof window !== "undefined") { + ModalCmp.setAppElement("body") +} + +// const modalDefaultstyle = +// "outline-none absolute top-1/2 md:left-1/2 transform md:-translate-x-1/2 -translate-y-1/2 md:-mr-50% md:right-auto bg-white rounded-md shadow-xl px-8 py-15 mt-4 md:ml-0 md:mr-0 sm:px-24 w-auto md:w-564px w-full-mx-5 overflow-y-auto max-h-full" + +export const SusbscriptionNoticeModal: React.FC = ({ + externalLink, + showModal, + disclaimer, + shouldCloseOnEsc = false, + shouldAcceptOnEnter = false, + shouldCloseOnOverlayClick = false, + handleCancelRequest, + handleAcceptRequest, +}) => { + const onRequestClose = () => { + handleCancelRequest() + } + + // function to check if there's any active button (focus on the button) to avoid conflicts with shouldAcceptOnEnter property + const checkIfAnyActiveButton = () => { + const activeElement = document.activeElement + if (activeElement && activeElement.tagName.toLowerCase() === "button") { + return true + } + return false + } + + useEffect(() => { + if (showModal) { + document.body.style.overflow = "hidden" + } + const timer = setTimeout(() => { + if (!showModal) { + document.body.style.overflow = "unset" + } + }, 300) + return () => clearTimeout(timer) + }, [showModal]) + + useEffect(() => { + const listener = (e: any) => { + const code = e.key + if ( + code === "Enter" && + handleAcceptRequest && + shouldAcceptOnEnter && + showModal && + !checkIfAnyActiveButton() + ) { + e.preventDefault() + handleAcceptRequest() + } + } + document.addEventListener("keydown", listener, false) + return () => { + document.removeEventListener("keydown", listener, false) + } + }) + + return ( + +

+ You need to be a subscriber to access this Gruntwork repository. +

+

+ + Continue to Link + +

+

+ onRequestClose()} href="#"> + Dismiss + +

+ {disclaimer && ( +
+

{disclaimer}

+
+ )} + + ) +} diff --git a/src/theme/Root.js b/src/theme/Root.js new file mode 100644 index 0000000000..130bea9052 --- /dev/null +++ b/src/theme/Root.js @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from "react" +import { + SusbscriptionNoticeModal, + idOfNoticeLink, +} from "/src/components/Modal.tsx" + +const gruntworkRepos = "https://github.com/gruntwork-io" + +function Root({ children }) { + const [displaySubscriberNotice, setDisplaySubscriberNotice] = useState(false) + const [externalLink, setExternalLink] = useState("") + + useEffect(() => { + const listener = (event) => { + console.log("Route------->", event.target.id) + if (event.target.id === idOfNoticeLink) { + setDisplaySubscriberNotice(false) + return + } + + if (event.target.href && event.target.href.includes(gruntworkRepos)) { + event.preventDefault() + console.log + setExternalLink(event.target.href) + setDisplaySubscriberNotice(true) + } + } + + window.addEventListener("click", listener) + + // use-effect cleanup + return () => window.removeEventListener("click", listener) + }, []) + + return ( + <> + + {children} + + ) +} + +export default Root From ef2037e85f42b344c50a9772ede2e25266f0fa67 Mon Sep 17 00:00:00 2001 From: Oreoluwa Agunbiade Date: Mon, 3 Jan 2022 13:38:10 -0700 Subject: [PATCH 5/8] Adds skeleton subscriber notice for private Github links --- package.json | 1 + sample.js | 15 --------------- src/components/Modal.module.css | 3 --- src/components/Modal.tsx | 30 +++++++++--------------------- src/theme/Root.js | 9 ++++++--- yarn.lock | 24 +++++++++++++++++++++++- 6 files changed, 39 insertions(+), 43 deletions(-) delete mode 100644 sample.js delete mode 100644 src/components/Modal.module.css diff --git a/package.json b/package.json index 6d42886fcd..505f508d61 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "raw-loader": "^4.0.2", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-modal": "^3.14.4", "url-loader": "^4.1.1" }, "devDependencies": { diff --git a/sample.js b/sample.js deleted file mode 100644 index 095c24602b..0000000000 --- a/sample.js +++ /dev/null @@ -1,15 +0,0 @@ -// const ExecutionEnvironment = require("@docusaurus/ExecutionEnvironment"); - -module.exports = (function () { - // if (!ExecutionEnvironment.canUseDOM) { - // return null - // } - - console.log("Running!!!!!!!!!!!") - // const update = (location) => onRouteUpdate({ location }) { - // _paq.push(["setCustomUrl", location.pathname]) - // _paq.push(["setDocumentTitle", document.title]) - // _paq.push(["trackPageView"]) - // } - return -})() diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css deleted file mode 100644 index c1d8f90c97..0000000000 --- a/src/components/Modal.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.subscription_notice { - z-index: 99; -} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 0bebc3a9e8..898d0408c7 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,13 +1,10 @@ -import React, { ReactElement, useEffect } from "react" +import React, { useEffect } from "react" import ModalCmp from "react-modal" -import styles from "./Modal.module.css" - interface ModalProps { externalLink: string showModal: boolean children?: React.ReactNode - disclaimer?: string | ReactElement shouldCloseOnEsc?: boolean shouldAcceptOnEnter?: boolean shouldCloseOnOverlayClick?: boolean @@ -21,13 +18,9 @@ if (typeof window !== "undefined") { ModalCmp.setAppElement("body") } -// const modalDefaultstyle = -// "outline-none absolute top-1/2 md:left-1/2 transform md:-translate-x-1/2 -translate-y-1/2 md:-mr-50% md:right-auto bg-white rounded-md shadow-xl px-8 py-15 mt-4 md:ml-0 md:mr-0 sm:px-24 w-auto md:w-564px w-full-mx-5 overflow-y-auto max-h-full" - -export const SusbscriptionNoticeModal: React.FC = ({ +export const SubscriptionNoticeModal: React.FC = ({ externalLink, showModal, - disclaimer, shouldCloseOnEsc = false, shouldAcceptOnEnter = false, shouldCloseOnOverlayClick = false, @@ -87,14 +80,14 @@ export const SusbscriptionNoticeModal: React.FC = ({ shouldCloseOnEsc={shouldCloseOnEsc} shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} closeTimeoutMS={200} - className={styles.subscription_notice} + defaultStyles={{ + overlay: { + ...ModalCmp.defaultStyles.overlay, + zIndex: 999, + }, + }} > -

- You need to be a subscriber to access this Gruntwork repository. -

+

You need to be a subscriber to access this Gruntwork repository.

Continue to Link @@ -105,11 +98,6 @@ export const SusbscriptionNoticeModal: React.FC = ({ Dismiss

- {disclaimer && ( -
-

{disclaimer}

-
- )} ) } diff --git a/src/theme/Root.js b/src/theme/Root.js index 130bea9052..3b11df5108 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react" import { - SusbscriptionNoticeModal, + SubscriptionNoticeModal, idOfNoticeLink, } from "/src/components/Modal.tsx" @@ -12,7 +12,6 @@ function Root({ children }) { useEffect(() => { const listener = (event) => { - console.log("Route------->", event.target.id) if (event.target.id === idOfNoticeLink) { setDisplaySubscriberNotice(false) return @@ -34,9 +33,13 @@ function Root({ children }) { return ( <> - { + setDisplaySubscriberNotice(false) + setExternalLink("") + }} /> {children} diff --git a/yarn.lock b/yarn.lock index ab3ffbbf18..c46e2b1cd1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5048,6 +5048,11 @@ execa@^5.0.0: signal-exit "^3.0.3" strip-final-newline "^2.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + express@^4.17.1: version "4.17.1" resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134" @@ -7927,7 +7932,7 @@ react-json-view@^1.21.3: react-lifecycles-compat "^3.0.4" react-textarea-autosize "^8.3.2" -react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -7939,6 +7944,16 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1: dependencies: "@babel/runtime" "^7.10.3" +react-modal@^3.14.4: + version "3.14.4" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3" + integrity sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-router-config@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988" @@ -9382,6 +9397,13 @@ wait-on@^6.0.0: minimist "^1.2.5" rxjs "^7.1.0" +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.2.0.tgz#47d78f5415fe550ecd740f99fe2882323a58b1ce" From d09b3cb8d4d9ec6a4a4f2ab34914414c0d8045d9 Mon Sep 17 00:00:00 2001 From: Eugene K Date: Thu, 13 Jan 2022 16:06:30 -0500 Subject: [PATCH 6/8] Updated text and added repo name to modal. Also added initial css file --- src/components/Modal.module.css | 15 +++++++++++++++ src/components/Modal.tsx | 20 +++++++++++++------- 2 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 src/components/Modal.module.css diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css new file mode 100644 index 0000000000..a7039a66ca --- /dev/null +++ b/src/components/Modal.module.css @@ -0,0 +1,15 @@ +.mainContainer { +} + +.modalTitle { + margin-bottom: 3rem; + font-size: 1.5rem /* 24px */; + line-height: 2rem /* 32px */; + --tw-text-opacity: 1; + color: rgba(45, 55, 72, var(--tw-text-opacity)); + font-weight: 700; +} + +.modalButtonsContainer { + flex: auto; +} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 898d0408c7..3e2b6b0760 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react" import ModalCmp from "react-modal" +import styles from "./Modal.module.css" interface ModalProps { externalLink: string @@ -31,6 +32,9 @@ export const SubscriptionNoticeModal: React.FC = ({ handleCancelRequest() } + const gitHubRepoName = externalLink.match(/https:\/\/github.com\/gruntwork-io\/(.*?)\/.*/) + + // function to check if there's any active button (focus on the button) to avoid conflicts with shouldAcceptOnEnter property const checkIfAnyActiveButton = () => { const activeElement = document.activeElement @@ -80,6 +84,7 @@ export const SubscriptionNoticeModal: React.FC = ({ shouldCloseOnEsc={shouldCloseOnEsc} shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} closeTimeoutMS={200} + className={styles.mainContainer} defaultStyles={{ overlay: { ...ModalCmp.defaultStyles.overlay, @@ -87,17 +92,18 @@ export const SubscriptionNoticeModal: React.FC = ({ }, }} > -

You need to be a subscriber to access this Gruntwork repository.

+

For Subscribers Only

- - Continue to Link - + This link leads to the private {gitHubRepoName && gitHubRepoName.length >= 1 && {gitHubRepoName[1]}} repository visible only to subscribers; everyone else will see a 404.

-

+

) } From efddf16ba26ed45ea705e190a8ed9d9ad4d06c41 Mon Sep 17 00:00:00 2001 From: Eben Eliason Date: Thu, 13 Jan 2022 13:54:27 -0800 Subject: [PATCH 7/8] Add modal and button styles --- src/components/Modal.module.css | 42 ++++++++++++++++++++++++++------- src/components/Modal.tsx | 28 +++++++++++----------- src/css/custom.css | 19 +++++++++++++++ 3 files changed, 67 insertions(+), 22 deletions(-) diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css index a7039a66ca..96c1e443bb 100644 --- a/src/components/Modal.module.css +++ b/src/components/Modal.module.css @@ -1,15 +1,41 @@ .mainContainer { + max-width: 420px; + margin: auto; + background: #f9fbfc; + padding: 2em; + border-radius: 6px; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + justify-self: center; + align-self: center; } -.modalTitle { - margin-bottom: 3rem; - font-size: 1.5rem /* 24px */; - line-height: 2rem /* 32px */; - --tw-text-opacity: 1; - color: rgba(45, 55, 72, var(--tw-text-opacity)); - font-weight: 700; +html[data-theme="dark"] .mainContainer { + background-color: var(--ifm-background-surface-color); } -.modalButtonsContainer { +.buttonsContainer { flex: auto; + text-align: right; + font-weight: 600; +} + +.buttonsContainer > * { + margin-right: 1rem; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(255, 255, 255, 0.75); + z-index: 999; + display: flex; +} + +html[data-theme="dark"] .overlay { + background-color: rgba(0, 0, 0, 0.75); } diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 3e2b6b0760..cdb8902c53 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -22,9 +22,9 @@ if (typeof window !== "undefined") { export const SubscriptionNoticeModal: React.FC = ({ externalLink, showModal, - shouldCloseOnEsc = false, + shouldCloseOnEsc = true, shouldAcceptOnEnter = false, - shouldCloseOnOverlayClick = false, + shouldCloseOnOverlayClick = true, handleCancelRequest, handleAcceptRequest, }) => { @@ -32,8 +32,9 @@ export const SubscriptionNoticeModal: React.FC = ({ handleCancelRequest() } - const gitHubRepoName = externalLink.match(/https:\/\/github.com\/gruntwork-io\/(.*?)\/.*/) - + const gitHubRepoName = externalLink.match( + /https:\/\/github.com\/gruntwork-io\/(.*?)\/.*/ + ) // function to check if there's any active button (focus on the button) to avoid conflicts with shouldAcceptOnEnter property const checkIfAnyActiveButton = () => { @@ -83,20 +84,19 @@ export const SubscriptionNoticeModal: React.FC = ({ onRequestClose={onRequestClose} shouldCloseOnEsc={shouldCloseOnEsc} shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} - closeTimeoutMS={200} + closeTimeoutMS={0} className={styles.mainContainer} - defaultStyles={{ - overlay: { - ...ModalCmp.defaultStyles.overlay, - zIndex: 999, - }, - }} + overlayClassName={styles.overlay} > -

For Subscribers Only

+

For Subscribers Only

- This link leads to the private {gitHubRepoName && gitHubRepoName.length >= 1 && {gitHubRepoName[1]}} repository visible only to subscribers; everyone else will see a 404. + This link leads to the private{" "} + {gitHubRepoName && gitHubRepoName.length >= 1 && ( + {gitHubRepoName[1]} + )}{" "} + repository visible only to subscribers; everyone else will see a 404.

-
+
onRequestClose()} href="#"> Cancel diff --git a/src/css/custom.css b/src/css/custom.css index b2c7f9e923..7eef8022f0 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -230,6 +230,25 @@ html[data-theme="dark"] .menu__link--sublist { border-left: 2px solid var(--ifm-color-primary); } +/* BUTTONS */ +.link-button { + display: inline-block; + padding: 0.5rem 2rem; + background: #5849a6; + color: white; + font-weight: 600; + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + border-radius: 100vh; + transition: 0.2s ease-in-out; +} + +.link-button:hover { + color: white; + text-decoration: none; + filter: brightness(1.1); + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); +} + /* FOOTER */ /* --ifm-footer-background-color doesn't appear to work */ From f96d6f60d74703249b3f65262f64715ce09d2bf1 Mon Sep 17 00:00:00 2001 From: Eugene K Date: Thu, 13 Jan 2022 17:21:42 -0500 Subject: [PATCH 8/8] [APT-1574] Added ability to dismiss the private GitHub warning forever --- src/components/Modal.module.css | 5 +++++ src/components/Modal.tsx | 20 ++++++++++++++++++++ src/theme/Root.js | 10 ++++++++++ 3 files changed, 35 insertions(+) diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css index 96c1e443bb..b363666350 100644 --- a/src/components/Modal.module.css +++ b/src/components/Modal.module.css @@ -19,6 +19,7 @@ html[data-theme="dark"] .mainContainer { flex: auto; text-align: right; font-weight: 600; + margin-top: 1rem; } .buttonsContainer > * { @@ -39,3 +40,7 @@ html[data-theme="dark"] .mainContainer { html[data-theme="dark"] .overlay { background-color: rgba(0, 0, 0, 0.75); } + +input[type="checkbox"] { + margin-right: 0.5rem; +} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index cdb8902c53..70ac8b7867 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react" import ModalCmp from "react-modal" +import { DONT_SHOW_PRIVATE_GITHUB_WARNING_KEY } from "../theme/Root" import styles from "./Modal.module.css" interface ModalProps { @@ -29,6 +30,12 @@ export const SubscriptionNoticeModal: React.FC = ({ handleAcceptRequest, }) => { const onRequestClose = () => { + // If the user checked to never see this notice but subsequently cancels we will disregard their selection. We will + // only stop showing this notice if they check the box and then proceed to GitHub + if(window.localStorage.getItem(DONT_SHOW_PRIVATE_GITHUB_WARNING_KEY)) { + window.localStorage.removeItem(DONT_SHOW_PRIVATE_GITHUB_WARNING_KEY) + } + handleCancelRequest() } @@ -77,6 +84,15 @@ export const SubscriptionNoticeModal: React.FC = ({ } }) + const setDontWarnMe = (event) => { + event.stopPropagation() + if(!window.localStorage.getItem(DONT_SHOW_PRIVATE_GITHUB_WARNING_KEY)) { + window.localStorage.setItem(DONT_SHOW_PRIVATE_GITHUB_WARNING_KEY, "true") + } else { + window.localStorage.removeItem(DONT_SHOW_PRIVATE_GITHUB_WARNING_KEY) + } + } + return ( = ({ )}{" "} repository visible only to subscribers; everyone else will see a 404.

+
+ + +
onRequestClose()} href="#"> Cancel diff --git a/src/theme/Root.js b/src/theme/Root.js index 3b11df5108..3d4be98982 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -6,6 +6,8 @@ import { const gruntworkRepos = "https://github.com/gruntwork-io" +export const DONT_SHOW_PRIVATE_GITHUB_WARNING_KEY = "dontWarnGitHubLinks" + function Root({ children }) { const [displaySubscriberNotice, setDisplaySubscriberNotice] = useState(false) const [externalLink, setExternalLink] = useState("") @@ -16,6 +18,14 @@ function Root({ children }) { setDisplaySubscriberNotice(false) return } + const dontWarn = window.localStorage.getItem( + DONT_SHOW_PRIVATE_GITHUB_WARNING_KEY + ) + + if (dontWarn) { + setDisplaySubscriberNotice(false) + return + } if (event.target.href && event.target.href.includes(gruntworkRepos)) { event.preventDefault()