From 7662e090ecb374f47a224d053984153fd60fff2c Mon Sep 17 00:00:00 2001
From: The-Daniel <bibshall@gmail.com>
Date: Fri, 19 Jan 2024 16:26:27 +0000
Subject: [PATCH] ISSUE #4639 - use v5 datepicker to fix big where date reverts
 to old value on cancel

---
 .../dateField/dateField.component.tsx         | 13 ++++----
 .../components/dateField/dateField.styles.ts  | 32 -------------------
 .../calendarActionBar.component.tsx           |  2 +-
 .../sharedStyles/sequencesTab.overrides.ts    |  7 ++--
 4 files changed, 13 insertions(+), 41 deletions(-)
 delete mode 100644 frontend/src/v4/routes/components/dateField/dateField.styles.ts

diff --git a/frontend/src/v4/routes/components/dateField/dateField.component.tsx b/frontend/src/v4/routes/components/dateField/dateField.component.tsx
index 186f23f70c9..909e775ba31 100644
--- a/frontend/src/v4/routes/components/dateField/dateField.component.tsx
+++ b/frontend/src/v4/routes/components/dateField/dateField.component.tsx
@@ -14,12 +14,11 @@
  *  You should have received a copy of the GNU Affero General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { ComponentType, useEffect } from 'react';
-import { DatePickerProps } from '@mui/lab/DatePicker';
-import { DateTimePickerProps } from '@mui/lab/DateTimePicker';
+import { useEffect } from 'react';
 import { TextField } from '@mui/material';
 import { useState } from 'react';
-import { StyledDatePicker, StyledDateTimePicker } from './dateField.styles';
+import { DateTimePicker } from '@controls/inputs/datePicker/dateTimePicker.component';
+import { DatePicker } from '@controls/inputs/datePicker/datePicker.component';
 
 interface IProps {
 	value?: any;
@@ -48,7 +47,7 @@ export const DateField = ({
 	...dateFieldProps
 }: IProps) => {
 	const [value, setValue] = useState(propValue || null);
-	const Picker: ComponentType<DatePickerProps | DateTimePickerProps> = dateTime ? StyledDateTimePicker : StyledDatePicker;
+	const Picker = dateTime ? DateTimePicker : DatePicker;
 
 	const handleAccept = (newValue) => {
 		if (newValue) {
@@ -78,11 +77,13 @@ export const DateField = ({
 					defaultValue={defaultValue}
 					name={name}
 					onBlur={onBlur}
-					className={className}
 					{...props}
+					InputProps={{ endAdornment: null }}
 				/>
 			)}
+			className={className}
 			{...dateFieldProps}
+			components={{ ActionBar: null }}
 		/>
 	);
 };
diff --git a/frontend/src/v4/routes/components/dateField/dateField.styles.ts b/frontend/src/v4/routes/components/dateField/dateField.styles.ts
deleted file mode 100644
index 740bda8adcb..00000000000
--- a/frontend/src/v4/routes/components/dateField/dateField.styles.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- *  Copyright (C) 2021 3D Repo Ltd
- *
- *  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 <http://www.gnu.org/licenses/>.
- */
-
-import styled from 'styled-components';
-
-import { MobileDatePicker, MobileDateTimePicker } from '@mui/lab';
-
-export const Container = styled.div`
-	margin-top: 16px;
-`;
-
-export const StyledDateTimePicker = styled(MobileDateTimePicker)`
-	width: 100%;
-`;
-
-export const StyledDatePicker = styled(MobileDatePicker)`
-	width: 100%;
-`;
diff --git a/frontend/src/v5/ui/controls/inputs/datePicker/baseCalendarPicker/calendarActionBar/calendarActionBar.component.tsx b/frontend/src/v5/ui/controls/inputs/datePicker/baseCalendarPicker/calendarActionBar/calendarActionBar.component.tsx
index 926d47c4430..b6da77ceb64 100644
--- a/frontend/src/v5/ui/controls/inputs/datePicker/baseCalendarPicker/calendarActionBar/calendarActionBar.component.tsx
+++ b/frontend/src/v5/ui/controls/inputs/datePicker/baseCalendarPicker/calendarActionBar/calendarActionBar.component.tsx
@@ -25,7 +25,7 @@ type ICalendarActionBar = {
 export const CalendarActionBar = ({ onClear, hidden }: ICalendarActionBar) => {
 	if (hidden) return null;
 	return (
-		<ClearDateAction onClick={onClear} hidden={hidden}>
+		<ClearDateAction onClick={onClear}>
 			<FormattedMessage id="datePicker.actionBar.clear" defaultMessage="Clear date" />
 		</ClearDateAction>
 	);
diff --git a/frontend/src/v5/ui/v4Adapter/overrides/cards/sharedStyles/sequencesTab.overrides.ts b/frontend/src/v5/ui/v4Adapter/overrides/cards/sharedStyles/sequencesTab.overrides.ts
index ce463ae35c1..6869c3adee3 100644
--- a/frontend/src/v5/ui/v4Adapter/overrides/cards/sharedStyles/sequencesTab.overrides.ts
+++ b/frontend/src/v5/ui/v4Adapter/overrides/cards/sharedStyles/sequencesTab.overrides.ts
@@ -35,11 +35,14 @@ export default css`
 		}
 		${SequenceDateContainer} {
 			width: 190px;
-			${SequenceDateField} {
+			${SequenceDateField} { // HERE
+				outline: 1px solid peru;
 				.MuiInputBase-root {
+					outline: 1px solid hotpink;
 					margin: 0px;
-
+					
 					input {
+						outline: 1px solid lightgoldenrodyellow;
 						color: ${({ theme }) => theme.palette.secondary.main};
 						box-sizing: border-box;
 						width: 184px;