Draft resource map iframe

plugin-hrm-form/src/HrmFormPlugin.tsx

@@ -36,6 +36,7 @@ import { setUpReferrableResources } from './components/resources/setUpReferrable
 import QueuesView from './components/queuesView';
 import TeamsView from './components/teamsView';
 import { setUpCounselorToolkits } from './components/toolkits/setUpCounselorToolkits';
+import { setUpResourceMap } from './components/resourceMap/setUpResourceMap';
 import { setUpTransferComponents } from './components/transfer/setUpTransferComponents';
 import { subscribeNewMessageAlertOnPluginInit } from './notifications/newMessage';
 import { subscribeReservedTaskAlert } from './notifications/reservedTask';
@@ -114,6 +115,7 @@ const setUpComponents = (featureFlags: FeatureFlags, setupObject: ReturnType<typ
   Components.setUpStandaloneSearch();
   setUpReferrableResources();
   setUpCounselorToolkits();
+  setUpResourceMap();
 
   if (featureFlags.enable_emoji_picker) Components.setupEmojiPicker();
   if (featureFlags.enable_canned_responses) Components.setupCannedResponses();

plugin-hrm-form/src/components/resourceMap/ResourceMap.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+import React from 'react';
+
+const ResourceMap: React.FC = () => {
+  return (
+    <div>
+      <h1>Here's the map!</h1>
+      <iframe src="https://fortress.maptive.com/ver4/f79ce850c44152c9c550ae021c525519" frameBorder="0" width="700" height="500" allow="geolocation"></iframe>	
+    </div>
+  );
+};
+
+ResourceMap.displayName = 'ResourceMap';
+
+export default ResourceMap;

plugin-hrm-form/src/components/resourceMap/ResourceMapSideLink.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+/* eslint-disable react/prop-types */
+import { LinkIcon } from '@twilio-paste/icons/cjs/LinkIcon';
+import React from 'react';
+import { Template, SideLink, SideNavChildrenProps } from '@twilio/flex-ui';
+
+type Props = SideNavChildrenProps & { showLabel: boolean; onClick: () => void };
+
+const ResourceMapSideLink: React.FC<Props> = ({ showLabel, activeView, onClick }) => {
+  return (
+    <SideLink
+      showLabel={showLabel}
+      icon={<LinkIcon decorative={false} title="Resource Map" />}
+      iconActive={<LinkIcon decorative={false} title="Resource Map" />}
+      isActive={activeView === 'resource-map'}
+      onClick={onClick}
+      data-testid="resource-map-side-link"
+    >
+      <Template code="ResourceMap-SideNav" />
+    </SideLink>
+  );
+};
+
+ResourceMapSideLink.displayName = 'ResourceMapSideLink';
+
+export default ResourceMapSideLink;

plugin-hrm-form/src/components/resourceMap/setUpResourceMap.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (C) 2021-2023 Technology Matters
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+import * as Flex from '@twilio/flex-ui';
+import React from 'react';
+
+import ResourceMapSideLink from './ResourceMapSideLink';
+import ResourceMap from './ResourceMap';
+
+export const setUpResourceMap = () => {
+  Flex.ViewCollection.Content.add(
+    <Flex.View name="resource-map" key="resource-map-view">
+      <ResourceMap />
+    </Flex.View>,
+  );
+
+  Flex.SideNav.Content.add(
+    <ResourceMapSideLink
+      key="ResourceMapSideLink"
+      onClick={() => Flex.Actions.invokeAction('NavigateToView', { viewName: 'resource-map' })}
+      reserveSpace={false}
+      showLabel={true}
+    />,
+  );
+};