tooltip for setting

Author: prakriti-solankey

frontend/src/components/ButtonWithToolTip.tsx

@@ -10,6 +10,7 @@ const ButtonWithToolTip = ({
   disabled = false,
   className = '',
   label,
+  loading,
 }: {
   text: string | React.ReactNode;
   children: React.ReactNode;
@@ -20,12 +21,20 @@ const ButtonWithToolTip = ({
   placement?: 'bottom' | 'top' | 'right' | 'left';
   disabled?: boolean;
   className?: string;
+  loading?: boolean;
   label: string;
 }) => {
   return (
     <Tip allowedPlacements={[placement]}>
       <Tip.Trigger>
-        <Button aria-label={label} size={size} onClick={onClick} disabled={disabled} className={className}>
+        <Button
+          aria-label={label}
+          size={size}
+          onClick={onClick}
+          disabled={disabled}
+          className={className}
+          loading={loading}
+        >
           {children}
         </Button>
       </Tip.Trigger>

frontend/src/components/Layout/PageLayout.tsx

@@ -22,7 +22,7 @@ export default function PageLayoutNew({
   openSettingsDialog: () => void;
 }) {
   const [isLeftExpanded, setIsLeftExpanded] = useState<boolean>(true);
-  const [isRightExpanded, setIsRightExpanded] = useState<boolean>(false);
+  const [isRightExpanded, setIsRightExpanded] = useState<boolean>(true);
   const [showChatBot, setShowChatBot] = useState<boolean>(false);
   const [showDrawerChatbot, setShowDrawerChatbot] = useState<boolean>(true);
   const [clearHistoryData, setClearHistoryData] = useState<boolean>(false);

frontend/src/components/SettingModal.tsx

@@ -1,11 +1,13 @@
-import { Button, Dialog, Dropdown } from '@neo4j-ndl/react';
+import { Dialog, Dropdown } from '@neo4j-ndl/react';
 import { OnChangeValue, ActionMeta } from 'react-select';
 import { OptionType, OptionTypeForExamples, UserCredentials, schema } from '../types';
 import { useFileContext } from '../context/UsersFiles';
 import { getNodeLabelsAndRelTypes } from '../services/GetNodeLabelsRelTypes';
 import { useCredentials } from '../context/UserCredentials';
 import { MouseEventHandler, useCallback, useEffect, useState } from 'react';
 import schemaExamples from '../assets/schemas.json';
+import ButtonWithToolTip from './ButtonWithToolTip';
+import { tooltips } from '../utils/Constants';
 
 export default function SettingsModal({
   open,
@@ -199,22 +201,31 @@ export default function SettingsModal({
           type='creatable'
         />
         <Dialog.Actions className='!mt-4'>
-          <Button
+          <ButtonWithToolTip
             loading={loading}
-            title={!nodeLabelOptions.length && !relationshipTypeOptions.length ? `No Labels Found in the Database` : ''}
+            text={
+              !nodeLabelOptions.length && !relationshipTypeOptions.length
+                ? `No Labels Found in the Database`
+                : tooltips.useExistingSchema
+            }
             disabled={!nodeLabelOptions.length && !relationshipTypeOptions.length}
-            onClick={clickHandler}
+            onClick={() => clickHandler}
+            label='Use Existing Schema'
+            placement='top'
           >
             Use Existing Schema
-          </Button>
-          <Button
+          </ButtonWithToolTip>
+          <ButtonWithToolTip
+            text={tooltips.createSchema}
+            placement='top'
             onClick={() => {
               onClose();
               opneTextSchema();
             }}
+            label='Get Existing Schema From Text'
           >
             Get Existing Schema From Text
-          </Button>
+          </ButtonWithToolTip>
         </Dialog.Actions>
       </Dialog.Content>
     </Dialog>

frontend/src/utils/Constants.ts

@@ -108,4 +108,6 @@ export const tooltips = {
   copied: 'Copied',
   stopSpeaking: 'Stop Speaking',
   textTospeech: 'Text to Speech',
+  createSchema: 'Create your own schema by passing text',
+  useExistingSchema: 'Use the already existing schema from DB',
 };