From 0ccb1d288458d2487e1a13b30c15f30d7cb2c9a8 Mon Sep 17 00:00:00 2001
From: Tai Wilkin <twilkin@azavea.com>
Date: Tue, 23 Feb 2021 14:52:49 -0500
Subject: [PATCH 1/3] Hide Unnecessary Components in Embedded Map

When running in embedded mode, hide the header and footer,
the contributor filter, the report link, the Guide tab, the OAR sidebar
header, and the facility detail actions; make the contributor links into
 text; add a 'open in OAR' link; and remove the 'embed' parameter from
 'share this search'.
---
 src/app/src/App.jsx                           |  14 +-
 src/app/src/components/FacilitiesMap.jsx      |   7 +-
 .../src/components/FacilityDetailSidebar.jsx  | 154 +++++++++-------
 .../components/FacilityDetailSidebarInfo.jsx  |   3 +-
 ...acilitySidebarSearchTabFacilitiesCount.jsx |   2 +
 src/app/src/components/FilterSidebar.jsx      |  15 +-
 .../src/components/FilterSidebarSearchTab.jsx | 170 +++++++++---------
 src/app/src/components/Navbar.jsx             |   6 +-
 .../components/VectorTileFacilitiesMap.jsx    |   7 +-
 src/app/src/util/util.js                      |   3 +
 10 files changed, 221 insertions(+), 160 deletions(-)

