Merge pull request #1309 from DalgoT4D/settings-pannel-ui

Settings page
DalgoT4D · Nov 24, 2024 · 3a2d08f · 3a2d08f
2 parents 93fc946 + ff34077
commit 3a2d08f
Show file tree

Hide file tree

Showing 33 changed files with 1,966 additions and 88 deletions.
diff --git a/src/assets/icons/aisettings.tsx b/src/assets/icons/aisettings.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+const AiSettings = (props: any) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    {...props}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={props.fill || '#7D8998'}
+      d="M22.175 9.73125L20.25 9.1125L19.8375 8.08125L20.8 6.29375C21.0063 5.88125 20.9375 5.33125 20.5938 4.9875L18.9438 3.3375C18.6 2.99375 18.05 2.925 17.6375 3.13125L15.85 4.09375L14.8188 3.68125L14.2 1.75625C14.0625 1.34375 13.65 1 13.1688 1H10.8312C10.35 1 9.9375 1.34375 9.86875 1.825L9.25 3.75C8.8375 3.81875 8.49375 3.95625 8.15 4.1625L6.3625 3.2C5.95 2.99375 5.4 3.0625 5.05625 3.40625L3.40625 5.05625C3.0625 5.4 2.99375 5.95 3.2 6.3625L4.09375 8.08125C3.95625 8.425 3.81875 8.8375 3.68125 9.18125L1.75625 9.8C1.34375 9.9375 1 10.35 1 10.8312V13.1688C1 13.65 1.34375 14.0625 1.825 14.2L3.75 14.8188L4.1625 15.85L3.2 17.6375C2.99375 18.05 3.0625 18.6 3.40625 18.9438L5.05625 20.5938C5.4 20.9375 5.95 21.0063 6.3625 20.8L8.15 19.8375L9.18125 20.25L9.8 22.2438C9.9375 22.6563 10.35 23 10.8312 23H13.1688C13.65 23 14.0625 22.6563 14.2 22.2438L14.8188 20.25L15.85 19.8375L17.6375 20.8C18.05 21.0063 18.6 20.9375 18.9438 20.5938L20.5938 18.9438C20.9375 18.6 21.0063 18.05 20.8 17.6375L19.8375 15.85L20.25 14.8188L22.2438 14.2C22.6563 14.0625 23 13.65 23 13.1688V10.8312C23 10.35 22.6562 9.86875 22.175 9.73125ZM21.625 12.9625L19.15 13.7188L19.0812 14.0625L18.4625 15.5063L18.2563 15.85L19.4937 18.1187L18.1187 19.4937L15.85 18.2563L15.5063 18.4625C15.025 18.7375 14.5437 18.9438 14.0625 19.0812L13.7188 19.15L12.9625 21.625H11.0375L10.2812 19.15L9.9375 19.0812L8.49375 18.4625L8.15 18.2563L5.88125 19.4937L4.50625 18.1187L5.74375 15.85L5.5375 15.5063C5.2625 15.025 5.05625 14.5437 4.91875 14.0625L4.85 13.7188L2.375 12.9625V11.0375L4.7125 10.35L4.85 10.0063C4.9875 9.45625 5.19375 8.975 5.46875 8.49375L5.675 8.15L4.50625 5.88125L5.88125 4.50625L8.08125 5.74375L8.425 5.5375C8.90625 5.2625 9.3875 5.05625 9.9375 4.91875L10.2812 4.78125L11.0375 2.375H12.9625L13.7188 4.78125L14.0625 4.91875C14.5437 5.05625 15.025 5.2625 15.5063 5.5375L15.85 5.74375L18.1187 4.50625L19.4937 5.88125L18.2563 8.15L18.4625 8.49375C18.7375 8.975 18.9438 9.45625 19.0812 9.9375L19.15 10.2812L21.625 11.0375V12.9625Z"
+    />
+    <path
+      fill={props.fill || '#7D8998'}
+      d="M8.82 15H7.86C7.74 15 7.7 14.93 7.74 14.79L9.32 8.78C9.36667 8.64 9.46667 8.57 9.62 8.57H10.95C11.1167 8.57 11.2167 8.64 11.25 8.78L12.83 14.79C12.87 14.93 12.83 15 12.71 15H11.75C11.6767 15 11.6267 14.9867 11.6 14.96C11.5733 14.9267 11.5533 14.87 11.54 14.79L11.26 13.69H9.31L9.03 14.79C9.01667 14.87 8.99333 14.9267 8.96 14.96C8.93333 14.9867 8.88667 15 8.82 15ZM10.27 9.78L9.55 12.67H11.03L10.31 9.78H10.27ZM15.0364 8.78V14.79C15.0364 14.93 14.9664 15 14.8264 15H13.9764C13.8364 15 13.7664 14.93 13.7664 14.79V8.78C13.7664 8.64 13.8364 8.57 13.9764 8.57H14.8264C14.9664 8.57 15.0364 8.64 15.0364 8.78Z"
+    />
+  </svg>
+);
+export default AiSettings;
diff --git a/src/assets/icons/elementary.svg b/src/assets/icons/elementary.svg
diff --git a/src/assets/icons/manage_accounts.tsx b/src/assets/icons/manage_accounts.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+const User = (props: any) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask id="mask0_9716_15805" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_9716_15805)">
+      <path
+        fill={props.fill || '#7D8998'}
+        d="M10 11.6875C9.0375 11.6875 8.21358 11.3448 7.52825 10.6595C6.84275 9.974 6.5 9.15 6.5 8.1875C6.5 7.225 6.84275 6.40108 7.52825 5.71575C8.21358 5.03025 9.0375 4.6875 10 4.6875C10.9625 4.6875 11.7864 5.03025 12.4718 5.71575C13.1573 6.40108 13.5 7.225 13.5 8.1875C13.5 9.15 13.1573 9.974 12.4718 10.6595C11.7864 11.3448 10.9625 11.6875 10 11.6875ZM2.5 17.7837V17.0798C2.5 16.5747 2.6305 16.1174 2.8915 15.7078C3.15233 15.2981 3.51033 14.9779 3.9655 14.7472C4.868 14.2896 5.80333 13.9344 6.7715 13.6818C7.73967 13.4293 8.73125 13.303 9.74625 13.303H9.8905C10.103 13.303 10.2811 13.3778 10.4247 13.5273C10.5684 13.6769 10.6403 13.8578 10.6403 14.0698C10.6403 14.2816 10.5684 14.4593 10.4247 14.603C10.2811 14.7465 10.103 14.8183 9.8905 14.8183H9.74625C8.84408 14.8183 7.97017 14.9269 7.1245 15.1442C6.27867 15.3616 5.45508 15.6786 4.65375 16.0953C4.46158 16.1978 4.30458 16.3337 4.18275 16.503C4.06092 16.6722 4 16.8644 4 17.0798V17.803H9.8905C10.103 17.803 10.2811 17.8749 10.4247 18.0188C10.5684 18.1624 10.6403 18.3406 10.6403 18.5533C10.6403 18.7659 10.5684 18.944 10.4247 19.0875C10.2811 19.2312 10.103 19.303 9.8905 19.303H4.01925C3.59742 19.303 3.23875 19.1553 2.94325 18.8598C2.64775 18.5641 2.5 18.2054 2.5 17.7837ZM16.0038 19.4645L15.8828 18.7163C15.6443 18.6458 15.4198 18.5535 15.2095 18.4395C14.9993 18.3253 14.7993 18.1823 14.6095 18.0105L13.8655 18.2837C13.7065 18.3376 13.5528 18.3343 13.4045 18.2738C13.2563 18.2133 13.1407 18.1166 13.0577 17.9837L12.925 17.749C12.8403 17.6067 12.81 17.4516 12.834 17.2838C12.858 17.1159 12.9358 16.9781 13.0673 16.8702L13.6655 16.3953C13.5937 16.1363 13.5577 15.8811 13.5577 15.6298C13.5577 15.3786 13.5937 15.1235 13.6655 14.8645L13.077 14.3702C12.945 14.2651 12.8655 14.1321 12.8385 13.9713C12.8115 13.8103 12.8403 13.6587 12.925 13.5165L13.073 13.2665C13.1578 13.1335 13.273 13.0367 13.4185 12.9762C13.5638 12.9159 13.716 12.9127 13.875 12.9665L14.6095 13.2395C14.7928 13.0677 14.9913 12.9263 15.2048 12.8155C15.4183 12.7045 15.6443 12.6138 15.8828 12.5433L16.0038 11.7798C16.0346 11.6106 16.1135 11.4744 16.2405 11.3713C16.3673 11.2681 16.5153 11.2165 16.6845 11.2165H16.95C17.1192 11.2165 17.2673 11.2707 17.3943 11.379C17.5211 11.4873 17.5999 11.6261 17.6307 11.7952L17.7423 12.5433C17.9808 12.6138 18.2067 12.7071 18.4202 12.8232C18.6336 12.9392 18.8319 13.0883 19.0152 13.2703L19.7193 12.9972C19.8884 12.9331 20.0493 12.9314 20.202 12.9923C20.3545 13.0533 20.4728 13.1533 20.5568 13.2925L20.7008 13.5363C20.7847 13.6756 20.8133 13.8282 20.7865 13.9943C20.7595 14.1603 20.68 14.2958 20.548 14.401L19.9595 14.8953C20.0313 15.1358 20.0673 15.3863 20.0673 15.6468C20.0673 15.9073 20.0313 16.1568 19.9595 16.3953L20.5578 16.8702C20.6898 16.9754 20.7676 17.11 20.7913 17.274C20.8149 17.4382 20.7845 17.5914 20.7 17.7337L20.5518 17.9837C20.4684 18.1166 20.3553 18.2133 20.2125 18.2738C20.0695 18.3343 19.9185 18.3376 19.7595 18.2837L19.0152 18.0105C18.8256 18.1823 18.6256 18.3253 18.4152 18.4395C18.2051 18.5535 17.9808 18.6458 17.7423 18.7163L17.6307 19.4798C17.5999 19.6491 17.5211 19.7853 17.3943 19.8885C17.2673 19.9917 17.1192 20.0433 16.95 20.0433H16.6845C16.5153 20.0433 16.3673 19.9891 16.2405 19.8807C16.1135 19.7724 16.0346 19.6337 16.0038 19.4645ZM16.8085 17.5337C17.3323 17.5337 17.7804 17.3472 18.1528 16.9742C18.5252 16.6012 18.7115 16.1528 18.7115 15.629C18.7115 15.1052 18.525 14.6571 18.152 14.2847C17.779 13.9122 17.3306 13.726 16.8068 13.726C16.2831 13.726 15.835 13.9125 15.4625 14.2855C15.09 14.6585 14.9038 15.1069 14.9038 15.6308C14.9038 16.1544 15.0903 16.6025 15.4633 16.975C15.8363 17.3475 16.2847 17.5337 16.8085 17.5337ZM10 10.1875C10.55 10.1875 11.0208 9.99167 11.4125 9.6C11.8042 9.20833 12 8.7375 12 8.1875C12 7.6375 11.8042 7.16667 11.4125 6.775C11.0208 6.38333 10.55 6.1875 10 6.1875C9.45 6.1875 8.97917 6.38333 8.5875 6.775C8.19583 7.16667 8 7.6375 8 8.1875C8 8.7375 8.19583 9.20833 8.5875 9.6C8.97917 9.99167 9.45 10.1875 10 10.1875Z"
+      />
+    </g>
+  </svg>
+);
+export default User;
diff --git a/src/assets/icons/settings.tsx b/src/assets/icons/settings.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+const Settings = (props: any) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    {...props}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={props.fill || '#7D8998'}
+      d="M11.5 8C9.27143 8 7.5 9.77143 7.5 12C7.5 14.2286 9.27143 16 11.5 16C13.7286 16 15.5 14.2286 15.5 12C15.5 9.77143 13.7286 8 11.5 8ZM11.5 14.8571C9.9 14.8571 8.64286 13.6 8.64286 12C8.64286 10.4 9.9 9.14286 11.5 9.14286C13.1 9.14286 14.3571 10.4 14.3571 12C14.3571 13.6 13.1 14.8571 11.5 14.8571Z"
+    />
+    <path
+      fill={props.fill || '#7D8998'}
+      d="M21.2125 9.9375L19.375 9.375L18.9812 8.4375L19.9 6.8125C20.0969 6.4375 20.0312 5.9375 19.7031 5.625L18.1281 4.125C17.8 3.8125 17.275 3.75 16.8813 3.9375L15.175 4.8125L14.1906 4.4375L13.6 2.6875C13.4688 2.3125 13.075 2 12.6156 2H10.3844C9.925 2 9.53125 2.3125 9.46562 2.75L8.875 4.5C8.48125 4.5625 8.15312 4.6875 7.825 4.875L6.11875 4C5.725 3.8125 5.2 3.875 4.87188 4.1875L3.29688 5.6875C2.96875 6 2.90312 6.5 3.1 6.875L3.95312 8.4375C3.82188 8.75 3.69062 9.125 3.55938 9.4375L1.72187 10C1.32812 10.125 1 10.5 1 10.9375V13.0625C1 13.5 1.32813 13.875 1.7875 14L3.625 14.5625L4.01875 15.5L3.1 17.125C2.90312 17.5 2.96875 18 3.29688 18.3125L4.87188 19.8125C5.2 20.125 5.725 20.1875 6.11875 20L7.825 19.125L8.80937 19.5L9.4 21.3125C9.53125 21.6875 9.925 22 10.3844 22H12.6156C13.075 22 13.4688 21.6875 13.6 21.3125L14.1906 19.5L15.175 19.125L16.8813 20C17.275 20.1875 17.8 20.125 18.1281 19.8125L19.7031 18.3125C20.0312 18 20.0969 17.5 19.9 17.125L18.9812 15.5L19.375 14.5625L21.2781 14C21.6719 13.875 22 13.5 22 13.0625V10.9375C22 10.5 21.6719 10.0625 21.2125 9.9375ZM20.6875 12.875L18.325 13.5625L18.2594 13.875L17.6687 15.1875L17.4719 15.5L18.6531 17.5625L17.3406 18.8125L15.175 17.6875L14.8469 17.875C14.3875 18.125 13.9281 18.3125 13.4688 18.4375L13.1406 18.5L12.4187 20.75H10.5813L9.85938 18.5L9.53125 18.4375L8.15312 17.875L7.825 17.6875L5.65938 18.8125L4.34687 17.5625L5.52812 15.5L5.33125 15.1875C5.06875 14.75 4.87187 14.3125 4.74062 13.875L4.675 13.5625L2.3125 12.875V11.125L4.54375 10.5L4.675 10.1875C4.80625 9.6875 5.00313 9.25 5.26562 8.8125L5.4625 8.5L4.34687 6.4375L5.65938 5.1875L7.75938 6.3125L8.0875 6.125C8.54688 5.875 9.00625 5.6875 9.53125 5.5625L9.85938 5.4375L10.5813 3.25H12.4187L13.1406 5.4375L13.4688 5.5625C13.9281 5.6875 14.3875 5.875 14.8469 6.125L15.175 6.3125L17.3406 5.1875L18.6531 6.4375L17.4719 8.5L17.6687 8.8125C17.9312 9.25 18.1281 9.6875 18.2594 10.125L18.325 10.4375L20.6875 11.125V12.875Z"
+    />
+  </svg>
+);
+export default Settings;
diff --git a/src/assets/icons/success.svg b/src/assets/icons/success.svg
diff --git a/src/assets/images/airbyte.ico b/src/assets/images/airbyte.ico
diff --git a/src/assets/images/airbytelogo.webp b/src/assets/images/airbytelogo.webp
diff --git a/src/assets/images/prefect-logo-black.png b/src/assets/images/prefect-logo-black.png
diff --git a/src/assets/images/supersetlogo.png b/src/assets/images/supersetlogo.png
diff --git a/src/components/DataAnalysis/DeactivatedMsg.tsx b/src/components/DataAnalysis/DeactivatedMsg.tsx
@@ -0,0 +1,122 @@
+import { useTracking } from '@/contexts/TrackingContext';
+import { httpPost } from '@/helpers/http';
+import { Box, Button, Dialog, DialogActions, DialogTitle, Typography } from '@mui/material';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/router';
+import { useContext } from 'react';
+import { GlobalContext } from '@/contexts/ContextProvider';
+import { errorToast, successToast } from '../ToastMessage/ToastHelper';
+
+type Org = {
+  name: string;
+  slug: string;
+  airbyte_workspace_id: string;
+  viz_url: string | null;
+  viz_login_type: string | null;
+  is_demo: boolean;
+};
+
+export const DeactivatedMsg = ({
+  open,
+  setIsOpen,
+  enable_llm_requested,
+}: {
+  open: boolean;
+  setIsOpen: any;
+  enable_llm_requested: boolean;
+}) => {
+  const { data: session } = useSession();
+  const globalContext = useContext(GlobalContext);
+
+  const permissions = globalContext?.Permissions.state || [];
+  const isEnableDisabled = enable_llm_requested && !permissions.includes('can_edit_llm_settings');
+  const router = useRouter();
+  const trackAmplitudeEvent: any = useTracking();
+
+  const handleEnableButton = async () => {
+    if (permissions.includes('can_edit_llm_settings')) {
+      router.push('/settings/ai-settings');
+      return;
+    }
+    try {
+      const { success, res } = await httpPost(session, 'userpreferences/llm_analysis/request', {});
+      if (!success) {
+        errorToast('Something went wrong', [], globalContext);
+        return;
+      }
+      successToast(res, [], globalContext);
+      return;
+    } catch (error: any) {
+      console.error(error, 'error');
+      errorToast(error.message, [], globalContext);
+      return;
+    } finally {
+      router.push('/pipeline');
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      maxWidth={false}
+      PaperProps={{
+        sx: { borderRadius: '8px', padding: ' 2.3rem 3rem', width: '480px' },
+      }}
+    >
+      <DialogTitle variant="h5" fontWeight={700} sx={{ padding: '0' }}>
+        <Box display="flex" alignItems="center">
+          <Box flexGrow={1}>AI Data Analysis Deactivated</Box>
+        </Box>
+      </DialogTitle>
+      <DialogTitle flexGrow={1} sx={{ padding: '0', mt: '1.5rem' }}>
+        {permissions.includes('can_edit_llm_settings') ? (
+          <Typography sx={{ lineHeight: '26px', color: 'rgba(15, 36, 64, 0.8)' }}>
+            This feature is currently disabled. As the account manager, you can enable AI{' '}
+            <span style={{ color: 'rgba(0, 137, 123, 1)', fontWeight: 700, fontSize: '1rem' }}>
+              Data Analysis
+            </span>
+            , in the settings page to start using it.
+          </Typography>
+        ) : (
+          <Typography sx={{ lineHeight: '26px', color: 'rgba(15, 36, 64, 0.8)' }}>
+            Your account manager has disabled this feature. To use AI{' '}
+            <span style={{ color: 'rgba(0, 137, 123, 1)', fontWeight: 700, fontSize: '1rem' }}>
+              Data Analysis
+            </span>
+            , request your account manager to enable it in the settings page.
+          </Typography>
+        )}
+      </DialogTitle>
+      <DialogActions
+        sx={{
+          mt: '27px',
+          justifyContent: 'flex-start',
+          p: 0,
+        }}
+      >
+        <Button
+          onClick={() => {
+            trackAmplitudeEvent(`[Request-Enable-LLMAnalysis] Button Clicked`);
+            handleEnableButton();
+          }}
+          variant="contained"
+          sx={{ width: '148px' }}
+          disabled={isEnableDisabled}
+        >
+          {isEnableDisabled ? 'Request In Progress' : 'Enable'}
+        </Button>
+        {isEnableDisabled && (
+          <Button
+            onClick={() => {
+              router.push('/pipeline');
+            }}
+            variant="contained"
+            sx={{ width: '148px' }}
+          >
+            Cancel
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/src/components/DataAnalysis/Disclaimer.tsx b/src/components/DataAnalysis/Disclaimer.tsx
@@ -2,6 +2,9 @@ import { useTracking } from '@/contexts/TrackingContext';
 import { httpPut } from '@/helpers/http';
 import { Box, Button, Dialog, DialogActions, DialogTitle, Typography } from '@mui/material';
 import { useSession } from 'next-auth/react';
+import { errorToast, successToast } from '../ToastMessage/ToastHelper';
+import { useContext } from 'react';
+import { GlobalContext } from '@/contexts/ContextProvider';
 
 type Org = {
   name: string;
@@ -12,22 +15,53 @@ type Org = {
   is_demo: boolean;
 };
 
-export const Disclaimer = ({ open, setIsOpen }: { open: boolean; setIsOpen: any }) => {
+export const Disclaimer = ({
+  open,
+  setIsOpen,
+  isOrgPrefernce = false,
+}: {
+  open: boolean;
+  setIsOpen: any;
+  isOrgPrefernce: boolean;
+}) => {
   const { data: session } = useSession();
   const trackAmplitudeEvent: any = useTracking();
+  const globalContext = useContext(GlobalContext);
 
-  const handleOkayButton = async () => {
+  const handleUserPreference = async () => {
     try {
-      const response = await httpPut(session, 'v1/organizations/user_self', {
-        toupdate_email: session?.user?.email,
+      const { success } = await httpPut(session, 'userpreferences/', {
+        disclaimer_shown: true,
+      });
+      if (!success) {
+        errorToast('Something went wrong', [], globalContext);
+        return;
+      }
+    } catch (error: any) {
+      console.error(error, 'error');
+      errorToast(error.message, [], globalContext);
+      return;
+    } finally {
+      setIsOpen(false);
+    }
+  };
+  // isOrgPrefernce
+  const handleOrgPreference = async () => {
+    try {
+      const { success } = await httpPut(session, 'orgpreferences/llm_approval', {
         llm_optin: true,
       });
-      if (response && response.email) {
-        setIsOpen(false);
+      if (!success) {
+        errorToast('Something went wrong', [], globalContext);
+        return;
       }
-    } catch (error) {
-      console.log(error, 'error');
+      successToast('AI analysis feature is now enabled', [], globalContext);
+    } catch (error: any) {
+      console.error(error, 'error');
+      errorToast(error.message, [], globalContext);
       return;
+    } finally {
+      setIsOpen(false);
     }
   };
 
@@ -64,9 +98,13 @@ export const Disclaimer = ({ open, setIsOpen }: { open: boolean; setIsOpen: any
       >
         <Button
           onClick={() => {
-            trackAmplitudeEvent(`[Accept-llmDisclaimer-LLMSummary] Button Clicked`);
-
-            handleOkayButton();
+            if (isOrgPrefernce) {
+              handleOrgPreference();
+              trackAmplitudeEvent('[AI-feature-Enabled] Button clicked');
+            } else {
+              trackAmplitudeEvent(`[Accept-llmDisclaimer-LLMSummary] Button Clicked`);
+              handleUserPreference();
+            }
           }}
           variant="contained"
           sx={{ width: '5rem' }}