fix: allow users to disable any active cloud integration even if they are not entitled to cloud backups (#870)

* fix: allow users to disable any active cloud integration even if they are not entitled to cloud backups

* chore: better variable naming

* refactor: move css constant away from the global constants file

* refactor: avoid importing a constant css class from non-shared file

app/assets/javascripts/preferences/panes/backups-segments/EmailBackups.tsx

@@ -34,7 +34,7 @@ export const EmailBackups = observer(({ application }: Props) => {
   >([]);
   const [isFailedBackupEmailMuted, setIsFailedBackupEmailMuted] =
     useState(true);
-  const [isEntitledForEmailBackups, setIsEntitledForEmailBackups] =
+  const [isEntitledToEmailBackups, setIsEntitledToEmailBackups] =
     useState(false);
 
   const loadEmailFrequencySetting = useCallback(async () => {
@@ -65,7 +65,7 @@ export const EmailBackups = observer(({ application }: Props) => {
     const emailBackupsFeatureStatus = application.getFeatureStatus(
       FeatureIdentifier.DailyEmailBackup
     );
-    setIsEntitledForEmailBackups(
+    setIsEntitledToEmailBackups(
       emailBackupsFeatureStatus === FeatureStatus.Entitled
     );
 
@@ -126,7 +126,7 @@ export const EmailBackups = observer(({ application }: Props) => {
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Email Backups</Title>
-        {!isEntitledForEmailBackups && (
+        {!isEntitledToEmailBackups && (
           <>
             <Text>
               A <span className={'font-bold'}>Plus</span> or{' '}
@@ -142,7 +142,7 @@ export const EmailBackups = observer(({ application }: Props) => {
         )}
         <div
           className={
-            isEntitledForEmailBackups
+            isEntitledToEmailBackups
               ? ''
               : 'faded cursor-default pointer-events-none'
           }

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

@@ -17,11 +17,13 @@ import { FunctionComponent } from 'preact';
 type Props = {
   application: WebApplication;
   providerName: CloudProvider;
+  isEntitledToCloudBackups: boolean;
 };
 
 export const CloudBackupProvider: FunctionComponent<Props> = ({
   application,
   providerName,
+  isEntitledToCloudBackups,
 }) => {
   const [authBegan, setAuthBegan] = useState(false);
   const [successfullyInstalled, setSuccessfullyInstalled] = useState(false);
@@ -174,6 +176,9 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
 
   const isExpanded = authBegan || successfullyInstalled;
   const shouldShowEnableButton = !backupFrequency && !authBegan;
+  const additionalClass = isEntitledToCloudBackups
+    ? ''
+    : 'faded cursor-default pointer-events-none';
 
   return (
     <div
@@ -184,7 +189,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       }`}
     >
       <div>
-        <Subtitle>{providerName}</Subtitle>
+        <Subtitle className={additionalClass}>{providerName}</Subtitle>
 
         {successfullyInstalled && (
           <p>{providerName} has been successfully enabled.</p>
@@ -213,7 +218,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
           <Button
             type="normal"
             label="Enable"
-            className={'px-1 text-xs min-w-40'}
+            className={`px-1 text-xs min-w-40 ${additionalClass}`}
             onClick={installIntegration}
           />
         </div>
@@ -222,7 +227,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       {backupFrequency && (
         <div className={'flex flex-col items-end'}>
           <Button
-            className="min-w-40 mb-2"
+            className={`min-w-40 mb-2 ${additionalClass}`}
             type="normal"
             label="Perform Backup"
             onClick={performBackupNow}

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

@@ -35,11 +35,14 @@ type Props = {
 };
 
 export const CloudLink: FunctionComponent<Props> = ({ application }) => {
-  const [isEntitledForCloudBackups, setIsEntitledForCloudBackups] =
+  const [isEntitledToCloudBackups, setIsEntitledToCloudBackups] =
     useState(false);
   const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] =
     useState(true);
   const [isLoading, setIsLoading] = useState(false);
+  const additionalClass = isEntitledToCloudBackups
+    ? ''
+    : 'faded cursor-default pointer-events-none';
 
   const loadIsFailedCloudBackupEmailMutedSetting = useCallback(async () => {
     if (!application.getUser()) {
@@ -77,7 +80,7 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
       dailyOneDriveBackupStatus,
     ].every((status) => status === FeatureStatus.Entitled);
 
-    setIsEntitledForCloudBackups(isCloudBackupsAllowed);
+    setIsEntitledToCloudBackups(isCloudBackupsAllowed);
     loadIsFailedCloudBackupEmailMutedSetting();
   }, [application, loadIsFailedCloudBackupEmailMutedSetting]);
 
@@ -111,7 +114,7 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Cloud Backups</Title>
-        {!isEntitledForCloudBackups && (
+        {!isEntitledToCloudBackups && (
           <>
             <Text>
               A <span className={'font-bold'}>Plus</span> or{' '}
@@ -125,45 +128,46 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
             <HorizontalSeparator classes="mt-3 mb-3" />
           </>
         )}
-        <div
+        <div>
-          className={
+          <Text className={additionalClass}>
-            isEntitledForCloudBackups
-              ? ''
-              : 'faded cursor-default pointer-events-none'
-          }
-        >
-          <Text>
             Configure the integrations below to enable automatic daily backups
             of your encrypted data set to your third-party cloud provider.
           </Text>
           <div>
-            <HorizontalSeparator classes={'mt-3 mb-3'} />
+            <HorizontalSeparator classes={`mt-3 mb-3 ${additionalClass}`} />
             <div>
               {providerData.map(({ name }) => (
                 <>
                   <CloudBackupProvider
                     application={application}
                     providerName={name}
+                    isEntitledToCloudBackups={isEntitledToCloudBackups}
+                  />
+                  <HorizontalSeparator
+                    classes={`mt-3 mb-3 ${additionalClass}`}
                   />
-                  <HorizontalSeparator classes={'mt-3 mb-3'} />
                 </>
               ))}
             </div>
           </div>
 
-          <Subtitle>Email preferences</Subtitle>
+          <div className={additionalClass}>
-          <div className="flex items-center justify-between mt-1">
+            <Subtitle>Email preferences</Subtitle>
-            <div className="flex flex-col">
+            <div className="flex items-center justify-between mt-1">
-              <Text>Receive a notification email if a cloud backup fails.</Text>
+              <div className="flex flex-col">
+                <Text>
+                  Receive a notification email if a cloud backup fails.
+                </Text>
+              </div>
+              {isLoading ? (
+                <div className={'sk-spinner info small'} />
+              ) : (
+                <Switch
+                  onChange={toggleMuteFailedCloudBackupEmails}
+                  checked={!isFailedCloudBackupEmailMuted}
+                />
+              )}
             </div>
-            {isLoading ? (
-              <div className={'sk-spinner info small'} />
-            ) : (
-              <Switch
-                onChange={toggleMuteFailedCloudBackupEmails}
-                checked={!isFailedCloudBackupEmailMuted}
-              />
-            )}
           </div>
         </div>
       </PreferencesSegment>