diff --git a/src/app/src/App.jsx b/src/app/src/App.jsx
index 295ee47fa..f5df4fb4e 100644
--- a/src/app/src/App.jsx
+++ b/src/app/src/App.jsx
@@ -88,15 +88,17 @@ class App extends Component {
     }
 
     render() {
-        const { fetchingFeatureFlags } = this.props;
+        const { fetchingFeatureFlags, embed } = this.props;
 
+        const mainPanelStyle = embed ? { ...appStyles.mainPanelStyle, bottom: 0, top: 0 }
+            : appStyles.mainPanelStyle;
         return (
             <ErrorBoundary>
                 <Router history={history}>
                     <div className="App">
                         <Translate />
-                        <Navbar />
-                        <main style={appStyles.mainPanelStyle} className="mainPanel">
+                        <Navbar embed={embed} />
+                        <main style={mainPanelStyle} className="mainPanel">
                             <Switch>
                                 <Route
                                     exact
@@ -208,7 +210,7 @@ class App extends Component {
                                 <Route render={() => <RouteNotFound />} />
                             </Switch>
                         </main>
-                        <Footer />
+                        {embed ? null : <Footer />}
                         <ToastContainer
                             position="bottom-center"
                             transition={Slide}
@@ -231,9 +233,13 @@ function mapStateToProps({
     featureFlags: {
         fetching: fetchingFeatureFlags,
     },
+    embeddedMap: {
+        embed,
+    },
 }) {
     return {
         fetchingFeatureFlags,
+        embed: !!embed,
     };
 }
 
diff --git a/src/app/src/components/FacilitiesMap.jsx b/src/app/src/components/FacilitiesMap.jsx
index 6891d6186..c0ce8cc65 100644
--- a/src/app/src/components/FacilitiesMap.jsx
+++ b/src/app/src/components/FacilitiesMap.jsx
@@ -41,7 +41,10 @@ import {
     GOOGLE_CLIENT_SIDE_API_KEY,
 } from '../util/constants.facilitiesMap';
 
-import { makeFacilityDetailLink } from '../util/util';
+import {
+    makeFacilityDetailLink,
+    getLocationWithoutEmbedParam,
+} from '../util/util';
 
 const selectedMarkerURL = '/images/selectedmarker.png';
 const unselectedMarkerURL = '/images/marker.png';
@@ -261,7 +264,7 @@ function FacilitiesMap({
             />
             <Control position="topright">
                 <CopyToClipboard
-                    text={window.location.href}
+                    text={getLocationWithoutEmbedParam()}
                     onCopy={() => toast('Copied search to clipboard')}
                 >
                     <Button
diff --git a/src/app/src/components/FacilityDetailSidebar.jsx b/src/app/src/components/FacilityDetailSidebar.jsx
index 2b0e7b932..5fc7156fe 100644
--- a/src/app/src/components/FacilityDetailSidebar.jsx
+++ b/src/app/src/components/FacilityDetailSidebar.jsx
@@ -37,6 +37,7 @@ import {
     makeApprovedClaimDetailsLink,
     makeProfileRouteLink,
     removeDuplicatesFromOtherLocationsData,
+    getLocationWithoutEmbedParam,
 } from '../util/util';
 
 import {
@@ -126,6 +127,7 @@ class FacilityDetailSidebar extends Component {
             history: { push },
             facilityIsClaimedByCurrentUser,
             userHasPendingFacilityClaim,
+            embed,
         } = this.props;
 
         if (fetching) {
@@ -236,6 +238,62 @@ class FacilityDetailSidebar extends Component {
             return null;
         };
 
+        const claimedFacilitySection = (
+            <ShowOnly when={!facilityIsClaimedByCurrentUser}>
+                <>
+                    <FeatureFlag flag={CLAIM_A_FACILITY}>
+                        {data.properties.claim_info ? (
+                            <a
+                                className="link-underline small"
+                                href={makeDisputeClaimEmailLink(
+                                    data.properties.oar_id,
+                                )}
+                                style={
+                                    detailsSidebarStyles.linkStyle
+                                }
+                            >
+                                Dispute claim
+                            </a>
+                        ) : (
+                            <>
+                                <ShowOnly when={!userHasPendingFacilityClaim}>
+                                    <Link
+                                        className="link-underline small"
+                                        to={makeClaimFacilityLink(
+                                            data.properties.oar_id,
+                                        )}
+                                        href={makeClaimFacilityLink(
+                                            data.properties.oar_id,
+                                        )}
+                                        style={
+                                            detailsSidebarStyles.linkStyle
+                                        }
+                                    >
+                                        Claim this facility
+                                    </Link>
+                                </ShowOnly>
+                                <ShowOnly when={userHasPendingFacilityClaim}>
+                                    <p>
+                                        You have a pending claim on this
+                                        facility
+                                    </p>
+                                </ShowOnly>
+                            </>
+                        )}
+                    </FeatureFlag>
+                    <a
+                        className="link-underline small"
+                        href={makeReportADataIssueEmailLink(
+                            data.properties.oar_id,
+                        )}
+                        style={detailsSidebarStyles.linkStyle}
+                    >
+                            Suggest a data edit
+                    </a>
+                </>
+            </ShowOnly>
+        );
+
         return (
             <div className="control-panel facility-detail">
                 <div className="panel-header display-flex">
@@ -321,15 +379,18 @@ class FacilityDetailSidebar extends Component {
                         <FacilityDetailSidebarInfo
                             data={data.properties.other_names}
                             label="Also known as:"
+                            embed={embed}
                         />
                         <FacilityDetailSidebarInfo
                             data={data.properties.other_addresses}
                             label="Other addresses:"
+                            embed={embed}
                         />
                         <FacilityDetailSidebarInfo
                             data={data.properties.contributors}
                             label="Contributors:"
                             isContributorsList
+                            embed={embed}
                         />
                         <FeatureFlag flag={PPE}>
                             <FacilityDetailSidebarPPE properties={data.properties} />
@@ -348,74 +409,35 @@ class FacilityDetailSidebar extends Component {
                         </FeatureFlag>
                         <div className="control-panel__group">
                             <div style={detailsSidebarStyles.linkSectionStyle}>
-                                <ShowOnly when={!facilityIsClaimedByCurrentUser}>
-                                    <>
+                                <ShowOnly when={!embed}>
+                                    {claimedFacilitySection}
+                                    <ShowOnly when={facilityIsClaimedByCurrentUser}>
                                         <FeatureFlag flag={CLAIM_A_FACILITY}>
-                                            {data.properties.claim_info ? (
-                                                <a
-                                                    className="link-underline small"
-                                                    href={makeDisputeClaimEmailLink(
-                                                        data.properties.oar_id,
-                                                    )}
-                                                    style={
-                                                        detailsSidebarStyles.linkStyle
-                                                    }
-                                                >
-                                                    Dispute claim
-                                                </a>
-                                            ) : (
-                                                <>
-                                                    <ShowOnly when={!userHasPendingFacilityClaim}>
-                                                        <Link
-                                                            className="link-underline small"
-                                                            to={makeClaimFacilityLink(
-                                                                data.properties.oar_id,
-                                                            )}
-                                                            href={makeClaimFacilityLink(
-                                                                data.properties.oar_id,
-                                                            )}
-                                                            style={
-                                                                detailsSidebarStyles.linkStyle
-                                                            }
-                                                        >
-                                                            Claim this facility
-                                                        </Link>
-                                                    </ShowOnly>
-                                                    <ShowOnly when={userHasPendingFacilityClaim}>
-                                                        <p>
-                                                            You have a pending claim on this
-                                                            facility
-                                                        </p>
-                                                    </ShowOnly>
-                                                </>
-                                            )}
+                                            <Link
+                                                className="link-underline small"
+                                                to={makeApprovedClaimDetailsLink(facilityClaimID)}
+                                                href={makeApprovedClaimDetailsLink(facilityClaimID)}
+                                                style={detailsSidebarStyles.linkStyle}
+                                            >
+                                                Update facility details
+                                            </Link>
                                         </FeatureFlag>
-                                        <a
-                                            className="link-underline small"
-                                            href={makeReportADataIssueEmailLink(
-                                                data.properties.oar_id,
-                                            )}
-                                            style={detailsSidebarStyles.linkStyle}
-                                        >
-                                                Suggest a data edit
-                                        </a>
-                                    </>
-                                </ShowOnly>
-                                <ShowOnly when={facilityIsClaimedByCurrentUser}>
-                                    <FeatureFlag flag={CLAIM_A_FACILITY}>
-                                        <Link
-                                            className="link-underline small"
-                                            to={makeApprovedClaimDetailsLink(facilityClaimID)}
-                                            href={makeApprovedClaimDetailsLink(facilityClaimID)}
-                                            style={detailsSidebarStyles.linkStyle}
-                                        >
-                                            Update facility details
-                                        </Link>
+                                    </ShowOnly>
+                                    <FeatureFlag flag={REPORT_A_FACILITY}>
+                                        <ReportFacilityStatus data={data} />
                                     </FeatureFlag>
                                 </ShowOnly>
-                                <FeatureFlag flag={REPORT_A_FACILITY}>
-                                    <ReportFacilityStatus data={data} />
-                                </FeatureFlag>
+                                <ShowOnly when={embed}>
+                                    <a
+                                        className="link-underline small"
+                                        href={getLocationWithoutEmbedParam()}
+                                        style={detailsSidebarStyles.linkStyle}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                            View Facility on the Open Apparel Registry
+                                    </a>
+                                </ShowOnly>
                             </div>
                         </div>
                     </div>
@@ -456,6 +478,9 @@ function mapStateToProps({
     auth: {
         user,
     },
+    embeddedMap: {
+        embed,
+    },
 }, {
     match: {
         params: {
@@ -487,6 +512,7 @@ function mapStateToProps({
         facilityIsClaimedByCurrentUser,
         userHasPendingFacilityClaim,
         user,
+        embed: !!embed,
     };
 }
 
diff --git a/src/app/src/components/FacilityDetailSidebarInfo.jsx b/src/app/src/components/FacilityDetailSidebarInfo.jsx
index 65445d906..adbd9903d 100644
--- a/src/app/src/components/FacilityDetailSidebarInfo.jsx
+++ b/src/app/src/components/FacilityDetailSidebarInfo.jsx
@@ -26,6 +26,7 @@ const FacilityDetailSidebarInfo = memo(({
     data,
     label,
     isContributorsList,
+    embed,
 }) => {
     const makeContributorListItem =
         ({ id, name, is_verified: isVerified }) => (
@@ -39,7 +40,7 @@ const FacilityDetailSidebarInfo = memo(({
                     </span>
                 </ShowOnly>
                 {
-                    id ? (
+                    id && !embed ? (
                         <Link
                             to={makeProfileRouteLink(id)}
                             href={makeProfileRouteLink(id)}
diff --git a/src/app/src/components/FacilitySidebarSearchTabFacilitiesCount.jsx b/src/app/src/components/FacilitySidebarSearchTabFacilitiesCount.jsx
index b94224e32..e5f64286c 100644
--- a/src/app/src/components/FacilitySidebarSearchTabFacilitiesCount.jsx
+++ b/src/app/src/components/FacilitySidebarSearchTabFacilitiesCount.jsx
@@ -18,6 +18,8 @@ const FacilitySidebarSearchTabFacilitiesCount = ({
         <div style={{
             margin: 0,
             verticalAlign: 'center',
+            marginRight: '5px',
+            flex: 1,
         }}
         >
             <p style={{
diff --git a/src/app/src/components/FilterSidebar.jsx b/src/app/src/components/FilterSidebar.jsx
index bdcbae16e..9ce436fa7 100644
--- a/src/app/src/components/FilterSidebar.jsx
+++ b/src/app/src/components/FilterSidebar.jsx
@@ -88,13 +88,14 @@ class FilterSidebar extends Component {
             makeFacilitiesTabActive,
             vectorTileFeatureIsActive,
             fetchingFeatureFlags,
+            embed,
         } = this.props;
 
         if (fetchingFeatureFlags) {
             return <CircularProgress />;
         }
 
-        const header = (
+        const header = !embed ? (
             <div className="panel-header results-height-subtract">
                 <h3 className="panel-header__title">
                     Open Apparel Registry
@@ -102,12 +103,16 @@ class FilterSidebar extends Component {
                 <p className="panel-header__subheading">
                     The open map of global apparel facilities.
                 </p>
-            </div>);
+            </div>) : null;
 
-        const orderedTabsForSidebar = vectorTileFeatureIsActive
+        let orderedTabsForSidebar = vectorTileFeatureIsActive
             ? filterSidebarTabs.slice().reverse()
             : filterSidebarTabs;
 
+        if (embed) {
+            orderedTabsForSidebar = orderedTabsForSidebar.filter(({ tab }) => tab !== 'guide');
+        }
+
         const activeTabIndex = orderedTabsForSidebar
             .findIndex(({ tab }) => tab === activeFilterSidebarTab);
 
@@ -230,6 +235,9 @@ function mapStateToProps({
         flags,
         fetching: fetchingFeatureFlags,
     },
+    embeddedMap: {
+        embed,
+    },
 }) {
     return {
         activeFilterSidebarTab,
@@ -238,6 +246,7 @@ function mapStateToProps({
         countriesData,
         vectorTileFeatureIsActive: get(flags, 'vector_tile', false),
         fetchingFeatureFlags,
+        embed,
     };
 }
 
diff --git a/src/app/src/components/FilterSidebarSearchTab.jsx b/src/app/src/components/FilterSidebarSearchTab.jsx
index 9f626cb4f..365b0602a 100644
--- a/src/app/src/components/FilterSidebarSearchTab.jsx
+++ b/src/app/src/components/FilterSidebarSearchTab.jsx
@@ -274,84 +274,86 @@ function FilterSidebarSearchTab({
                         </Popover>
                     </div>
                 </FeatureFlag>
-                <div className="form__field">
-                    <InputLabel
-                        shrink={false}
-                        htmlFor={CONTRIBUTORS}
-                        style={filterSidebarSearchTabStyles.inputLabelStyle}
-                    >
-                        Filter by Contributor
-                    </InputLabel>
-                    <ReactSelect
-                        isMulti
-                        id={CONTRIBUTORS}
-                        name={CONTRIBUTORS}
-                        className="basic-multi-select notranslate"
-                        classNamePrefix="select"
-                        options={contributorOptions}
-                        value={contributors}
-                        onChange={updateContributor}
-                        disabled={fetchingOptions || fetchingFacilities}
-                    />
-                    <ShowOnly when={contributors && contributors.length > 1}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={!!combineContributors}
-                                    onChange={updateCombineContributors}
-                                    color="primary"
-                                    value={combineContributors}
-                                />
-                            }
-                            label="Show only shared facilities"
-                        />
-                        <IconButton onClick={
-                            // eslint-disable-next-line no-confusing-arrow
-                            e => contributorPopoverAnchorEl
-                                ? null
-                                :
-                                setContributorPopoverAnchorEl(e.currentTarget)}
+                <ShowOnly when={!embed}>
+                    <div className="form__field">
+                        <InputLabel
+                            shrink={false}
+                            htmlFor={CONTRIBUTORS}
+                            style={filterSidebarSearchTabStyles.inputLabelStyle}
                         >
-                            <InfoIcon />
-                        </IconButton>
-                        <Popover
-                            id="contributor-info-popover"
-                            anchorOrigin={{
-                                vertical: 'center',
-                                horizontal: 'right',
-                            }}
-                            transformOrigin={{
-                                vertical: 'center',
-                                horizontal: 'left',
-                            }}
-                            open={!!contributorPopoverAnchorEl}
-                            anchorEl={contributorPopoverAnchorEl}
-                            onClick={() => setContributorPopoverAnchorEl(null)}
+                            Filter by Contributor
+                        </InputLabel>
+                        <ReactSelect
+                            isMulti
+                            id={CONTRIBUTORS}
+                            name={CONTRIBUTORS}
+                            className="basic-multi-select notranslate"
+                            classNamePrefix="select"
+                            options={contributorOptions}
+                            value={contributors}
+                            onChange={updateContributor}
+                            disabled={fetchingOptions || fetchingFacilities}
+                        />
+                        <ShowOnly when={contributors && contributors.length > 1}>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        checked={!!combineContributors}
+                                        onChange={updateCombineContributors}
+                                        color="primary"
+                                        value={combineContributors}
+                                    />
+                                }
+                                label="Show only shared facilities"
+                            />
+                            <IconButton onClick={
+                                // eslint-disable-next-line no-confusing-arrow
+                                e => contributorPopoverAnchorEl
+                                    ? null
+                                    :
+                                    setContributorPopoverAnchorEl(e.currentTarget)}
+                            >
+                                <InfoIcon />
+                            </IconButton>
+                            <Popover
+                                id="contributor-info-popover"
+                                anchorOrigin={{
+                                    vertical: 'center',
+                                    horizontal: 'right',
+                                }}
+                                transformOrigin={{
+                                    vertical: 'center',
+                                    horizontal: 'left',
+                                }}
+                                open={!!contributorPopoverAnchorEl}
+                                anchorEl={contributorPopoverAnchorEl}
+                                onClick={() => setContributorPopoverAnchorEl(null)}
+                            >
+                                {contributorInfoPopoverContent}
+                            </Popover>
+                        </ShowOnly>
+                    </div>
+                    <div className="form__field">
+                        <InputLabel
+                            shrink={false}
+                            htmlFor={CONTRIBUTOR_TYPES}
+                            style={filterSidebarSearchTabStyles.inputLabelStyle}
                         >
-                            {contributorInfoPopoverContent}
-                        </Popover>
-                    </ShowOnly>
-                </div>
-                <div className="form__field">
-                    <InputLabel
-                        shrink={false}
-                        htmlFor={CONTRIBUTOR_TYPES}
-                        style={filterSidebarSearchTabStyles.inputLabelStyle}
-                    >
-                        Filter by Contributor Type
-                    </InputLabel>
-                    <ReactSelect
-                        isMulti
-                        id={CONTRIBUTOR_TYPES}
-                        name="contributorTypes"
-                        className="basic-multi-select notranslate"
-                        classNamePrefix="select"
-                        options={contributorTypeOptions}
-                        value={contributorTypes}
-                        onChange={updateContributorType}
-                        disabled={fetchingOptions || fetchingFacilities}
-                    />
-                </div>
+                            Filter by Contributor Type
+                        </InputLabel>
+                        <ReactSelect
+                            isMulti
+                            id={CONTRIBUTOR_TYPES}
+                            name="contributorTypes"
+                            className="basic-multi-select notranslate"
+                            classNamePrefix="select"
+                            options={contributorTypeOptions}
+                            value={contributorTypes}
+                            onChange={updateContributorType}
+                            disabled={fetchingOptions || fetchingFacilities}
+                        />
+                    </div>
+                </ShowOnly>
                 <div className="form__field">
                     <InputLabel
                         shrink={false}
@@ -383,13 +385,15 @@ function FilterSidebarSearchTab({
                     {boundaryButton}
                 </div>
                 <div className="form__action">
-                    <a
-                        className="control-link"
-                        href="mailto:info@openapparel.org?subject=Reporting an issue"
-                    >
-                        Report an issue
-                    </a>
-                    <div className="offset offset-right">
+                    {!embed ? (
+                        <a
+                            className="control-link"
+                            href="mailto:info@openapparel.org?subject=Reporting an issue"
+                        >
+                            Report an issue
+                        </a>
+                    ) : null}
+                    <div className="offset offset-right" style={{ flex: 1 }}>
                         <Button
                             size="small"
                             variant="outlined"
diff --git a/src/app/src/components/Navbar.jsx b/src/app/src/components/Navbar.jsx
index d86aef764..f1533bfa2 100644
--- a/src/app/src/components/Navbar.jsx
+++ b/src/app/src/components/Navbar.jsx
@@ -19,10 +19,14 @@ const apiDocumentationURL = process.env.NODE_ENV === 'development'
     ? 'http://localhost:8081/api/docs/'
     : '/api/docs/';
 
-export default function Navbar() {
+export default function Navbar({ embed }) {
     const [drawerHandler, setDrawerHandler] = useState(false);
     const mobileMenuToggleRef = useRef();
 
+    if (embed) {
+        return <div id="google_translate_element" />;
+    }
+
     const aboutLinks = [
         {
             text: 'Team',
diff --git a/src/app/src/components/VectorTileFacilitiesMap.jsx b/src/app/src/components/VectorTileFacilitiesMap.jsx
index b65b1664d..88b9af476 100644
--- a/src/app/src/components/VectorTileFacilitiesMap.jsx
+++ b/src/app/src/components/VectorTileFacilitiesMap.jsx
@@ -19,7 +19,10 @@ import PolygonalSearchControl from './PolygonalSearchControl';
 
 import { COUNTRY_CODES } from '../util/constants';
 
-import { makeFacilityDetailLink } from '../util/util';
+import {
+    makeFacilityDetailLink,
+    getLocationWithoutEmbedParam,
+} from '../util/util';
 
 import { facilityDetailsPropType } from '../util/propTypes';
 
@@ -137,7 +140,7 @@ function VectorTileFacilitiesMap({
             </Control>
             <Control position="topright">
                 <CopyToClipboard
-                    text={window.location.href}
+                    text={getLocationWithoutEmbedParam()}
                     onCopy={() => toast('Copied search to clipboard')}
                 >
                     <Button
diff --git a/src/app/src/util/util.js b/src/app/src/util/util.js
index 0a31b5724..6765e550f 100644
--- a/src/app/src/util/util.js
+++ b/src/app/src/util/util.js
@@ -687,3 +687,6 @@ export const removeDuplicatesFromOtherLocationsData = otherLocationsData => uniq
         return false;
     },
 );
+
+export const getLocationWithoutEmbedParam = () =>
+    window.location.href.replace('&embed=1', '').replace('embed=1', '');

From ef50d9bd51e276a97276c1be49cf966ed6709780 Mon Sep 17 00:00:00 2001
From: Tai Wilkin <twilkin@azavea.com>
Date: Tue, 23 Feb 2021 15:45:39 -0500
Subject: [PATCH 2/3] Fix proptypes error

---
 .../src/components/FacilityDetailSidebar.jsx  | 20 ++++++++++---------
 .../components/FilterSidebarFacilitiesTab.jsx |  8 ++++----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/app/src/components/FacilityDetailSidebar.jsx b/src/app/src/components/FacilityDetailSidebar.jsx
index 5fc7156fe..28090a429 100644
--- a/src/app/src/components/FacilityDetailSidebar.jsx
+++ b/src/app/src/components/FacilityDetailSidebar.jsx
@@ -223,16 +223,20 @@ class FacilityDetailSidebar extends Component {
             if (!report) return null;
             if (report.status === 'PENDING') {
                 return (
-                    <div style={detailsSidebarStyles.pendingRibbon}>
-                        Reported as {report.closure_state.toLowerCase()} (status pending).
-                    </div>
+                    <FeatureFlag flag={REPORT_A_FACILITY}>
+                        <div style={detailsSidebarStyles.pendingRibbon}>
+                            Reported as {report.closure_state.toLowerCase()} (status pending).
+                        </div>
+                    </FeatureFlag>
                 );
             }
             if (data.properties.is_closed) {
                 return (
-                    <div style={detailsSidebarStyles.closureRibbon}>
-                        This facility is closed.
-                    </div>
+                    <FeatureFlag flag={REPORT_A_FACILITY}>
+                        <div style={detailsSidebarStyles.closureRibbon}>
+                            This facility is closed.
+                        </div>
+                    </FeatureFlag>
                 );
             }
             return null;
@@ -357,9 +361,7 @@ class FacilityDetailSidebar extends Component {
                     </FeatureFlag>
                 </div>
                 <div className="facility-detail_data">
-                    <FeatureFlag flag={REPORT_A_FACILITY}>
-                        {renderStatusRibbon()}
-                    </FeatureFlag>
+                    {renderStatusRibbon()}
                     <FacilityDetailsStaticMap data={data} />
                     <div className="control-panel__content">
                         <div className="control-panel__group">
diff --git a/src/app/src/components/FilterSidebarFacilitiesTab.jsx b/src/app/src/components/FilterSidebarFacilitiesTab.jsx
index 63f6c1bf4..6cfa5fe02 100644
--- a/src/app/src/components/FilterSidebarFacilitiesTab.jsx
+++ b/src/app/src/components/FilterSidebarFacilitiesTab.jsx
@@ -316,13 +316,13 @@ function FilterSidebarFacilitiesTab({
                                                     secondary={address}
                                                 />
                                             </Link>
-                                            <FeatureFlag flag={REPORT_A_FACILITY}>
-                                                {isClosed && (
+                                            {isClosed ? (
+                                                <FeatureFlag flag={REPORT_A_FACILITY}>
                                                     <div style={facilitiesTabStyles.closureRibbon}>
                                                         Closed facility
                                                     </div>
-                                                )}
-                                            </FeatureFlag>
+                                                </FeatureFlag>
+                                            ) : null}
                                         </ListItem>
                                     </Fragment>))
                         }

From e62483e58d9492d0b935b2879cd6cd234c0cab29 Mon Sep 17 00:00:00 2001
From: Tai Wilkin <twilkin@azavea.com>
Date: Tue, 2 Mar 2021 12:45:12 -0500
Subject: [PATCH 3/3] Update Changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4d60252f..bce1176f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Add Closure to CSV Download [#1249](https://github.com/open-apparel-registry/open-apparel-registry/pull/1249)
 - Manage Embed Parameter [#1257](https://github.com/open-apparel-registry/open-apparel-registry/pull/1257)
 - Send Notification of Facility Report Response [#1250](https://github.com/open-apparel-registry/open-apparel-registry/pull/1250)
+- Render Appropriately in Embed Mode [#1260](https://github.com/open-apparel-registry/open-apparel-registry/pull/1260)
 
 ### Changed