Feature als 1591 web responsive (#54)

* fix for ALS-1514

* fix for ALS-1466

* feature ALS-1454 - Updated UI for styles not found

* Fox for search UI issues

- fixed border bottom rounded issue while searching and when not found card appears
- fixed search shaking and height when search has no result or loading

* Feature ALS-1450

* added check to reconnect websocket when disconnects
* fixed tooltip position
* changed UI for web socket connection
* improved web socket connection logic for tracker box
* replaced colors & UI according to design

* feature_ALS-1517-mapstyles-error-message

fixed clear filters button styling

* feature_ALS-1450_websocket-connection

* [ALS-1525] fixed stack region selection issue when GrabMaps selected

* fixed the banner issue when user connected back once it is closed (#21)

* fixed dynamic text issue on auto when toggling units

* unauth simulation, analytics, localization, translation script and update default CF template

* add footer in TriggeredByEnum and fix tests (#39)

* localization fixes for terms page, auth geofence box

* add pageViewDuration in LEAVE_PAGE event (#40)

* Improve leave page event attr (#44)

* fix pageViewDuration

* add pageViewIdentifier to track actions per page view

* placeholder for the loading state during the search operation. (#45)

* merged lib approach

* translated chinese in language dropdown

* improve pageViewIdentifier storage (#46)

* fixed text responsive issues with button (#42)

* updated README

* Dynamically Localize Number Formats for International User Support (#47)

* fixed text & added new script to update translation (#48)

* updated regex to support geofence name in multiple languages

* Updated CF templates (#49)

* Remove useRecordViewPage from DemoPlaceholderPage and amend page identifier key (#50)

* Update main-cf-template.yaml

* Update main-cf-template.yaml

* fixes callback to show auth tracker box

* removed log

* Improve analytics (#51)

* log session_end event and improve page identifiers storage

* remove pageViewDuration

* amend pageViewIdentifier

* Add Open Data Maps to demo app (#52)

* Addeede open data provider

* completed adding open data provider

* fixed attribute color issue with visualization dark mode

* fixed build issues and updated name for translation script

* Feat/change country approach (#53)

* change the country fetching approach, also remove initiateAnalytics

* add COUNTRY_EVALUATION_URL env variable

* fix env variables

* return undefined if the country code is Unknown getCountryCode

* revert stopsession debouce time and remove logs

* set default COUNTRY_EVALUATION_URL

* unauth simulation fixes - removed geofence border, fixed animation, updated icons

* Add the ability to dynamic evaluate and assign fastest region (#54)

* change env variable for multiple identity pool ids (#56)

* change env variable for multiple identity pool ids

* fix useEffect error in useRecordViewPage

* Fixed unauth simulation ui issues (#55)

* fixed unauth simulation ui issues

* removed unused import

* fixed unauth tracking history left icon alignment

* fixed notification icon size

* Allowed duplicates geeofence notifications for unauth

* fixed button hover for primary button

* updated env and websocket urls approach

* removed log

* updated env

* library format changed from es to cjs (#57)

* Revert "library format changed from es to cjs (#57)" (#58)

This reverts commit c4f2fa2.

* updated language icon ins settings modal

* added option in settings modal to select region

* updated translations

* add geofence notification case in cypress tests (#60)

* fixed dot issue in arabic and hebrew, fixed the RTL issue with short distance unit (#61)

* fixed dot issue in arabic and hebrew, fixed the rtl issue with short unit

* fixed short units translation

* fixed paused simulation issue when active the other routes & fixed spelling for trackers

* improved the short distance unit ui

* region and opendata ui fix

* fixes for unauth simulation

* Added kinesis resources & updated pinpoint event stream (#62)

Co-authored-by: Harshit Wadhawan <[email protected]>

* updated readme

* updated readme

* fixed translation issues (#63)

* introduced react-spring-bottom-sheet

* add unit test for Pinpoint Analytics (#64)

* add security.txt (#65)

* switched to npm and locked dep versions

* added CSP to meta tag

* implemented the Explore UI for mobile and tablet

* added manifest-src to CSP meta tag

* added manifest-src data to CSP meta tag

* Update default-unauth-resources-template.yaml

* updated readme

* added fix for unauth creds expiry issue

* Update default-unauth-resources-template.yaml

* updated CSP

* Improve enahnce analytics test (#68)

* mock countryUtil.getCountryCode

* add more failure test cases in PinpointAnalytics test

* remove recording of search value in location search

* removed CSP meta tag

* updated default CF template

* potential fix for multi notifications for unauth and auth simulations, reset map to default when region switched

* udpated translations

* completed map style responsive UI

* updated E2E tests

* added cory's feedback

* updated e2e tests

* fixed failing  E2E tests

* updated CSP

* on going search box

* fixed POI Card

* fixed issues with direction

* updated attribution setting logic

* added hash to script-src

* on going routes ui

* [ALS-1636] geofence tooltip position update

* search issue, udpated short unit notation

* updated websocket URL logic

* updated default CF template

* [ALS-1643] render geofences on list view

* ongoing routes

* ongoing responsiveness task for tracker & geofence

* tracker & geofence

* built UI for tracker & geofence for tablet and mobile

* fixed search issue

* applied edit icon along with mobile icon for simulation

* fixed close icon for geofence

* fixed & complete settings & about UI for tablet and mobile

* built routes/direction

* improved experience

* removed extra // onBlur={() => isBothInputFilled && onFocus(InputType.FROM, true)}

* removed unsued import

* fixed arrow up down issue with routes

* Merge branch 'main' into feature_ALS-1591_web-responsive_main

* fixed logo position

* cleanup

* hid the mapbutton, tracker and geofence on the map according to responsiveness need

* cleanup

* fixed closing of unath simulation

* fixed type issues for build

* [ALS-1591] updated state issue

* fixed few issues with responsiveness

* removed console.log

* removed extra css

* fixed scroll issue with search

* map focus on routing fix

* blank white space fix

* changed mobile breakpoint to 430px

* fixed map provider search param issue and current location issue

* fixed sticky search bar and blank space issue

* fixed poi card styling

* fixed welcome modal, about modal

* fixed scrolling issue

* fixed close button issue with auth tracker

* fixes for unauth simulation UI

* changed explore min height

* fixed ui issues with scrolling and padding

* fixed few things

* fixed route UI for mobile and tablet

* fixed map styles UI issues along with closing issue on ios and updated a text

* uncommented connect to aws click handler

* fixed button active state on tablet and mobile

* fixed button active state on tablet and mobile

* fixed pull refresh issue

* fixed pull refresh issue

* fixed welcome modal UI, dropdown and connect AWS modal

* removed extra css

* fixed welcome modal UI and About modal UI

* fixed auth simulation zoom and focus issues, added links to logo

* fixed routes steps

* fixed map styles opening

* implemented arrow icons on bottom sheet header

* fixed routes step

* fixed vancouver bounds for tablet and mobile

* fixed few issues

* implemented scrollbar hidding and fixed attribute button styling

* removed body overflow hidden

* enabled route history for all devices

* fixed logo issue

* [ALS-1671] fixed space issue for numbers in french

* removed log

* updated failing tests

* updated github workflow

* updated failing tests

* mocked reload

* refined secrets

* refined secrets

* updated e2e test

* updated workflow files

* reverted workflow file changes

* updated attributions and data provider search param

* loggin env for all workflows

* logging env for all workflows

* removed log

* logging env in workflow

* reverted logging env in workflow

* updated security-tests .env.example

* responsive fixes

* fixed few issues

* fix height of auth tracker/geofence

* cleanup

* added close icon in bottom sheet header & fixed ui

* fixed build failure

* fixed closing issue on routes and poi card

* cleanup

* fixed minor issues

* fixed placeholder glitch for mobile

* cleanup

* fixed minor issues raised in regression

* fixed setting modal initial option issue

* fixed replaceAll issue

* fixed replaceAll issue

* resolved build errors

* updated toast implementation to be overlapping

* fixed socket banner padding issue

* fixed exit simulation modal, bottom sheet expanding issue with search, routes and map styles

* removed comment

* fixed scroll issue in bottom sheet, glitch issue with bottom sheet

* fixes failing tests and updated map styles responsive logic

* fixes failing tests and updated map styles responsive logic

* unauth simulation exit modal fix

* fixed map styles issues on tablet during unauth simulation, added and updated notifications for enter and exit events during unauth simulaiton

* removed geofence and tracker shortcuts when unauth simulation enabled

* implemented 40 percent height on bottom sheet

* fixed search placeholder

* fixed geofence and tracker shortcut functionality

* fixed opening issue with routes and explore ui

* updated fitbounds for route on mobile screen

* fixed my location selection issue

* minor fix

* fixed poi card issue

* removed background

* resolved unauth simulation issue

* fitbounds functionality update, and updated unit tests

* removed log

* poi card issue

* fixed height issue on ipad

* mapstyles search fix

* fixed routes and search issues with height

* fixed routes and search issues with height

* unauth exit modal for mobile and tablet fix

* updated simulation speed

---------

Co-authored-by: Ahmad Azizi <[email protected]>
Co-authored-by: Dabeer Raza <[email protected]>
Co-authored-by: NihaalAftab-Makeen <[email protected]>
Co-authored-by: harshit-makeen <[email protected]>
Co-authored-by: Harshit Wadhawan <[email protected]>
Co-authored-by: wadhawh <[email protected]>

extra/cloudformation/default-unauth-resources-template.yaml

@@ -31,6 +31,7 @@ Resources:
           - Action:
               - "mobiletargeting:PutEvents"
               - "mobiletargeting:UpdateEndpoint"
+              - "mobiletargeting:GetEndpoint"
             Effect: Allow
             Resource:
               - !Sub "arn:aws:mobiletargeting:${AWS::Region}:${AWS::AccountId}:apps/${AmazonLocationDemoPinpointApp}/*"

extra/translation-script-content/update-en.json

@@ -1 +1,5 @@
-{}
+{
+	"map_buttons__clear_selections": {
+		"text": "Clear selection"
+	}
+}

package.json

@@ -41,6 +41,7 @@
 		"@aws-amplify/ui-react": "3.6.1",
 		"@aws-sdk/credential-providers": "3.370.0",
 		"@turf/turf": "6.5.0",
+		"@types/react-window": "^1.8.5",
 		"aws-amplify": "4.3.43",
 		"aws-sdk": "2.1248.0",
 		"date-fns": "2.29.3",
@@ -54,8 +55,11 @@
 		"react-dom": "18.2.0",
 		"react-i18next": "13.0.1",
 		"react-router-dom": "6.4.3",
+		"react-spring-bottom-sheet": "3.5.0-alpha.0",
 		"react-toastify": "9.1.1",
 		"react-tooltip": "5.10.0",
+		"react-virtualized-auto-sizer": "^1.0.20",
+		"react-window": "1.8.9",
 		"zustand": "4.3.9"
 	},
 	"devDependencies": {
@@ -129,7 +133,9 @@
 			"!**/src/atomicui/pages/DemoPlaceholderPage/**",
 			"!**/src/atomicui/organisms/AuthTrackerBox/AuthTrackerSimulation.tsx",
 			"!**/src/atomicui/organisms/UnauthSimulation/UnauthGeofencesSimulation.tsx",
-			"!**/src/atomicui/organisms/UnauthSimulation/UnauthRouteSimulation.tsx"
+			"!**/src/atomicui/organisms/UnauthSimulation/UnauthRouteSimulation.tsx",
+			"!**/src/atomicui/organisms/Explore/**",
+			"!**/src/atomicui/organisms/ResponsiveBottomSheet/**"
 		]
 	}
 }

src/App.tsx

@@ -4,7 +4,7 @@
 import { StrictMode, Suspense } from "react";
 
 import { Loader } from "@aws-amplify/ui-react";
-import { AppWrapper, RouteChunks, ToastContainer, UnauthSimulationToastContainer } from "@demo/core";
+import { AppWrapper, RouteChunks, ToastContainer } from "@demo/core";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
 const App = () => {
@@ -26,7 +26,6 @@ const App = () => {
 			>
 				<AppWrapper>
 					<ToastContainer />
-					<UnauthSimulationToastContainer />
 					<RouterProvider fallbackElement={<>OOPS!</>} router={router} />
 				</AppWrapper>
 			</Suspense>

src/assets/icons/index.ts

@@ -97,3 +97,8 @@ export { ReactComponent as IconSegmentDisabled } from "./icon-segment-disabled.s
 export { ReactComponent as IconBusActive } from "./icon-bus-active.svg";
 export { ReactComponent as IconBusInactive } from "./icon-bus-inactive.svg";
 export { ReactComponent as IconLanguage } from "./icon-language.svg";
+export { ReactComponent as IconEdit } from "./icon-edit.svg";
+export { ReactComponent as IconMoreVertical } from "./icon-more-vertical.svg";
+export { ReactComponent as IconMoveUp } from "./icon-move-up.svg";
+export { ReactComponent as IconMoveDown } from "./icon-move-down.svg";
+export { ReactComponent as IconMoveStill } from "./icon-move-still.svg";

src/atomicui/atoms/DropdownEl/styles.scss

@@ -17,6 +17,10 @@
 		background-color: transparent;
 		padding: 0.62rem 1rem;
 
+		@media only screen and (max-width: 1023px) {
+			max-width: unset;
+		}
+
 		&.dropdown-radioBox {
 			min-width: 100%;
 			justify-content: flex-end;
@@ -29,6 +33,7 @@
 			border-radius: 7px;
 			height: 40px;
 			justify-content: space-between;
+
 			.dropdown-label {
 				color: var(--grey-color);
 				font-family: "AmazonEmber-Regular";
@@ -44,6 +49,7 @@
 		&.bordered.dropdown-false {
 			background-color: var(--grey-color-4);
 			border: 1px solid var(--grey-color-3);
+
 			p {
 				color: var(--tertiary-color);
 			}
@@ -58,10 +64,6 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
-
-		@media only screen and (max-width: 562px) {
-			max-width: 10.15rem;
-		}
 	}
 
 	.options {
@@ -80,6 +82,11 @@
 		padding: 0;
 		z-index: 1;
 
+		@media only screen and (max-width: 562px) {
+			width: 12rem;
+			left: -10%;
+		}
+
 		.radio-li {
 			.amplify-text.amplify-radio__label {
 				margin-left: 1rem;
@@ -104,15 +111,19 @@
 			box-shadow: none;
 			border: 1px solid var(--grey-color-5);
 			margin-top: -1px;
+
 			li {
 				padding: 0;
+
 				.option-checkbox {
 					width: 100%;
+
 					.amplify-flex.amplify-checkbox {
 						padding: 8px 16px;
 						width: 100%;
 						justify-content: left;
 					}
+
 					.amplify-text.amplify-checkbox__label {
 						font-size: 14px;
 						font-weight: 500;
@@ -122,13 +133,16 @@
 
 				.amplify-flex.amplify-radiogroup {
 					width: 100%;
+
 					.amplify-flex.amplify-radio {
 						width: 100%;
 						padding: 1rem;
 					}
+
 					.amplify-flex.amplify-radio.radio-option-end {
 						justify-content: flex-end;
 					}
+
 					.amplify-flex.amplify-radio.radio-option {
 						justify-content: flex-start;
 					}
@@ -148,15 +162,19 @@
 			max-height: 40rem;
 			box-shadow: none;
 			border: 1px solid var(--grey-color-5);
+
 			li {
 				padding: 0;
+
 				.option-checkbox {
 					width: 100%;
+
 					.amplify-flex.amplify-checkbox {
 						padding: 1rem 16px;
 						width: 100%;
 						justify-content: left;
 					}
+
 					.amplify-text.amplify-checkbox__label {
 						font-size: 14px;
 						font-weight: 500;
@@ -168,10 +186,12 @@
 						background: var(--light-color-2);
 						border: 1px solid var(--grey-color-2);
 					}
+
 					span {
 						display: flex;
 						justify-content: center;
 						align-items: center;
+
 						svg {
 							stroke-width: 4px;
 							stroke-linejoin: bevel;
@@ -181,9 +201,11 @@
 						}
 					}
 				}
+
 				.amplify-checkbox__button--focused::before {
 					border-color: var(--grey-color);
 				}
+
 				&:hover {
 					background-color: var(--primary-alpha-light-color);
 				}
@@ -197,10 +219,8 @@
 
 			&:hover {
 				background-color: var(--primary-alpha-light-color);
-			}
 
-			@media only screen and (min-width: 1024px) {
-				&:hover {
+				@media only screen and (min-width: 1023px) {
 					background-color: rgba(0, 130, 150, 0.08);
 				}
 			}
@@ -209,10 +229,5 @@
 		.selected {
 			background-color: rgba(0, 130, 150, 0.08);
 		}
-
-		@media only screen and (max-width: 562px) {
-			width: 12rem;
-			left: -10%;
-		}
 	}
 }

src/atomicui/atoms/ExploreButton/ExploreButton.test.tsx

@@ -0,0 +1,31 @@
+import i18n from "@demo/locales/i18n";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import { I18nextProvider } from "react-i18next";
+
+import ExploreButton from "./ExploreButton";
+
+const mockProps = {
+	text: "text",
+	icon: <div />,
+	onClick: jest.fn()
+};
+
+describe("<ExploreButton />", () => {
+	const renderComponent = () =>
+		render(
+			<I18nextProvider i18n={i18n}>
+				<ExploreButton {...mockProps} />
+			</I18nextProvider>
+		);
+
+	it("should render and fire onClick when clicked", () => {
+		const { getByTestId } = renderComponent();
+		expect(getByTestId("explore-button-container")).toBeInTheDocument();
+		act(() => {
+			fireEvent.click(getByTestId("explore-button-container"));
+		});
+		waitFor(() => {
+			expect(mockProps.onClick).toHaveBeenCalled();
+		});
+	});
+});

src/atomicui/atoms/ExploreButton/ExploreButton.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Flex, Text } from "@aws-amplify/ui-react";
+
+import "./styles.scss";
+import { useTranslation } from "react-i18next";
+
+interface IProps {
+	text: string;
+	icon: JSX.Element;
+	onClick: () => void;
+}
+
+const ExploreButton: React.FC<IProps> = ({ text, icon, onClick }) => {
+	const { i18n } = useTranslation();
+	const currentLanguage = i18n.language;
+
+	return (
+		<Flex
+			data-testid="explore-button-container"
+			direction="column"
+			className={`explore-button-container ${["en"].includes(currentLanguage) ? "no-min-width-button" : ""}`}
+			gap="0"
+			onClick={onClick}
+		>
+			<Flex className="button-icon">{icon}</Flex>
+			<Text className="button-text">{text}</Text>
+		</Flex>
+	);
+};
+
+export default ExploreButton;

src/atomicui/atoms/ExploreButton/index.tsx

@@ -0,0 +1 @@
+export { default as ExploreButton } from "./ExploreButton";