fix: actually disable backup buttons if the user is not entitled (#955)

app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx

@@ -122,6 +122,9 @@ export const EmailBackups = observer(({ application }: Props) => {
   };
 
   const toggleMuteFailedBackupEmails = async () => {
+    if (!isEntitledToEmailBackups) {
+      return;
+    }
     const previousValue = isFailedBackupEmailMuted;
     setIsFailedBackupEmailMuted(!isFailedBackupEmailMuted);
 
@@ -134,6 +137,13 @@ export const EmailBackups = observer(({ application }: Props) => {
     }
   };
 
+  const handleEmailFrequencyChange = (item: string) => {
+    if (!isEntitledToEmailBackups) {
+      return;
+    }
+    updateEmailFrequency(item as EmailBackupFrequency);
+  };
+
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -176,9 +186,8 @@ export const EmailBackups = observer(({ application }: Props) => {
                 label="Select email frequency"
                 items={emailFrequencyOptions}
                 value={emailFrequency}
-                onChange={(item) => {
+                onChange={handleEmailFrequencyChange}
-                  updateEmailFrequency(item as EmailBackupFrequency);
+                disabled={!isEntitledToEmailBackups}
-                }}
               />
             )}
           </div>
@@ -196,6 +205,7 @@ export const EmailBackups = observer(({ application }: Props) => {
               <Switch
                 onChange={toggleMuteFailedBackupEmails}
                 checked={!isFailedBackupEmailMuted}
+                disabled={!isEntitledToEmailBackups}
               />
             )}
           </div>

app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx

@@ -54,6 +54,9 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
   };
 
   const installIntegration = (event: Event) => {
+    if (!isEntitledToCloudBackups) {
+      return;
+    }
     event.stopPropagation();
 
     const authUrl = application.getCloudProviderIntegrationUrl(
@@ -223,6 +226,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
             label="Enable"
             className={`px-1 text-xs min-w-40 ${additionalClass}`}
             onClick={installIntegration}
+            disabled={!isEntitledToCloudBackups}
           />
         </div>
       )}

app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx

@@ -98,6 +98,9 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
   };
 
   const toggleMuteFailedCloudBackupEmails = async () => {
+    if (!isEntitledToCloudBackups) {
+      return;
+    }
     const previousValue = isFailedCloudBackupEmailMuted;
     setIsFailedCloudBackupEmailMuted(!isFailedCloudBackupEmailMuted);
 
@@ -165,6 +168,7 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
                 <Switch
                   onChange={toggleMuteFailedCloudBackupEmails}
                   checked={!isFailedCloudBackupEmailMuted}
+                  disabled={!isEntitledToCloudBackups}
                 />
               )}
             </div>