replace Disable component with NotAvailable component

apps/app/src/client/components/SavePageControls.tsx

@@ -22,6 +22,7 @@ import { useSWRxCurrentPage, useCurrentPagePath } from '~/stores/page';
 import { useIsDeviceLargerThanMd, useSelectedGrant } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
+import { NotAvailable } from './NotAvailable';
 import { GrantSelector } from './SavePageControls/GrantSelector';
 import { SlackNotification } from './SlackNotification';
 
@@ -66,6 +67,7 @@ const SavePageButton = (props: {slackChannels: string, isSlackEnabled?: boolean,
   const labelSubmitButton = t('Update');
   const labelOverwriteScopes = t('page_edit.overwrite_scopes', { operation: labelSubmitButton });
   const labelUnpublishPage = t('wip_page.save_as_wip');
+  const restrictedGrantOverrideErrorTitle = t('Not available when "anyone with the link" is selected');
 
   return (
     <>
@@ -88,11 +90,15 @@ const SavePageButton = (props: {slackChannels: string, isSlackEnabled?: boolean,
             <>
               <DropdownToggle caret color="primary" disabled={isWaitingSaveProcessing} />
               <DropdownMenu container="body" end>
-                <Disable disabled={selectedGrant?.grant === PageGrant.GRANT_RESTRICTED}>
+                <NotAvailable
+                  isDisabled={selectedGrant?.grant === PageGrant.GRANT_RESTRICTED}
+                  classNamePrefix="grw-not-available-when-grant-restricted-is-selected"
+                  title={restrictedGrantOverrideErrorTitle}
+                >
                   <DropdownItem onClick={saveAndOverwriteScopesOfDescendants}>
                     {labelOverwriteScopes}
                   </DropdownItem>
-                </Disable>
+                </NotAvailable>
                 <DropdownItem onClick={saveAndMakeWip}>
                   {labelUnpublishPage}
                 </DropdownItem>
@@ -107,9 +113,15 @@ const SavePageButton = (props: {slackChannels: string, isSlackEnabled?: boolean,
                 toggle={() => setIsSavePageModalShown(false)}
               >
                 <div className="d-flex flex-column pt-4 pb-3 px-4 gap-4">
-                  <button type="button" className="btn btn-primary" onClick={() => { setIsSavePageModalShown(false); saveAndOverwriteScopesOfDescendants() }}>
-                    {labelOverwriteScopes}
-                  </button>
+                  <NotAvailable
+                    isDisabled={selectedGrant?.grant === PageGrant.GRANT_RESTRICTED}
+                    classNamePrefix="grw-not-available-when-grant-restricted-is-selected"
+                    title={restrictedGrantOverrideErrorTitle}
+                  >
+                    <button type="button" className="btn btn-primary" onClick={() => { setIsSavePageModalShown(false); saveAndOverwriteScopesOfDescendants() }}>
+                      {labelOverwriteScopes}
+                    </button>
+                  </NotAvailable>
                   <button type="button" className="btn btn-primary" onClick={() => { setIsSavePageModalShown(false); saveAndMakeWip() }}>
                     {labelUnpublishPage}
                   </button>