Merge pull request #159 from snowball-tools/andrehadianto/T-4968-qol-and-chores

[T-4968] qol and chores

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',

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 */}
         <div className={theme.content()}>
+          <Tooltip content={project.name}>
             <p className={theme.title()}>{project.name}</p>
+          </Tooltip>
           <p className={theme.description()}>
             {project.deployments[0]?.domain?.name ?? 'No domain'}
           </p>

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,19 +160,17 @@ export const RepositoryList = ({ octokit }: RepositoryListProps) => {
           ))}
         </div>
       ) : (
-        <div className="mt-4 p-6 flex items-center justify-center">
-          <div className="text-center">
-            <Typography placeholder={''}>No repository found</Typography>
+        <div className="mt-4 p-6 flex flex-col gap-4 items-center justify-center">
+          <p className="text-elements-high-em font-sans">No repository found</p>
           <Button
-              className="rounded-full mt-5"
+            variant="tertiary"
+            leftIcon={<RefreshIcon />}
             size="sm"
             onClick={handleResetFilters}
-              placeholder={''}
           >
-              ^ Reset filters
+            Reset filters
           </Button>
         </div>
-        </div>
       )}
     </section>
   );

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 = ({
         </Button>
       </div>
       <div className="mt-5">
-        {activities.map((activity, index) => {
-          return <ActivityCard activity={activity} key={`activity-${index}`} />;
-        })}
+        {isLoading ? (
+          <div className="grid place-content-center mt-10">
+            <LoadingIcon className="animate-spin" />
+          </div>
+        ) : (
+          activities.map((activity, index) => {
+            return (
+              <ActivityCard activity={activity} key={`activity-${index}`} />
+            );
+          })
+        )}
       </div>
     </div>
   );

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

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<GitCommitWithBranch[]>([]);
+  const [fetchingActivities, setFetchingActivities] = useState(true);
   const [liveDomain, setLiveDomain] = useState<Domain>();
 
   const client = useGQLClient();
@@ -39,6 +40,7 @@ const OverviewTabPanel = () => {
   const { project } = useOutletContext<OutletContextType>();
 
   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 = () => {
           </p>
         )}
       </div>
-      <Activity activities={activities} />
+      <Activity activities={activities} isLoading={fetchingActivities} />
     </div>
   );
 };