cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

Merge pull request #138 from snowball-tools/ayungavis/T-4911-create-project-import-a-repository-section

Browse Source 
[T-4911: feat] Re-styling and refactor create project import a repository section
This commit is contained in:
Wahyu Kurniawan 2024-03-05 22:41:43 +07:00 committed by GitHub
commit 3e42899f2e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 197 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/frontend/src/components/projects/create/ProjectRepoCard.tsx
View File

@ -1,81 +0,0 @@
import React, { useCallback } from 'react';
import toast from 'react-hot-toast';
import { useNavigate, useParams } from 'react-router-dom';
import { Chip, IconButton, Spinner } from '@material-tailwind/react';
import { relativeTimeISO } from '../../../utils/time';
import { GitRepositoryDetails } from '../../../types';
import { useGQLClient } from '../../../context/GQLClientContext';
import { GithubIcon, LockIcon } from 'components/shared/CustomIcon';
interface ProjectRepoCardProps {
repository: GitRepositoryDetails;
}
const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
const client = useGQLClient();
const navigate = useNavigate();
const [isLoading, setIsLoading] = React.useState(false);
const { orgSlug } = useParams();
const createProject = useCallback(async () => {
if (!repository) {
return;
}
setIsLoading(true);
const { addProject } = await client.addProject(orgSlug!, {
name: `${repository.owner!.login}-${repository.name}`,
prodBranch: repository.default_branch!,
repository: repository.full_name,
// TODO: Compute template from repo
template: 'webapp',
});
if (Boolean(addProject)) {
setIsLoading(false);
navigate(`import?projectId=${addProject.id}`);
} else {
setIsLoading(false);
toast.error('Failed to create project');
}
}, [client, repository]);
return (
<div
className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer"
onClick={createProject}
>
<div className="w-10 h-10 bg-white rounded-md justify-center items-center gap-1.5 inline-flex">
<GithubIcon />
</div>
<div className="grow">
<div>
<span className="text-black">{repository.full_name}</span>
{repository.visibility === 'private' && (
<Chip
className="normal-case inline ml-6 font-normal text-xs text-xs bg-orange-50 border border-orange-200 text-orange-600 items-center gap-1 inline-flex"
size="sm"
value="Private"
icon={<LockIcon />}
/>
)}
</div>
<p>{repository.updated_at && relativeTimeISO(repository.updated_at)}</p>
</div>
{isLoading ? (
<Spinner className="h-4 w-4" />
) : (
<div className="hidden group-hover:block">
<IconButton size="sm" placeholder={''}>
{'>'}
</IconButton>
</div>
)}
</div>
);
};
export default ProjectRepoCard;

114
packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx Normal file
View File

@ -0,0 +1,114 @@
import React, { useCallback, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Spinner } from '@material-tailwind/react';
import { relativeTimeISO } from 'utils/time';
import { GitRepositoryDetails } from 'types';
import { useGQLClient } from 'context/GQLClientContext';
import {
ArrowRightCircleIcon,
GithubIcon,
LockIcon,
} from 'components/shared/CustomIcon';
import { Button } from 'components/shared/Button';
import { useToast } from 'components/shared/Toast';
interface ProjectRepoCardProps {
repository: GitRepositoryDetails;
}
export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
repository,
}) => {
const client = useGQLClient();
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const { orgSlug } = useParams();
const { toast, dismiss } = useToast();
const createProject = useCallback(async () => {
if (!repository || !orgSlug) {
return toast({
id: 'missing-repository-or-org-slug',
title: 'Repository or organization slug is missing',
variant: 'error',
onDismiss: dismiss,
});
}
try {
setIsLoading(true);
const { addProject } = await client.addProject(orgSlug, {
name: `${repository.owner?.login}-${repository.name}`,
prodBranch: repository.default_branch as string,
repository: repository.full_name,
// TODO: Compute template from repo
template: 'webapp',
});
if (addProject) {
navigate(`import?projectId=${addProject.id}`);
} else {
toast({
id: 'failed-to-create-project',
title: 'Failed to create project',
variant: 'error',
onDismiss: dismiss,
});
}
} catch (error) {
console.error(error);
toast({
id: 'failed-to-create-project',
title: 'Failed to create project',
variant: 'error',
onDismiss: dismiss,
});
} finally {
setIsLoading(false);
}
}, [client, repository, orgSlug, setIsLoading, navigate, toast]);
return (
<div
className="group flex items-start sm:items-center gap-3 px-3 py-3 cursor-pointer rounded-xl hover:bg-base-bg-emphasized relative"
onClick={createProject}
>
{/* Icon container */}
<div className="w-10 h-10 bg-base-bg rounded-md justify-center items-center flex">
<GithubIcon />
</div>
{/* Content */}
<div className="flex flex-1 gap-3 flex-wrap">
<div className="flex flex-col gap-1">
<p className="text-elements-high-em text-sm font-medium tracking-[-0.006em]">
{repository.full_name}
</p>
<p className="text-elements-low-em text-xs">
{repository.updated_at && relativeTimeISO(repository.updated_at)}
</p>
</div>
{repository.visibility === 'private' && (
<div className="bg-orange-50 border border-orange-200 px-2 py-1 flex items-center gap-1 rounded-lg text-xs text-orange-600 h-fit">
<LockIcon />
Private
</div>
)}
</div>
{/* Right action */}
{isLoading ? (
<Spinner className="h-4 w-4 absolute right-3" />
) : (
<Button
variant="tertiary"
size="sm"
iconOnly
className="sm:group-hover:flex hidden absolute right-3"
>
<ArrowRightCircleIcon />
</Button>
)}
</div>
);
};

