fix: unsaved changes popping up for newly created dashboard in settings (#5182)

* fix: unsaved changes popping up for newly created dashboard in settings

* fix: width changing of right bar when adding new queries

* fix: address review comments
This commit is contained in:
Vikrant Gupta 2024-06-10 18:12:20 +05:30 committed by GitHub
parent f2aba5035a
commit a3e36cbac9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 20 deletions

View File

@ -71,24 +71,24 @@ function GeneralDashboardSettings(): JSX.Element {
useEffect(() => { useEffect(() => {
let numberOfUnsavedChanges = 0; let numberOfUnsavedChanges = 0;
if (!isEqual(updatedTitle, selectedData?.title)) { const initialValues = [title, description, tags, image];
numberOfUnsavedChanges += 1; const updatedValues = [
} updatedTitle,
if (!isEqual(updatedDescription, selectedData?.description)) { updatedDescription,
numberOfUnsavedChanges += 1; updatedTags,
} updatedImage,
if (!isEqual(updatedTags, selectedData?.tags)) { ];
numberOfUnsavedChanges += 1; initialValues.forEach((val, index) => {
} if (!isEqual(val, updatedValues[index])) {
if (!isEqual(updatedImage, selectedData?.image)) {
numberOfUnsavedChanges += 1; numberOfUnsavedChanges += 1;
} }
});
setNumberOfUnsavedChanges(numberOfUnsavedChanges); setNumberOfUnsavedChanges(numberOfUnsavedChanges);
}, [ }, [
selectedData?.description, description,
selectedData?.image, image,
selectedData?.tags, tags,
selectedData?.title, title,
updatedDescription, updatedDescription,
updatedImage, updatedImage,
updatedTags, updatedTags,
@ -167,7 +167,8 @@ function GeneralDashboardSettings(): JSX.Element {
<div className="unsaved"> <div className="unsaved">
<div className="unsaved-dot" /> <div className="unsaved-dot" />
<Typography.Text className="unsaved-changes"> <Typography.Text className="unsaved-changes">
{numberOfUnsavedChanges} Unsaved change {numberOfUnsavedChanges} unsaved change
{numberOfUnsavedChanges > 1 && 's'}
</Typography.Text> </Typography.Text>
</div> </div>
<div className="footer-action-btns"> <div className="footer-action-btns">

View File

@ -10,10 +10,9 @@ export const Container = styled.div`
export const RightContainerWrapper = styled(Col)` export const RightContainerWrapper = styled(Col)`
&&& { &&& {
min-width: 330px;
overflow-y: auto;
max-width: 400px; max-width: 400px;
width: 30%; width: 30%;
overflow-y: auto;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0rem; width: 0rem;
@ -26,7 +25,7 @@ interface LeftContainerWrapperProps {
export const LeftContainerWrapper = styled(Col)<LeftContainerWrapperProps>` export const LeftContainerWrapper = styled(Col)<LeftContainerWrapperProps>`
&&& { &&& {
min-width: 70%; width: 100%;
overflow-y: auto; overflow-y: auto;
border-right: ${({ isDarkMode }): string => border-right: ${({ isDarkMode }): string =>
isDarkMode isDarkMode