diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts index db662ebc..117a2cde 100644 --- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts +++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts @@ -9,16 +9,18 @@ export const projectCardTheme = tv({ 'flex', 'flex-col', 'group', + 'cursor-pointer', ], upperContent: ['px-4', 'py-4', 'flex', 'items-start', 'gap-3', 'relative'], - content: ['flex', 'flex-col', 'gap-1', 'flex-1'], + content: ['flex', 'flex-col', 'gap-1', 'flex-1', 'overflow-hidden'], title: [ 'text-sm', 'font-medium', 'text-elements-high-em', 'tracking-[-0.006em]', + 'truncate', ], - description: ['text-xs', 'text-elements-low-em'], + description: ['text-xs', 'text-elements-low-em', 'truncate'], icons: ['flex', 'items-center', 'gap-1'], lowerContent: [ 'transition-colors', diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx index 1c91e51d..5a0ff9b5 100644 --- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx +++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx @@ -1,12 +1,18 @@ +import { + Menu, + MenuHandler, + MenuItem, + MenuList, +} from '@material-tailwind/react'; import React, { ComponentPropsWithoutRef, MouseEvent, useCallback, } from 'react'; -import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme'; +import { useNavigate } from 'react-router-dom'; import { Project } from 'gql-client'; +import { Avatar } from 'components/shared/Avatar'; import { Button } from 'components/shared/Button'; -import { WavyBorder } from 'components/shared/WavyBorder'; import { BranchIcon, ClockIcon, @@ -14,16 +20,11 @@ import { HorizontalDotIcon, WarningDiamondIcon, } from 'components/shared/CustomIcon'; +import { Tooltip } from 'components/shared/Tooltip'; +import { WavyBorder } from 'components/shared/WavyBorder'; import { relativeTimeMs } from 'utils/time'; -import { useNavigate } from 'react-router-dom'; -import { Avatar } from 'components/shared/Avatar'; import { getInitials } from 'utils/geInitials'; -import { - Menu, - MenuHandler, - MenuItem, - MenuList, -} from '@material-tailwind/react'; +import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme'; export interface ProjectCardProps extends ComponentPropsWithoutRef<'div'>, @@ -72,7 +73,9 @@ export const ProjectCard = ({ /> {/* Title and website */}
-

{project.name}

+ +

{project.name}

+

{project.deployments[0]?.domain?.name ?? 'No domain'}

diff --git a/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx b/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx index 14af57e6..5b96ce37 100644 --- a/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx +++ b/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx @@ -3,17 +3,17 @@ import { Octokit } from 'octokit'; import assert from 'assert'; import { useDebounce } from 'usehooks-ts'; -import { Button, Typography } from '@material-tailwind/react'; - import { ProjectRepoCard } from 'components/projects/create/ProjectRepoCard'; import { GitOrgDetails, GitRepositoryDetails } from 'types'; import { ChevronGrabberHorizontal, GithubIcon, + RefreshIcon, SearchIcon, } from 'components/shared/CustomIcon'; import { Select, SelectOption } from 'components/shared/Select'; import { Input } from 'components/shared/Input'; +import { Button } from 'components/shared/Button'; const DEFAULT_SEARCHED_REPO = ''; const REPOS_PER_PAGE = 5; @@ -160,18 +160,16 @@ export const RepositoryList = ({ octokit }: RepositoryListProps) => { ))}
) : ( -
-
- No repository found - -
+
+

No repository found

+
)} diff --git a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx index 252d85a1..38b4d959 100644 --- a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx +++ b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx @@ -4,10 +4,13 @@ import { GitCommitWithBranch } from 'types'; import { Heading } from 'components/shared/Heading'; import ActivityCard from './ActivityCard'; import { Button } from 'components/shared/Button'; +import { LoadingIcon } from 'components/shared/CustomIcon'; export const Activity = ({ + isLoading, activities, }: { + isLoading: boolean; activities: GitCommitWithBranch[]; }) => { return ( @@ -19,9 +22,17 @@ export const Activity = ({
- {activities.map((activity, index) => { - return ; - })} + {isLoading ? ( +
+ +
+ ) : ( + activities.map((activity, index) => { + return ( + + ); + }) + )}
); diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts index 783d242b..7fe66671 100644 --- a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts +++ b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts @@ -71,7 +71,7 @@ export const tabsTheme = tv({ 'gap-5', 'border-b', 'border-transparent', - 'overflow-scroll', + 'overflow-auto', // Horizontal – default 'data-[orientation=horizontal]:border-border-interactive/10', // Vertical diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx index c1337045..40975555 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx @@ -32,6 +32,7 @@ const OverviewTabPanel = () => { const { octokit } = useOctokit(); const navigate = useNavigate(); const [activities, setActivities] = useState([]); + const [fetchingActivities, setFetchingActivities] = useState(true); const [liveDomain, setLiveDomain] = useState(); const client = useGQLClient(); @@ -39,6 +40,7 @@ const OverviewTabPanel = () => { const { project } = useOutletContext(); useEffect(() => { + setFetchingActivities(true); // TODO: Save repo commits in DB and avoid using GitHub API in frontend // TODO: Figure out fetching latest commits for all branches const fetchRepoActivity = async () => { @@ -91,6 +93,8 @@ const OverviewTabPanel = () => { // TODO: Show warning in activity section on request error console.log(err.message); + } finally { + setFetchingActivities(false); } }; @@ -217,7 +221,7 @@ const OverviewTabPanel = () => {

)} - + ); };