[WEB] Disable share and upgrade buttons when offline (#35923)

* disabling buttons in offline mode

* setting href as undefined when button is disabled

* Fix disabled state for premium button by removing gradient override

* Add disabled class to premium button for correct disabled styling

GitOrigin-RevId: b7dd59e05d8c818d58399e31d961e93bb0f188a9

services/web/frontend/js/features/ide-react/components/toolbar/share-project-button.tsx

@@ -7,12 +7,14 @@ import { useTranslation } from 'react-i18next'
 import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 import { useEditorContext } from '@/shared/context/editor-context'
 import { useProjectContext } from '@/shared/context/project-context'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
 
 export default function ShareProjectButton() {
   const { t } = useTranslation()
   const { sendEventOnce } = useEditorAnalytics()
   const { isProjectOwner } = useEditorContext()
   const { project } = useProjectContext()
+  const isDisabledDueToNetworkStall = useIsNetworkStalled()
 
   const [showShareModal, setShowShareModal] = useState(false)
 
@@ -53,6 +55,7 @@ export default function ShareProjectButton() {
           variant="primary"
           leadingIcon={<MaterialIcon type="person_add" />}
           onClick={handleOpenShareModal}
+          disabled={isDisabledDueToNetworkStall}
         >
           {t('share')}
           {accessRequestCount > 0 && (

services/web/frontend/js/features/ide-react/components/toolbar/upgrade-button.tsx

@@ -1,6 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 import OLButton from '@/shared/components/ol/ol-button'
+import classNames from 'classnames'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
 
 export default function UpgradeButton({
   className = '',
@@ -12,6 +14,7 @@ export default function UpgradeButton({
   source?: string
 }) {
   const { t } = useTranslation()
+  const isDisabledDueToNetworkStall = useIsNetworkStalled()
 
   function handleClick() {
     eventTracking.send('subscription-funnel', source, 'upgrade')
@@ -23,11 +26,18 @@ export default function UpgradeButton({
       <OLButton
         variant="premium"
         size="sm"
-        href={`/user/subscription/choose-your-plan?itm_referrer=${referrer}&paywall-type=${source}`}
+        href={
+          isDisabledDueToNetworkStall
+            ? undefined
+            : `/user/subscription/choose-your-plan?itm_referrer=${referrer}&paywall-type=${source}`
+        }
         target="_blank"
         rel="noreferrer"
         onClick={handleClick}
-        className={className}
+        disabled={isDisabledDueToNetworkStall}
+        className={classNames(className, {
+          disabled: isDisabledDueToNetworkStall,
+        })}
       >
         {t('upgrade')}
       </OLButton>

services/web/frontend/stylesheets/components/button.scss

@@ -195,6 +195,11 @@
     &:hover {
       background: var(--btn-premium-hover-background);
     }
+
+    &:disabled,
+    &.disabled {
+      background: var(--bs-btn-disabled-bg);
+    }
   }
 
   &.btn-premium-secondary {