1
packages/frontend/src/components/projects/create/ProjectRepoCard/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './ProjectRepoCard';

93
packages/frontend/src/components/projects/create/RepositoryList.tsx → packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
View File

@ -3,13 +3,17 @@ import { Octokit } from 'octokit';
import assert from 'assert';
import { useDebounce } from 'usehooks-ts';
import { Button, Typography, Option } from '@material-tailwind/react';
import { Button, Typography } from '@material-tailwind/react';
import SearchBar from '../../SearchBar';
import ProjectRepoCard from './ProjectRepoCard';
import { GitOrgDetails, GitRepositoryDetails } from '../../../types';
import AsyncSelect from '../../shared/AsyncSelect';
import { GithubIcon } from 'components/shared/CustomIcon';
import { ProjectRepoCard } from 'components/projects/create/ProjectRepoCard';
import { GitOrgDetails, GitRepositoryDetails } from 'types';
import {
ChevronGrabberHorizontal,
GithubIcon,
SearchIcon,
} from 'components/shared/CustomIcon';
import { Select, SelectOption } from 'components/shared/Select';
import { Input } from 'components/shared/Input';
const DEFAULT_SEARCHED_REPO = '';
const REPOS_PER_PAGE = 5;
@ -18,9 +22,9 @@ interface RepositoryListProps {
octokit: Octokit;
}
const RepositoryList = ({ octokit }: RepositoryListProps) => {
export const RepositoryList = ({ octokit }: RepositoryListProps) => {
const [searchedRepo, setSearchedRepo] = useState(DEFAULT_SEARCHED_REPO);
const [selectedAccount, setSelectedAccount] = useState('');
const [selectedAccount, setSelectedAccount] = useState<SelectOption>();
const [orgs, setOrgs] = useState<GitOrgDetails[]>([]);
// TODO: Add new type for Git user when required
const [gitUser, setGitUser] = useState<GitOrgDetails>();
@ -35,7 +39,7 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
const orgs = await octokit.rest.orgs.listForAuthenticatedUser();
setOrgs(orgs.data);
setGitUser(user.data);
setSelectedAccount(user.data.login);
setSelectedAccount({ label: user.data.login, value: user.data.login });
};
fetchUserAndOrgs();
@ -54,7 +58,7 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
let query = `${debouncedSearchedRepo} in:name fork:true`;
// Check if selected account is an organization
if (selectedAccount === gitUser.login) {
if (selectedAccount.value === gitUser.login) {
query = query + ` user:${selectedAccount}`;
} else {
query = query + ` org:${selectedAccount}`;
@ -69,7 +73,7 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
return;
}
if (selectedAccount === gitUser.login) {
if (selectedAccount.value === gitUser.login) {
const result = await octokit.rest.repos.listForAuthenticatedUser({
per_page: REPOS_PER_PAGE,
affiliation: 'owner',
@ -78,7 +82,9 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
return;
}
const selectedOrg = orgs.find((org) => org.login === selectedAccount);
const selectedOrg = orgs.find(
(org) => org.login === selectedAccount.value,
);
assert(selectedOrg, 'Selected org not found in list');
const result = await octokit.rest.repos.listForOrg({
@ -96,7 +102,7 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
const handleResetFilters = useCallback(() => {
assert(gitUser, 'Git user is not available');
setSearchedRepo(DEFAULT_SEARCHED_REPO);
setSelectedAccount(gitUser.login);
setSelectedAccount({ label: gitUser.login, value: gitUser.login });
}, [gitUser]);
const accounts = useMemo(() => {
@ -107,35 +113,52 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
return [gitUser, ...orgs];
}, [octokit, orgs, gitUser]);
const options = useMemo(() => {
return accounts.map((account) => ({
label: account.login,
value: account.login,
leftIcon: <GithubIcon />,
}));
}, [accounts]);
return (
<div className="p-4">
<div className="flex gap-2 mb-2 items-center">
<div className="basis-1/3">
<AsyncSelect
<section className="space-y-3">
{/* Dropdown and search */}
<div className="flex flex-col lg:flex-row gap-0 lg:gap-3 items-center">
<div className="lg:basis-1/3 w-full">
<Select
options={options}
placeholder="Select a repository"
value={selectedAccount}
onChange={(value) => setSelectedAccount(value!)}
>
{accounts.map((account) => (
<Option key={account.id} value={account.login}>
<div className="flex items-center gap-2 justify-start">
<GithubIcon /> {account.login}
leftIcon={selectedAccount ? <GithubIcon /> : undefined}
rightIcon={<ChevronGrabberHorizontal />}
onChange={(value) => setSelectedAccount(value as SelectOption)}
/>
</div>
</Option>
))}
</AsyncSelect>
</div>
<div className="basis-2/3 flex-grow flex items-center">
<SearchBar
<div className="basis-2/3 flex w-full flex-grow">
<Input
className="w-full"
value={searchedRepo}
onChange={(event) => setSearchedRepo(event.target.value)}
placeholder="Search for repository"
leftIcon={<SearchIcon />}
onChange={(e) => setSearchedRepo(e.target.value)}
/>
</div>
</div>
{/* Repository list */}
{Boolean(repositoryDetails.length) ? (
repositoryDetails.map((repo, key) => {
return <ProjectRepoCard repository={repo} key={key} />;
})
<div className="flex flex-col gap-2">
{repositoryDetails.map((repo, index) => (
<>
<ProjectRepoCard repository={repo} key={index} />
{/* Horizontal line */}
{index !== repositoryDetails.length - 1 && (
<div className="border-b border-border-separator/[0.06] w-full" />
)}
</>
))}
</div>
) : (
<div className="mt-4 p-6 flex items-center justify-center">
<div className="text-center">
@ -151,8 +174,6 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
</div>
</div>
)}
</div>
</section>
);
};
export default RepositoryList;

1
packages/frontend/src/components/projects/create/RepositoryList/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './RepositoryList';

6
packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx
View File

@ -55,9 +55,9 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
}, [orgSlug, dismiss, isGitAuth, navigate, template, toast]);
return (
<button
<div
className={cn(
'flex items-center gap-3 px-3 py-3 bg-base-bg-alternate hover:bg-base-bg-emphasized rounded-2xl group relative',
'flex items-center gap-3 px-3 py-3 bg-base-bg-alternate hover:bg-base-bg-emphasized rounded-2xl group relative cursor-pointer',
{
'cursor-default': template?.isComingSoon,
},
@ -86,6 +86,6 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
<ArrowRightCircleIcon />
</Button>
)}
</button>
</div>
);
};

4
packages/frontend/src/components/shared/Input/Input.theme.ts
View File

@ -8,6 +8,8 @@ export const inputTheme = tv(
'items-center',
'rounded-lg',
'relative',
'gap-2',
'w-full',
'placeholder:text-elements-disabled',
'disabled:cursor-not-allowed',
'disabled:bg-controls-disabled',
@ -27,7 +29,7 @@ export const inputTheme = tv(
'disabled:shadow-none',
'disabled:border-none',
],
icon: ['text-elements-mid-em'],
icon: ['text-elements-low-em'],
iconContainer: [
'absolute',
'inset-y-0',

4
packages/frontend/src/components/shared/Input/Input.tsx
View File

@ -87,12 +87,12 @@ export const Input = ({
);
return (
<div className="space-y-2">
<div className="flex flex-col gap-2 w-full">
{renderLabels}
<div className={containerCls({ class: className })}>
{leftIcon && renderLeftIcon}
<input
className={cn(inputCls({ class: 'w-80' }), {
className={cn(inputCls(), {
'pl-10': leftIcon,
})}
{...props}

4
packages/frontend/src/components/shared/Select/Select.theme.ts
View File

@ -85,7 +85,7 @@ export const selectTheme = tv({
size: {
md: {
container: ['min-h-11'],
inputWrapper: ['min-h-11', 'text-sm', 'pl-4', 'pr-4', 'py-1'],
inputWrapper: ['min-h-11', 'text-sm', 'pl-4', 'pr-4'],
icon: ['h-[18px]', 'w-[18px]'],
helperText: 'text-sm',
helperIcon: ['h-5', 'w-5'],
@ -93,7 +93,7 @@ export const selectTheme = tv({
},
sm: {
container: ['min-h-8'],
inputWrapper: ['min-h-8', 'text-xs', 'pl-3', 'pr-3', 'py-0.5'],
inputWrapper: ['min-h-8', 'text-xs', 'pl-3', 'pr-3'],
icon: ['h-4', 'w-4'],
helperText: 'text-xs',
helperIcon: ['h-4', 'w-4'],

35
packages/frontend/src/components/shared/Select/Select.tsx
View File

@ -3,7 +3,6 @@ import React, {
useState,
ComponentPropsWithoutRef,
useMemo,
useCallback,
MouseEvent,
useRef,
useEffect,
@ -135,7 +134,9 @@ export const Select = ({
const theme = selectTheme({ size, error, variant, orientation });
const [inputValue, setInputValue] = useState('');
const [selectedItem, setSelectedItem] = useState<SelectOption | null>(null);
const [selectedItem, setSelectedItem] = useState<SelectOption | null>(
(value as SelectOption) || null,
);
const [dropdownOpen, setDropdownOpen] = useState(false);
const [dropdownPosition, setDropdownPosition] = useState<'top' | 'bottom'>(
'bottom',
@ -166,22 +167,6 @@ export const Select = ({
}
}, [dropdownOpen]); // Re-calculate whenever the dropdown is opened
useEffect(() => {
// If multiple selection is enabled, ensure the internal state is an array
if (multiple) {
if (Array.isArray(value)) {
// Directly use the provided array
setSelectedItems(value);
} else {
// Reset or set to empty array if the value is not an array
setSelectedItems([]);
}
} else {
// For single selection, directly set the selected item
setSelectedItem(value as SelectOption);
}
}, [value, multiple]);
const handleSelectedItemChange = (selectedItem: SelectOption | null) => {
setSelectedItem(selectedItem);
setInputValue(selectedItem ? selectedItem.label : '');
@ -194,9 +179,9 @@ export const Select = ({
addSelectedItem,
removeSelectedItem,
selectedItems,
setSelectedItems,
reset,
} = useMultipleSelection<SelectOption>({
selectedItems: multiple ? (value as SelectOption[]) : [],
onSelectedItemsChange: multiple
? undefined
: ({ selectedItems }) => {
@ -234,6 +219,7 @@ export const Select = ({
openMenu,
} = useCombobox({
items: filteredItems,
selectedItem: multiple ? null : (value as SelectOption) || null,
// @ts-expect-error – there are two params but we don't need the second one
isItemDisabled: (item) => item.disabled,
onInputValueChange: ({ inputValue = '' }) => setInputValue(inputValue),
@ -265,16 +251,12 @@ export const Select = ({
setInputValue('');
}
},
selectedItem: multiple ? null : selectedItem,
// TODO: Make the input value empty when the dropdown is open, has a value, it is not multiple, and searchable
itemToString: (item) => (item && !multiple ? item.label : ''),
});
const isSelected = useCallback(
(item: SelectOption) =>
multiple ? selectedItems.includes(item) : selectedItem === item,
[selectedItems, selectedItem, multiple],
);
const isSelected = (item: SelectOption) =>
multiple ? selectedItems.includes(item) : selectedItem === item;
const handleClear = (e: MouseEvent<SVGSVGElement, globalThis.MouseEvent>) => {
e.stopPropagation();
@ -336,6 +318,7 @@ export const Select = ({
const isMultipleHasValue = multiple && selectedItems.length > 0;
const isMultipleHasValueButNotSearchable =
multiple && !searchable && selectedItems.length > 0;
const displayPlaceholder = useMemo(() => {
if (hideValues && isMultipleHasValue) {
return `${selectedItems.length} selected`;
@ -391,6 +374,8 @@ export const Select = ({
'w-6': isMultipleHasValueButNotSearchable && !hideValues,
// Add margin to the X icon
'ml-6': isMultipleHasValueButNotSearchable && clearable,
// Add padding if there's a left icon
'pl-7': leftIcon,
},
)}
/>

8
packages/frontend/src/pages/org-slug/projects/create/index.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import templates from 'assets/templates';
import RepositoryList from 'components/projects/create/RepositoryList';
import { RepositoryList } from 'components/projects/create/RepositoryList';
import ConnectAccount from 'components/projects/create/ConnectAccount';
import { useOctokit } from 'context/OctokitContext';
import { Heading } from 'components/shared/Heading';
@ -13,8 +13,8 @@ const NewProject = () => {
return isAuth ? (
<>
<div className="space-y-3">
<Heading as="h3" className="font-medium text-lg">
Start with template
<Heading as="h3" className="font-medium text-lg pl-1">
Start with a template
</Heading>
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
{templates.map((template) => {
@ -28,7 +28,7 @@ const NewProject = () => {
})}
</div>
</div>
<Heading as="h3" className="font-medium text-lg mt-10">
<Heading as="h3" className="font-medium text-lg mt-10 pl-1 mb-3">
Import a repository
</Heading>
<RepositoryList octokit={octokit} />