From 287a2eb8ed1dd8400a9799564df365f9b66d2ad7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= <flesz3@o2.pl>
Date: Thu, 1 Oct 2020 17:50:17 +0200
Subject: [PATCH] Hide save bar if no action is available (#735)

---
 .../AttributePage/AttributePage.tsx           |  4 +-
 .../SaveButtonBar/SaveButtonBar.tsx           | 83 ++++++++++---------
 .../CountryListPage/CountryListPage.tsx       |  4 +-
 3 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/src/attributes/components/AttributePage/AttributePage.tsx b/src/attributes/components/AttributePage/AttributePage.tsx
index 9fe12bdb0..2e4bb018a 100644
--- a/src/attributes/components/AttributePage/AttributePage.tsx
+++ b/src/attributes/components/AttributePage/AttributePage.tsx
@@ -136,7 +136,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
 
   return (
     <Form initial={initialForm} onSubmit={handleSubmit}>
-      {({ change, data, submit }) => {
+      {({ change, data, hasChanged, submit }) => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
@@ -185,7 +185,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
               </div>
             </Grid>
             <SaveButtonBar
-              disabled={disabled}
+              disabled={disabled || !hasChanged}
               state={saveButtonBarState}
               onCancel={onBack}
               onSave={submit}
diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx
index adf2bdcdb..d741cae2f 100644
--- a/src/components/SaveButtonBar/SaveButtonBar.tsx
+++ b/src/components/SaveButtonBar/SaveButtonBar.tsx
@@ -80,55 +80,58 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
   const scrollPosition = useWindowScroll();
   const scrolledToBottom =
     scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
+  const shouldDisplay = onDelete || !disabled;
 
   return (
     <AppActionContext.Consumer>
       {anchor =>
         anchor ? (
           <Portal container={anchor.current}>
-            <div className={classes.root} {...rest}>
-              <Container>
-                <Card elevation={scrolledToBottom ? 0 : 16}>
-                  <CardContent className={classes.content}>
-                    {!!onDelete && (
+            {shouldDisplay && (
+              <div className={classes.root} {...rest}>
+                <Container>
+                  <Card elevation={scrolledToBottom ? 0 : 16}>
+                    <CardContent className={classes.content}>
+                      {!!onDelete && (
+                        <Button
+                          variant="contained"
+                          onClick={onDelete}
+                          className={classes.deleteButton}
+                          data-test="button-bar-delete"
+                        >
+                          {labels && labels.delete
+                            ? labels.delete
+                            : intl.formatMessage(buttonMessages.delete)}
+                        </Button>
+                      )}
+                      <div className={classes.spacer} />
                       <Button
-                        variant="contained"
-                        onClick={onDelete}
-                        className={classes.deleteButton}
-                        data-test="button-bar-delete"
+                        className={classes.cancelButton}
+                        variant="text"
+                        onClick={onCancel}
+                        data-test="button-bar-cancel"
                       >
-                        {labels && labels.delete
-                          ? labels.delete
-                          : intl.formatMessage(buttonMessages.delete)}
+                        {maybe(
+                          () => labels.cancel,
+                          intl.formatMessage(buttonMessages.back)
+                        )}
                       </Button>
-                    )}
-                    <div className={classes.spacer} />
-                    <Button
-                      className={classes.cancelButton}
-                      variant="text"
-                      onClick={onCancel}
-                      data-test="button-bar-cancel"
-                    >
-                      {maybe(
-                        () => labels.cancel,
-                        intl.formatMessage(buttonMessages.back)
-                      )}
-                    </Button>
-                    <ConfirmButton
-                      disabled={disabled}
-                      onClick={onSave}
-                      transitionState={state}
-                      data-test="button-bar-confirm"
-                    >
-                      {maybe(
-                        () => labels.save,
-                        intl.formatMessage(buttonMessages.save)
-                      )}
-                    </ConfirmButton>
-                  </CardContent>
-                </Card>
-              </Container>
-            </div>
+                      <ConfirmButton
+                        disabled={disabled}
+                        onClick={onSave}
+                        transitionState={state}
+                        data-test="button-bar-confirm"
+                      >
+                        {maybe(
+                          () => labels.save,
+                          intl.formatMessage(buttonMessages.save)
+                        )}
+                      </ConfirmButton>
+                    </CardContent>
+                  </Card>
+                </Container>
+              </div>
+            )}
           </Portal>
         ) : null
       }
diff --git a/src/taxes/components/CountryListPage/CountryListPage.tsx b/src/taxes/components/CountryListPage/CountryListPage.tsx
index 42680f1c7..1576ff4f6 100644
--- a/src/taxes/components/CountryListPage/CountryListPage.tsx
+++ b/src/taxes/components/CountryListPage/CountryListPage.tsx
@@ -47,7 +47,7 @@ const CountryListPage: React.FC<CountryListPageProps> = ({
   };
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
-      {({ change, data, submit }) => (
+      {({ change, data, hasChanged, submit }) => (
         <>
           <Container>
             <AppHeader onBack={onBack}>
@@ -77,7 +77,7 @@ const CountryListPage: React.FC<CountryListPageProps> = ({
             </Grid>
           </Container>
           <SaveButtonBar
-            disabled={disabled}
+            disabled={disabled || !hasChanged}
             state={saveButtonBarState}
             onCancel={onBack}
             onSave={submit}