Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update NewChatWarning.tsx

This commit is contained in:
Nate Kelley 2025-09-26 10:51:02 -06:00
parent 77012027ba
commit 4ceb412e37
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 70 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/api/buster_rest/users/useGetUserInfo.ts
View File

@ -67,13 +67,6 @@ export const useIsUserRegistered = () => {
const userBasicInfo = useGetUserBasicInfo();
const isAnonymousUser = useIsAnonymousUser();
const isUserRegistered = !!userOrganization?.id && !!userBasicInfo?.name && !isAnonymousUser;
console.log(
'isUserRegistered',
userOrganization?.id,
userBasicInfo?.name,
isAnonymousUser,
userBasicInfo
);
return isUserRegistered;
};

78
apps/web/src/controllers/HomePage/NewChatWarning.tsx
View File

@ -1,6 +1,8 @@
import type { UserOrganizationRole } from '@buster/server-shared/organization';
import { Link } from '@tanstack/react-router';
import React from 'react';
import { useListDatasources } from '@/api/buster_rest/data_source';
import { useGetDatasets } from '@/api/buster_rest/datasets';
import { Button } from '@/components/ui/buttons';
import { AlertWarning, ArrowUpRight, CircleCheck } from '@/components/ui/icons';
import { Paragraph, Text } from '@/components/ui/typography';
@ -25,12 +27,12 @@ export const NewChatWarning = React.memo(
const progressPercentage = (progress / 2) * 100;
return (
<div className="flex flex-col rounded border border-gray-200 bg-white p-6 shadow-sm">
<div className="flex flex-col rounded border bg-white p-6 shadow-sm">
<div className="mb-2 flex items-center justify-between">
<Text className="text-xl font-medium text-gray-800">Setup Checklist</Text>
<div className="flex items-center gap-2">
<div className="text-sm font-medium text-gray-500">{progress}/2 completed</div>
<div className="h-2 w-20 rounded-full bg-gray-100">
<div className="h-2 w-20 rounded-full bg-item-hover">
<div
className="h-full rounded-full bg-gray-600 transition-all duration-500 ease-in-out"
style={{ width: `${progressPercentage}%` }}
@ -66,7 +68,7 @@ export const NewChatWarning = React.memo(
<div
className={cn(
'mt-5 flex items-center rounded border p-4',
allCompleted ? 'border-gray-200 bg-gray-50' : 'border-gray-200 bg-gray-50'
allCompleted ? ' bg-gray-50' : ' bg-gray-50'
)}
>
<div
@ -115,13 +117,13 @@ const SetupItem = ({ number, status, title, description, link, linkText }: Setup
<div
className={cn(
'group relative flex items-start space-x-4 rounded border p-4 transition-all duration-200 hover:shadow-sm',
status ? 'border-gray-400/30 bg-gray-50' : 'border-gray-200'
status ? 'border-gray-400/30 bg-gray-50' : ''
)}
>
<div
className={cn(
'text-md flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full font-medium',
status ? 'bg-gray-200 text-gray-700' : 'bg-gray-100 text-gray-500'
status ? 'bg-gray-200 text-gray-700' : 'bg-item-hover text-gray-500'
)}
>
{status ? <CircleCheck title="Complete" /> : number}
@ -159,18 +161,59 @@ const SetupItem = ({ number, status, title, description, link, linkText }: Setup
);
};
interface ResourceSectionProps {
title: string;
items?: Array<{ id: string; name: string }>;
emptyMessage: string;
pluralName: string;
}
const ResourceSection = ({ title, items, emptyMessage, pluralName }: ResourceSectionProps) => {
const itemCount = items?.length || 0;
return (
<div className="rounded border bg-gray-50 p-3">
<div className="flex items-center justify-between mb-2">
<Text className="text-sm font-medium text-gray-700">{title}</Text>
<span className="rounded bg-item-select px-2 py-0.5 text-xs font-medium text-gray-600 border">
{itemCount} available
</span>
</div>
{items && items.length > 0 ? (
<div className="space-y-1">
{items.slice(0, 3).map((item) => (
<div key={item.id} className="flex items-center text-sm text-gray-600">
<div className="h-1.5 w-1.5 rounded-full bg-gray-400 mr-2" />
{item.name}
</div>
))}
{items.length > 3 && (
<Text className="text-xs text-gray-500">
+{items.length - 3} more {pluralName}
</Text>
)}
</div>
) : (
<Text className="text-sm text-gray-500">{emptyMessage}</Text>
)}
</div>
);
};
interface ContactAdminCardProps {
userRole?: UserOrganizationRole;
}
const ContactAdminCard = ({ userRole }: ContactAdminCardProps) => {
const roleLabel = userRole ? translateRole(userRole) : 'User';
const { data: datasets = [] } = useGetDatasets();
const { data: datasources = [] } = useListDatasources();
return (
<div className="flex flex-col rounded border border-gray-200 bg-white p-6">
<div className="flex flex-col rounded border bg-white p-6">
<div className="mb-4 flex items-center justify-between">
<Text className="text-xl font-medium text-gray-800">Contact Admin Required</Text>
<div className="rounded bg-gray-100 px-3 py-1 border">
<div className="rounded bg-item-hover px-3 py-1 border">
<Text className="text-sm font-medium text-gray-700">{roleLabel}</Text>
</div>
</div>
@ -180,7 +223,7 @@ const ContactAdminCard = ({ userRole }: ContactAdminCardProps) => {
</Paragraph>
<div className="space-y-4">
<div className="rounded border border-gray-200 bg-gray-50 p-4">
<div className="rounded border bg-gray-50 p-4">
<div className="flex items-start space-x-3">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-200">
<Text className="text-sm font-medium text-gray-700">
@ -201,6 +244,25 @@ const ContactAdminCard = ({ userRole }: ContactAdminCardProps) => {
</div>
</div>
</div>
{/* Available Resources */}
<div className="space-y-3 max-h-[500px] overflow-y-auto">
<Paragraph className="text-sm font-medium text-gray-800">Your Current Access</Paragraph>
<ResourceSection
title="Datasets"
items={datasets}
emptyMessage="No datasets available"
pluralName="datasets"
/>
<ResourceSection
title="Data Sources"
items={datasources}
emptyMessage="No data sources available"
pluralName="data sources"
/>
</div>
</div>
</div>
);