Commit Graph

531 Commits

Author SHA1 Message Date
Vivian Phung
4a78eb13f6
fix: ProjectSearchBarDialog (search small screen) Suggestions once (#223)
Refactor the rendering logic of the suggestion list in `ProjectSearchBarDialog` component. This change simplifies the conditional rendering by restructuring the JSX to be more readable and maintainable. Now, the 'Suggestions' label is rendered once if there are items, and the items are mapped afterward.

---
2024-06-24 18:54:32 -04:00
Vivian Phung
41bcb2e7d0
fix: ProjectSearchBarDialog suppressRefError (#222)
This PR resolves issues with the Project Search Bar component where `getMenuProps` was causing reference errors. By adding `suppressRefError: true` to `getMenuProps` in both `ProjectSearchBar` and `ProjectSearchBarDialog`, the warnings are suppressed.

---
2024-06-24 18:51:31 -04:00
Vivian Phung
f981f1a3f6
fix(ProjectSearchBarDialog): getMenuProps error (#221)
- Replaced `useDebounce` with `useDebounceValue` for better type inference and simplicity
- Added `getMenuProps` to `useCombobox` to support better accessibility and usability
- Minor style tweak to improve `ProjectSearch` header hover effect
- Created Storybook stories for the `ProjectSearchBar` component

---
2024-06-24 18:48:32 -04:00
Vivian Phung
dee84f18cb
feat: dynamic project success page and update links (#220)
### TL;DR

Integrates project data fetching for dynamic subdomain display on the Project Deployment Success page and the OverviewTabPanel.

### What changed?

- Updated `Id.tsx` to fetch project data and dynamically display project's subdomain after deployment.
- Modified `Overview.tsx` to make project's subdomain a clickable link.

### How to test?

1. Deploy a new project and check the deployment success page for correct subdomain display.
2. Open a project's overview tab and click the subdomain link to ensure it navigates correctly.

### Why make this change?

Improves user experience by displaying the actual subdomain and making it clickable, ensuring users can conveniently verify their deployment and access project domain.

---
2024-06-24 18:44:34 -04:00
Vivian Phung
44015d5451
feat(ui): loading spinner on project creation (#219)
### TL;DR
This pull request adds a loading icon to the 'Deploy' button in the project template creation form.

### What changed?
- Imported `LoadingIcon` from `components/shared/CustomIcon`.
- Modified the `Button` component to conditionally display the `LoadingIcon` when `isLoading` is `true`. The icon will animate by spinning.

### How to test?
1. Navigate to the project template creation form.
2. Fill in the required fields.
3. Click the 'Deploy' button.
4. Ensure the loading icon appears and spins when the button is disabled (when `isLoading` is `true`).

### Why make this change?
This change provides visual feedback to users, indicating that their action is being processed, thereby enhancing user experience.

---
2024-06-24 18:41:31 -04:00
Vivian Phung
a684743bd6
feat(template projects): generate git repo on backend (#218)
### TL;DR

- Still cretaes app if user migrates from page

The PR introduces a new `AddProjectFromTemplate` mutation to facilitate project creation using a repository template. This change centralizes the template project creation logic within the backend, improving code maintainability by removing redundant client-side code.

### What changed?
- Added `AddProjectFromTemplate` input type in `schema.gql` and corresponding TypeScript interfaces.
- Implemented `addProjectFromTemplate` resolver with error handling and Octokit integration for repository creation.
- Updated `service.ts` to include the new `addProjectFromTemplate` method.
- Created new GraphQL `Mutation` for `addProjectFromTemplate` in the GraphQL schema.
- Adjusted the client-side GQLClient to support the new mutation.
- Modified frontend to utilize the new backend mutation for project creation from a template.

### How to test?
1. Ensure your backend server is running.
2. Use a GraphQL client like Postman to call the `addProjectFromTemplate` mutation with appropriate input.
3. Verify that the new project is created using the specified template, and appropriate error messages are returned for failures.
4. Check the frontend flow for creating a project from a template to ensure it is working correctly.

### Why make this change?
This change enhances code maintainability by centralizing template project creation logic within the backend, thereby reducing redundancy and potential inconsistencies in client-side implementations.

---
2024-06-24 18:38:01 -04:00
Vivian Phung
af31fac3ee
chore(storybook): icons to correct folder (#216)
This pull request refactors several aspects of the frontend codebase focused on Storybook configurations and icon story files. It replaces `args` with `argTypes` to enhance control configurations, adds `staticDirs` for public assets in Storybook, and standardizes the titles of some icon stories.
2024-06-22 17:27:37 -04:00
Vivian Phung
f2e59c11fd
Refactor: VerifyCodeInput Component and Modify Access Code Validation (#212)
### TL;DR

Implemented the new `VerifyCodeInput` component and updated the access code validation logic.

### What changed?

1. Added a new reusable `VerifyCodeInput` component for verifying codes in a user-friendly way. This component handles paste events, input changes, and keyboard navigation.
2. Updated the backend route `/accesscode` to accept an arbitrary code for now. 
3. Incorporated the `VerifyCodeInput` component into the `AccessCode` page, replacing the generic `Input` component.
4. Updated the access code validation logic to check for a trimmed length of 5 characters instead of 6.
5. Added a slight pause for UX purposes when validating the access code on the frontend.

### How to test?

1. Go to the Access Code page.
2. Try entering an access code with various inputs (keyboard, paste, etc.) to see if it works seamlessly.
3. Verify that only a 5-digit code is considered valid.
4. Check the backend logs to ensure the validation endpoint is working as expected.

### Why make this change?

This change improves the user experience by providing a custom input component for access code verification and ensures that the access code validation meets the new requirements.

---
2024-06-21 21:13:32 -04:00
Vivian Phung
b261e7e436
Feat: Access Code Authentication Flow (#211)
## What changed?

This Pull Request introduces an access code validation feature to the authentication process. Changes encompass backend route for access code validation, new frontend components for handling access code input, and integration of the access code verification in the signup flow.

### Backend:
- Added POST `/accesscode` route in `auth.ts` for validating access codes.

### Frontend:
- Created `AccessCode` component for access code input and validation.
- Added `AccessSignUp` component that integrates access code verification before signup.
- Updated `SignUp` component to check for valid access code on mount.
- Modified `SnowballAuth` to use new `AccessSignUp` instead of `SignUp`.
- Added `verifyAccessCode` utility function for code verification API call.

## How to test?
1. Run the backend and frontend projects.
2. Navigate to the signup page. You should be prompted to enter an access code.
3. Enter the code `444444` and proceed. Any other code should display an error message.
4. Verify that valid access code routes to the signup component.

## Why make this change?

This change improves authentication by adding an extra layer of security through access code verification.
2024-06-21 21:10:31 -04:00
Vivian Phung
934aa1a26b
Refactor: Env to utils/constants (#210)
This PR centralizes all the environment variable references into a single constants file. The change includes replacing various `import.meta.env` references with imports from the new `utils/constants` module. This improves maintainability by providing a single place to manage environment variables.
2024-06-21 21:07:41 -04:00
Vivian Phung
cff9a5b2ea
[nit] DeploymentMenu dependencies cleanup (#204)
### TL;DR

This PR updates the project settings.

### What changed?

The project settings have been refactored for better organization and readability.

### How to test?

To test this change, navigate to the project settings and ensure all options are functioning as expected.

### Why make this change?

This change was made to improve the user experience when navigating through the project settings.

---
2024-06-20 00:40:32 -04:00
Vivian Phung
003b83ba21
Refactor: DeploymentMenu uses toast component (#203)
### TL;DR

This PR includes updates to the project settings.

### What changed?

The project settings have been refactored for better usability and consistency with other components.

### How to test?

To test this change, navigate to the project settings and ensure all options are working as expected.

### Why make this change?

This change was made to improve the user experience and maintain consistency across the application.

---
2024-06-20 00:36:43 -04:00
Vivian Phung
82a1c151a8
Refactor: AssignDomainDialog uses Modal component (#202)
### TL;DR

This PR includes updates to the project settings.

### What changed?

The project settings have been refactored for better organization and readability.

### How to test?

To test this change, navigate to the project settings and ensure all options are functioning as expected.

### Why make this change?

This change was made to improve the user experience when navigating through the project settings.

---
2024-06-20 00:32:41 -04:00
Gilbert
bfb4a3f30b Revert "remove email signup for now"
This reverts commit 0e9c3a07fd.
2024-06-04 16:26:15 -05:00
Gilbert
8f7fc888a9 Log commit hash 2024-06-04 15:56:52 -05:00
Vivian Phung
0e9c3a07fd remove email signup for now 2024-06-04 15:56:52 -05:00
Vivian Phung
61e3e88a6c
Refactor Input and SearchBar (#199)
### TL;DR

This pull request refactors the `SearchBar` and `Input` components, adding a `ref` to the former and removing an incorrect understanding of `react-hook-form` (yes, i prev "fix" the component) in the latter.

### What changed?

A ref is added to the SearchBar component for better control and handling. In the Input component, we have eliminated the usage of 'react-hook-form' and as a result, the 'register' prop is removed. This makes the component less reliant on specific libraries and more reusable.

### How to test?

Ensure that proper testing is done on the updated components. Make sure that the `SearchBar` works as expected with its ref and that Input does not depend on 'react-hook-form' anymore.

### Why make this change?

This change was made to improve the functionality of the `SearchBar` and the flexibility of the Input component, making them more effective and reusable respectively. The changes also align with the current code quality standards and best practices.
2024-05-22 15:06:50 -04:00
Vivian Phung
7b5ba1a5d0
correct suppressRefError (#198)
### TL;DR

This PR refactors the `UserSelect` component, adjusting the call to `getToggleButtonProps`.

### What changed?

The `getToggleButtonProps` method in the `UserSelect` component now takes in two separate objects, one for the `ref` and another for `suppressRefError`, instead of a single one.

### How to test?

Verify the component functionality hasn't changed and there are no reference errors.

### Why make this change?

This code changes improve the readability and maintainability of this component by clearly separating the component reference and error suppression configurations in separate objects.
2024-05-22 15:02:51 -04:00
Vivian Phung
b35f4033c5
Refactor: Collaborator Project Settings (#197)
### TL;DR

AddMemberDialog component now uses a Select dropdown for permissions instead of Checkboxes. CollaboratorsTabPanel now includes dismiss functionality for toasts.

### What changed?

- Updated AddMemberDialog to use a Select dropdown for permissions
- Added dismiss functionality for toasts in CollaboratorsTabPanel

### How to test?

Test the functionality of selecting permissions using the dropdown and toast dismissal in CollaboratorsTabPanel.

### Why make this change?

To improve user experience and UI consistency in permissions selection and toast management.
2024-05-22 14:58:47 -04:00
Vivian Phung
306d3235b3
Project Search Bar Dialog Update (#196)
### TL;DR

Reordered the properties in the `ProjectSearchBar` component to follow better coding standards.

### What changed?

In `ProjectSearchBarDialog.tsx`, the 'getItemProps' object was moved to the end of the properties list within `ProjectSearchBarItem`.

### How to test?

Verify that the `ProjectSearchBar` component functions as intended and that no properties are unduly affected by this change.

### Why make this change?

This change enhances code readability and consistency, aligning the ordering of the properties more accurately with our standards.
2024-05-22 14:54:51 -04:00
Vivian Phung
f84e2c0d9d
Refactor: Rename SVG Properties for React Standard (#194)
### TL;DR

A refactor of the Icon components in the front-end package has been carried out. This includes `CollaboratorsIcon.tsx`, `CopyUnfilledIcon.tsx`, and `TrashIcon.tsx`.

### What changed?

Several attributes previously written in kebab-case were changed to camelCase to adhere to JSX syntax standards. These include `stroke-linecap`, `stroke-linejoin`, `fill-rule`, and `clip-rule`.

### How to test?

Ensure that the rendering and functionality of the icons in the application remain unchanged after this update. 

### Why make this change?

The update ensures that our code complies with the preferred casing convention in JSX and avoids all potential related issues.
2024-05-22 14:46:53 -04:00
Vivian Phung
92016c8837
format 2024-05-22 10:57:20 -04:00
Vivian Phung
c6ebcafaac
gpl-client/dist and delete unused Web3ModalProvider 2024-05-22 10:44:22 -04:00
Vivian Phung
6dfe85cb1a
Merge branch 'ng-check-deployment-removal-record' 2024-05-22 10:41:37 -04:00
Vivian Phung
7147611842
Merge branch 'main' into nv-handle-repo-exist-error 2024-05-22 10:16:27 -04:00
Vivian Phung
2074e08a0c
[3/n][Storybook] Settings - Delete Project Dialog (#76) 2024-05-16 20:45:32 -04:00
Vivian Phung
f01bdf2de7
[2/n][Storybook] Settings - EnvironmentVariables (#75) 2024-05-16 20:42:29 -04:00
Vivian Phung
8cb5eadfb2
EditEnvironmentVariableRow cleanup (#74) 2024-05-16 20:39:42 -04:00
Vivian Phung
41666568f5
AddEnvironmentVariableRow button alignment to bottom (#73) 2024-05-16 20:36:31 -04:00
Vivian Phung
17cf878168
[1/n][Storybook] Settings (#72) 2024-05-16 20:33:33 -04:00
Vivian Phung
c72cbce615
AddEnvironmentVariableRow padding (#71) 2024-05-16 20:29:35 -04:00
Vivian Phung
a69dd71117
DeleteProjectDialog update to Modal (#70) 2024-05-16 20:26:31 -04:00
Vivian Phung
5dc4d28b50
MemberCard remove x padding (#69) 2024-05-16 20:22:33 -04:00
Vivian Phung
7dce1d66ae
remove x padding padding from general tab (#68) 2024-05-16 20:19:31 -04:00
Vivian Phung
46ba6d014d
fix duplicate styling (#67) 2024-05-16 20:16:31 -04:00
Vivian Phung
583c0b9d26
MemberCard for owner disabled (#66)
* AddMemberDialog remove footer styling from old component

* MemberCard for owner disabled (#64)
2024-05-15 17:18:32 -04:00
Vivian Phung
e12c94e087
AddMemberDialog remove footer styling from old component (#63)
### TL;DR

This PR involves a minor change on the AddMemberDialog component style.

### What changed?

The 'justify-start' class was removed from the Modal.Footer in the AddMemberDialog.tsx.

### How to test?

Check the AddMemberDialog on the project settings page to make sure the style changes reflect accurately.

### Why make this change?

It's not specified the specific reason for the change, However, it's aimed towards improving the component's layout and presentation in the project settings page.

---
2024-05-15 17:07:13 -04:00
Vivian Phung
04b6a84440
env var fix 2024-05-14 20:07:02 -04:00
Vivian Phung
ad69ebe4a0 [21/n][Storybook] AuthPage 2024-05-14 23:31:51 +00:00
Vivian Phung
0fb1127b96 [20/n][Storybook] SearchBar 2024-05-14 23:26:47 +00:00
Vivian Phung
050f404776 [19/n][Storybook] CloudyFlow 2024-05-14 23:23:32 +00:00
Vivian Phung
7c8e9f2448 Tabs component export TabsTheme 2024-05-14 23:20:39 +00:00
Vivian Phung
3668a8edf7 [19/n][Storybook] Tag with typed themes 2024-05-14 23:17:28 +00:00
Vivian Phung
4c3072ed50 [19/n][Storybook] basic Table uses themes 2024-05-14 23:13:33 +00:00
Vivian Phung
671321ef4d
[18/n][Storybook] Switch update argTypes and add stories 2024-05-14 18:16:49 -04:00
Vivian Phung
16df36715a [17/n][Storybook] Step (single) story 2024-05-14 21:50:56 +00:00
Vivian Phung
702cef24b3 [16/n][Storybook] Steps argTypes and typed variants 2024-05-14 21:46:42 +00:00
Vivian Phung
d76db4fb96 [12/n][Storybook] Select argTypes and typed variants 2024-05-14 21:42:33 +00:00
Vivian Phung
8d96be625e [5/n][Storybook] SegmentedControls update argTypes and use typed themes 2024-05-14 21:40:17 +00:00
Vivian Phung
fd7d06b9e2 [13/n][Storybook] Radio argTypes update 2024-05-14 21:36:07 +00:00