Login Fixed

src/@types/parseable/api/about.ts

@@ -0,0 +1,11 @@
+export type AboutData ={
+    commit : string;
+    deploymentId : string;
+    latestVersion : string;
+    license : string;
+    mode : string;
+    staging : string;
+    store : string;
+    updateAvailable : boolean;
+    version : string;
+}

src/api/about.ts

@@ -0,0 +1,8 @@
+
+import { AboutData } from "@/@types/parseable/api/about";
+import { Axios } from "./axios";
+import { ABOUT_URL } from "./constants";
+
+export const getCurrentAbout = () => {
+    return Axios().get<AboutData>(ABOUT_URL);
+}

src/api/auth.ts

@@ -1,10 +1,10 @@
 import { Axios } from './axios';
-import { HEALTH_LIVENESS_URL } from './constants';
+import {  LOG_STREAM_LIST_URL } from './constants';
 
 export const loginIn = (username: string, password: string) => {
 	const credentials = btoa(`${username}:${password}`);
 
-	return Axios().get(HEALTH_LIVENESS_URL, {
+	return Axios().get(LOG_STREAM_LIST_URL, {
 		headers: {
 			Authorization: `Basic ${credentials}`,
 		},

src/api/constants.ts

@@ -8,4 +8,4 @@ export const LOG_STREAMS_ALERTS_URL = (streamName: string) => `${LOG_STREAM_LIST
 export const LOG_STREAMS_RETRNTION_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/retention`;
 export const LOG_STREAMS_STATS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/stats`;
 export const DELETE_STREAMS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}`;
-
+export const ABOUT_URL = `${API_V1}/about`;

src/components/Navbar/index.tsx

@@ -3,12 +3,9 @@ import {
 	Navbar as MantineNavbar,
 	NavLink,
 	Select,
-	Anchor,
-	Card,
 	Box,
 	Modal,
 	Text,
-	Image,
 	Button,
 	TextInput,
 } from '@mantine/core';
@@ -17,18 +14,15 @@ import {
 	IconReportAnalytics,
 	IconFileAlert,
 	IconReload,
-	IconHelpCircle,
 	IconLogout,
 	IconUser,
 	IconBinaryTree2,
 	IconTableShortcut,
 	IconSettings,
 	IconTrash,
+	IconInfoCircle,
 } from '@tabler/icons-react';
 import { FC, useEffect } from 'react';
-import docImage from '@/assets/images/doc.webp';
-import githubLogo from '@/assets/images/github-logo.webp';
-import slackLogo from '@/assets/images/slack-logo.webp';
 import { useNavbarStyles } from './styles';
 import { useParams } from 'react-router-dom';
 import { useGetLogStreamList } from '@/hooks/useGetLogStreamList';
@@ -40,6 +34,7 @@ import dayjs from 'dayjs';
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { LOGIN_ROUTE } from '@/constants/routes';
 import { useDeleteLogStream } from '@/hooks/useDeleteLogStream';
+import InfoModal from './infoModal';
 
 const links = [
 	{ icon: IconZoomCode, label: 'Query', pathname: '/query' },
@@ -70,7 +65,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 
 	const [disableLink, setDisableLink] = useMountedState(false);
 	const [isSubNavbarOpen, setIsSubNavbarOpen] = useMountedState(false);
-	const [opened, { open, close }] = useDisclosure(false);
+	const [opened, { open, close }] = useDisclosure(true);
 	const [openedDelete, { close: closeDelete, open: openDelete }] = useDisclosure();
 
 	const { data: streams, error, getData, resetData: resetStreamArray } = useGetLogStreamList();
@@ -177,8 +172,6 @@ const Navbar: FC<NavbarProps> = (props) => {
 		streamsBtn,
 		lowerContainer,
 		actionBtn,
-		helpTitle,
-		helpDescription,
 		userBtn,
 	} = classes;
 	return (
@@ -237,8 +230,8 @@ const Navbar: FC<NavbarProps> = (props) => {
 			<MantineNavbar.Section className={lowerContainer}>
 				<NavLink label={username} icon={<IconUser size="1.3rem" stroke={1.3} />} className={userBtn} component="a" />
 				<NavLink
-					label="Help"
-					icon={<IconHelpCircle size="1.3rem" stroke={1.3} />}
+					label="About"
+					icon={<IconInfoCircle size="1.3rem" stroke={1.3} />}
 					className={actionBtn}
 					component="a"
 					onClick={open}
@@ -275,61 +268,11 @@ const Navbar: FC<NavbarProps> = (props) => {
 					</Button>
 				</Box>
 			</Modal>
-			<Modal withinPortal opened={opened} onClose={close} withCloseButton={false} size="sm" centered>
-				<Text className={helpTitle}>Need any help?</Text>
-				<Text className={helpDescription}>Here you can find useful resources and information.</Text>
-				<Box>
-					{helpResources.map((data) => (
-						<HelpCard key={data.title} data={data} />
-					))}
-				</Box>
-			</Modal>
+			<InfoModal opened={opened} close={close}/>
 		</MantineNavbar>
 	);
 };
 
-const helpResources = [
-	{
-		image: slackLogo,
-		title: 'Slack',
-		description: 'Connect with us',
-		href: 'https://launchpass.com/parseable',
-	},
-	{
-		image: githubLogo,
-		title: 'GitHub',
-		description: 'Find resources',
-		href: 'https://github.com/parseablehq/parseable',
-	},
-	{
-		image: docImage,
-		title: 'Documentation',
-		description: 'Learn more',
-		href: 'https://www.parseable.io/docs/introduction',
-	},
-];
-
-type HelpCardProps = {
-	data: (typeof helpResources)[number];
-};
-
-const HelpCard: FC<HelpCardProps> = (props) => {
-	const { data } = props;
 
-	const { classes } = useNavbarStyles();
-	const { helpCard, helpCardTitle, helpCardDescription } = classes;
-
-	return (
-		<Anchor underline={false} href={data.href} target="_blank">
-			<Card className={helpCard}>
-				<Box>
-					<Text className={helpCardTitle}>{data.title}</Text>
-					<Text className={helpCardDescription}>{data.description}</Text>
-				</Box>
-				<Image maw={45} src={data.image} alt={data.title} />
-			</Card>
-		</Anchor>
-	);
-};
 
 export default Navbar;

src/components/Navbar/infoModal.tsx

@@ -0,0 +1,159 @@
+import {  Anchor, Box, Image, Modal, Table, Text, Tooltip } from '@mantine/core';
+import { FC, useEffect } from 'react';
+import { useInfoModalStyles } from './styles';
+import docImage from '@/assets/images/doc.webp';
+import githubLogo from '@/assets/images/github-logo.webp';
+import slackLogo from '@/assets/images/slack-logo.webp';
+import { useGetAbout } from '@/hooks/useGetAbout';
+
+const helpResources = [
+	{
+		image: slackLogo,
+		title: 'Slack',
+		description: 'Connect with us',
+		href: 'https://launchpass.com/parseable',
+	},
+	{
+		image: githubLogo,
+		title: 'GitHub',
+		description: 'Find resources',
+		href: 'https://github.com/parseablehq/parseable',
+	},
+	{
+		image: docImage,
+		title: 'Documentation',
+		description: 'Learn more',
+		href: 'https://www.parseable.io/docs/introduction',
+	},
+];
+
+type HelpCardProps = {
+	data: (typeof helpResources)[number];
+};
+
+const HelpCard: FC<HelpCardProps> = (props) => {
+	const { data } = props;
+
+	const { classes } = useInfoModalStyles();
+	const { HelpIconBox, helpToolip } = classes;
+
+	return (
+		<Box className={HelpIconBox}>
+			<Anchor underline={false} href={data.href} target="_blank" className={helpToolip}>
+				<Tooltip label={data.description} position="bottom" withArrow>
+					<Image maw={45} src={data.image} alt={data.title} />
+				</Tooltip>
+			</Anchor>
+		</Box>
+	);
+};
+
+type InfoModalProps = {
+	opened: boolean;
+	close(): void;
+};
+
+const InfoModal: FC<InfoModalProps> = (props) => {
+	const { opened, close } = props;
+
+	const { data, loading, error, getAbout, resetData } = useGetAbout();
+	useEffect(() => {
+		if (data) {
+			resetData();
+		}
+		getAbout();
+		return () => {
+			resetData();
+		};
+	}, []);
+
+	const { classes } = useInfoModalStyles();
+	const {
+		container,
+		innerContainer,
+		infoModal,
+		helpTitle,
+		helpDescription,
+		aboutText,
+		aboutTitle,
+		aboutDescription,
+		helpIconContainer,
+	} = classes;
+
+	return (
+		<Modal
+			className={infoModal}
+			opened={opened}
+			onClose={close}
+			withinPortal
+			withCloseButton={false}
+			size="xl"
+			centered>
+			<Box className={container}>
+				<Box className={innerContainer}>
+				<Text className={aboutTitle}>About</Text>
+					{error ? (
+						<Text className={aboutDescription} >Error...</Text>
+					) : loading ? (
+						<Text className={aboutDescription}>Loading...</Text>
+					) : data ? (
+						<>
+							<Text className={aboutDescription} id="info-modal-description">
+								Here you can find useful information about your Parseable instance.
+							</Text>
+
+							<Table highlightOnHover withBorder>
+								<tbody className={aboutText}>
+									<tr>
+										<td>Commit</td>
+										<td>{data.commit}</td>
+									</tr>
+									<tr>
+										<td>Deployment Id</td>
+										<td>{data.deploymentId}</td>
+									</tr>
+									<tr>
+										<td>Latest Version</td>
+										<td>{data.latestVersion}</td>
+									</tr>
+									<tr>
+										<td>License</td>
+										<td>{data.license}</td>
+									</tr>
+									<tr>
+										<td>Mode</td>
+										<td>{data.mode}</td>
+									</tr>
+									<tr>
+										<td>Staging</td>
+										<td>{data.staging}</td>
+									</tr>
+									<tr>
+										<td>Store</td>
+										<td>{data.store}</td>
+									</tr>
+									<tr>
+										<td>Version</td>
+										<td>{data.version}</td>
+									</tr>
+								</tbody>
+							</Table>
+						</>
+					) : null}
+				</Box>
+				<Box className={innerContainer}>
+					<Text className={helpTitle}>Need any help?</Text>
+					<Text className={helpDescription}>Here you can find useful resources and information.</Text>
+
+					<Box mt={12} className={helpIconContainer}>
+						{helpResources.map((data) => (
+							<HelpCard key={data.title} data={data} />
+						))}
+					</Box>
+				</Box>
+			</Box>
+		</Modal>
+	);
+};
+
+export default InfoModal;