Disable app cases (#198)

* disable component in all non-sql classic mode pages

* default to app enable flag first

Author: nuwandavek

apps/src/metabase/appState.ts

@@ -81,7 +81,8 @@ export class MetabaseState extends DefaultAppState<MetabaseAppState> {
         isEnabled: toolEnabledNew,
         toolContext: {
           ...oldState.toolContext,
-          pageType
+          pageType,
+          url
         }
       }));
       const dbId = await getSelectedDbId();
@@ -331,7 +332,7 @@ function shouldEnable(elements: DOMQueryMapResponse, url: string) {
     }))
   const SQLQueryURL = new URL(url).origin + '/question#' + hash;
   const MBQLURL = new URL(url).origin + '/question/notebook';
-  const reason = `To enable MinusX on Metabase, head over to the SQL query [page](${SQLQueryURL}) or the Question Builder [page](${MBQLURL})!`
+  const reason = `To use MinusX on Metabase, head over to the [SQL query](${SQLQueryURL}), [Question Builder](${MBQLURL}) or any of your Dashboard pages!`
   const metabasePageType = determineMetabasePageType(elements, url);
   if (metabasePageType === 'unknown') {
     return {

web/src/components/common/App.tsx

@@ -8,7 +8,9 @@ import {
   Tooltip,
   Spacer,
   Button,
-  Link
+  Link,
+  Box,
+  Flex
 } from '@chakra-ui/react'
 import logo from '../../assets/img/logo.svg'
 import React, { forwardRef, useEffect, useState } from 'react'
@@ -39,7 +41,7 @@ import { captureEvent, GLOBAL_EVENTS } from '../../tracking'
 import NotificationHandler from './NotificationHandler'
 import notificationService from '../../services/notificationService'
 import { useSocketIO } from '../../hooks/useSocketIO'
-
+import { DisabledOverlay } from './DisabledOverlay'
 
 const useAppStore = getApp().useStore()
 
@@ -50,6 +52,8 @@ const AppInstructions = () => {
   const addonsActivate = `${configs.WEB_URL}/screenshots/addons-activate.png`
   const addonsUnavailable = `${configs.WEB_URL}/screenshots/addons-unavailable.png`
   const addOnStatus = useAppStore((state) => state.addOnStatus)
+  const width = getParsedIframeInfo().width
+
   useEffect(() => {
     if (addOnStatus == 'activated') {
       toggleMinusXRoot('closed', true)
@@ -285,35 +289,6 @@ const AppLoggedIn = forwardRef((_props, ref) => {
   )
 })
 
-const width = getParsedIframeInfo().width
-function DisabledOverlayComponent({ toolEnabledReason }: { toolEnabledReason: string }) {
-  const isDevToolsOpen = useSelector((state: RootState) => state.settings.isDevToolsOpen)
-  return <div style={{
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      width: isDevToolsOpen ? '850px' : `${width}px`, // Hack to fix Disabled Overlay
-      height: '100%',
-      backgroundColor: 'rgba(255, 255, 255, 0.8)',
-      zIndex: 1000,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-  }}>
-      <span style={{
-          fontSize: '1rem',
-          fontWeight: 'bold',
-          color: '#fff',
-          padding: '10px 30px',
-          margin: '10px',
-          backgroundColor: '#16a085',
-          borderRadius: '5px',
-          textAlign: 'center'
-      }}>
-          <Markdown content={toolEnabledReason}/>
-      </span>
-  </div>
-}
 
 const AppBody = forwardRef((_props, ref) => {
   const auth = useSelector((state: RootState) => state.auth)
@@ -365,7 +340,7 @@ const AppBody = forwardRef((_props, ref) => {
     return (
       <>
         {isDevToolsOpen && <DevToolsBox />}
-        {!toolEnabled.value && <DisabledOverlayComponent toolEnabledReason={toolEnabled.reason} />}
+        {!toolEnabled.value && <DisabledOverlay toolEnabledReason={toolEnabled.reason} />}
         <AppLoggedIn ref={ref}/>
       </>
     )

web/src/components/common/Chat.tsx

@@ -192,7 +192,7 @@ export const ChatSection = () => {
   const activeThread = useSelector((state: RootState) => state.chat.threads[thread])
   const messages = activeThread.messages
   const tasks = activeThread.tasks
-  const href = getParsedIframeInfo().href
+  const url = useAppStore((state) => state.toolContext)?.url || ''
 
   useEffect(() => {
     setTimeout(() => {
@@ -214,7 +214,7 @@ export const ChatSection = () => {
     }
   })
   const Chats = isEmpty(messagesWithStatus) ?
-    (getDemoIDX(href) == -1 ? <HelperMessage /> : <DemoHelperMessage url={href}/>) :
+    (getDemoIDX(url) == -1 ? <HelperMessage /> : <DemoHelperMessage url={url}/>) :
     messagesWithStatus.map((message, key) => (<Chat key={key} {...message} />))
 
   return (
@@ -226,7 +226,7 @@ export const ChatSection = () => {
     <div style={{ height: '10px', width: '100%' }} />
     <div ref={messagesEndRef} />
   </HStack>
-  <DemoSuggestions url={href}/>
+  <DemoSuggestions url={url}/>
   </VStack>
   )
 }

web/src/components/common/DisabledOverlay.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import {
+  Icon,
+  Box,
+  Flex
+} from '@chakra-ui/react'
+import { getParsedIframeInfo } from '../../helpers/origin'
+import { RootState } from '../../state/store'
+import { Markdown } from './Markdown'
+import { BsFillLightningFill } from 'react-icons/bs'
+
+
+export function DisabledOverlay({ toolEnabledReason }: { toolEnabledReason: string }) {
+  const isDevToolsOpen = useSelector((state: RootState) => state.settings.isDevToolsOpen)
+  const width = getParsedIframeInfo().width
+
+  
+  return (
+    <Box
+      position="absolute"
+      top={0}
+      right={0}
+      width={isDevToolsOpen ? '850px' : `${width}px`}
+      height="100%"
+      bg="rgba(255, 255, 255, 0.5)"
+      backdropFilter="blur(4px)"
+      zIndex={1000}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Flex
+        direction="column"
+        align="center"
+        justify="center"
+        bg="white"
+        borderRadius="xl"
+        boxShadow="2xl"
+        p={8}
+        mx={6}
+        maxWidth="400px"
+        border="1px solid"
+        borderColor="gray.200"
+        transform="scale(1)"
+        transition="all 0.2s ease-in-out"
+        _hover={{
+          transform: 'scale(1.02)',
+          boxShadow: '3xl'
+        }}
+      >
+        <Box
+          width="60px"
+          height="60px"
+          borderRadius="full"
+          bg="minusxGreen.100"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          mb={4}
+        >
+          <Icon as={BsFillLightningFill} boxSize={6} color="white" />
+        </Box>
+        
+        <Box
+          fontSize="md"
+          fontWeight="medium"
+          color="gray.700"
+          textAlign="center"
+          lineHeight="1.6"
+        >
+          <Markdown content={toolEnabledReason} />
+        </Box>
+      </Flex>
+    </Box>
+  )
+}

web/src/components/common/TaskUI.tsx

@@ -57,6 +57,7 @@ import { toast } from '../../app/toast'
 import { NUM_RELEVANT_TABLES, resetRelevantTables } from './TablesCatalog'
 import { setupCollectionsAndModels } from '../../state/settings/availableCatalogsListener'
 import { Notify } from './Notify'
+import { DisabledOverlay } from './DisabledOverlay'
 
 
 
@@ -84,6 +85,7 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
 
   const selectedCatalog = useSelector((state: RootState) => state.settings.selectedCatalog)
   const toolContext: MetabaseContext = useAppStore((state) => state.toolContext)
+  const isAppEnabled: boolean = useAppStore((state) => state.isEnabled)?.value || false
   const selectedModels = useSelector((state: RootState) => state.settings.selectedModels)
 
   const tableDiff = useSelector((state: RootState) => state.settings.tableDiff)
@@ -323,7 +325,13 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
     });
   }
 
+  const shouldBeEnabled = drMode || toolContext.pageType === 'sql'
+
   return (
+    <>
+    {
+        isAppEnabled && !shouldBeEnabled && <DisabledOverlay toolEnabledReason={"You're currently using MinusX Classic, which only works on SQL Editor pages. [Find out](https://minusx.ai/demo) how to enable Agent mode and unlock all the features!"}/>
+    }
     <VStack
       justifyContent="space-between"
       alignItems="stretch"
@@ -516,6 +524,7 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
         </Stack>
       </VStack>
     </VStack>
+    </>
   )
 })