Hide save bar if no action is available (#735)

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}

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}>
+            {shouldDisplay && (
-              <Container>
+              <div className={classes.root} {...rest}>
-                <Card elevation={scrolledToBottom ? 0 : 16}>
+                <Container>
-                  <CardContent className={classes.content}>
+                  <Card elevation={scrolledToBottom ? 0 : 16}>
-                    {!!onDelete && (
+                    <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"
+                        className={classes.cancelButton}
-                        onClick={onDelete}
+                        variant="text"
-                        className={classes.deleteButton}
+                        onClick={onCancel}
-                        data-test="button-bar-delete"
+                        data-test="button-bar-cancel"
                       >
-                        {labels && labels.delete
+                        {maybe(
-                          ? labels.delete
+                          () => labels.cancel,
-                          : intl.formatMessage(buttonMessages.delete)}
+                          intl.formatMessage(buttonMessages.back)
+                        )}
                       </Button>
-                    )}
+                      <ConfirmButton
-                    <div className={classes.spacer} />
+                        disabled={disabled}
-                    <Button
+                        onClick={onSave}
-                      className={classes.cancelButton}
+                        transitionState={state}
-                      variant="text"
+                        data-test="button-bar-confirm"
-                      onClick={onCancel}
+                      >
-                      data-test="button-bar-cancel"
+                        {maybe(
-                    >
+                          () => labels.save,
-                      {maybe(
+                          intl.formatMessage(buttonMessages.save)
-                        () => labels.cancel,
+                        )}
-                        intl.formatMessage(buttonMessages.back)
+                      </ConfirmButton>
-                      )}
+                    </CardContent>
-                    </Button>
+                  </Card>
-                    <ConfirmButton
+                </Container>
-                      disabled={disabled}
+              </div>
-                      onClick={onSave}
+            )}
-                      transitionState={state}
-                      data-test="button-bar-confirm"
-                    >
-                      {maybe(
-                        () => labels.save,
-                        intl.formatMessage(buttonMessages.save)
-                      )}
-                    </ConfirmButton>
-                  </CardContent>
-                </Card>
-              </Container>
-            </div>
           </Portal>
         ) : null
       }

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}