fix: ProjectSearchBarDialog suppressRefError

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 22:49:30 +00:00 · 2024-06-24 18:48:32 -04:00 · 2024-06-24 18:44:34 -04:00 · 2024-06-24 18:41:31 -04:00 · 2024-06-24 18:38:01 -04:00
7 changed files with 184 additions and 109 deletions
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCombobox } from 'downshift';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';

 import SearchBar from 'components/SearchBar';
 import { useGQLClient } from 'context/GQLClientContext';
@@ -42,7 +42,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
    },
  });

-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);

  const fetchProjects = useCallback(
    async (inputValue: string) => {
@@ -62,7 +62,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
    <div className="relative w-full lg:w-fit">
      <SearchBar {...getInputProps()} />
      <div
-        {...getMenuProps()}
+        {...getMenuProps({}, { suppressRefError: true })}
        className={cn(
          'flex flex-col shadow-dropdown rounded-xl bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
          { hidden: !inputValue || !isOpen },
@@ -5,7 +5,7 @@ import { CrossIcon, SearchIcon } from 'components/shared/CustomIcon';
 import { Input } from 'components/shared/Input';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 import { ProjectSearchBarItem } from './ProjectSearchBarItem';
 import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
 import { useNavigate } from 'react-router-dom';
@@ -27,25 +27,30 @@ export const ProjectSearchBarDialog = ({
  const client = useGQLClient();
  const navigate = useNavigate();

-  const { getInputProps, getItemProps, inputValue, setInputValue } =
-    useCombobox({
-      items,
-      itemToString(item) {
-        return item ? item.name : '';
-      },
-      selectedItem,
-      onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
-        if (newSelectedItem) {
-          setSelectedItem(newSelectedItem);
-          onClickItem?.(newSelectedItem);
-          navigate(
-            `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
-          );
-        }
-      },
-    });
+  const {
+    getInputProps,
+    getItemProps,
+    getMenuProps,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
+    items,
+    itemToString(item) {
+      return item ? item.name : '';
+    },
+    selectedItem,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+      if (newSelectedItem) {
+        setSelectedItem(newSelectedItem);
+        onClickItem?.(newSelectedItem);
+        navigate(
+          `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
+        );
+      }
+    },
+  });

-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);

  const fetchProjects = useCallback(
    async (inputValue: string) => {
@@ -75,7 +80,7 @@ export const ProjectSearchBarDialog = ({
          <div className="h-full flex flex-col fixed top-0 inset-0">
            <div className="py-2.5 px-4 flex items-center justify-between border-b border-border-separator/[0.06]">
              <Input
-                {...getInputProps()}
+                {...getInputProps({}, { suppressRefError: true })}
                leftIcon={<SearchIcon />}
                placeholder="Search"
                appearance="borderless"
@@ -86,7 +91,15 @@ export const ProjectSearchBarDialog = ({
              </Button>
            </div>
            {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2">
+            <div
+              className="flex flex-col gap-1 px-2 py-2"
+              {...getMenuProps(
+                {},
+                {
+                  suppressRefError: true,
+                },
+              )}
+            >
              {items.length > 0
                ? items.map((item, index) => (
                    <>
@@ -32,7 +32,7 @@ const ProjectSearch = () => {
  return (
    <section className="h-full flex flex-col">
      {/* Header */}
-      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] z-30">
+      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] hover:z-30">
        <div className="flex pr-6 pl-2 py-2 items-center">
          <div className="flex-1">
            <ProjectSearchBar
@@ -11,98 +11,128 @@ import {
 import { Heading } from 'components/shared/Heading';

 import logoAnimation from 'components/../../public/lottie/logo.json';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
+import { useEffect, useState } from 'react';

 const Id = () => {
  const { id, orgSlug } = useParams();
+  const client = useGQLClient();
+  const [project, setProject] = useState<Project | null>(null);

-  const handleSetupDomain = () => {
-    //TODO: Implement this
+  const handleSetupDomain = async () => {
+    if (id) {
+      // console.log('id', id);
+      // console.log('getting project for id', id);
+      const project = await client.getProject(id);
+      // console.log('project found:', project);
+      if (project && project.project) {
+        // console.log('project:', project.project);
+        setProject(project.project);
+      }
+    } else {
+      window.location.href = '/';
+    }
  };
+
+  useEffect(() => {
+    handleSetupDomain();
+  });
+
  return (
-    <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
-      {/* Icon */}
-      <div className="flex justify-center">
-        <Lottie animationData={logoAnimation} loop={false} size={40} />
-      </div>
-
-      {/* Heading */}
-      <div className="flex flex-col items-center gap-1.5">
-        <Heading as="h3" className="font-medium text-xl">
-          Project deployed successfully.
-        </Heading>
-        <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
-          Your project has been deployed at{' '}
-          <Button
-            className="no-underline text-elements-link"
-            // TODO: use dynamic value
-            href="https://www.iglootools.snowballtools.xyz"
-            as="a"
-            variant="link-emphasized"
-            external
-            leftIcon={<LinkChainIcon />}
-          >
-            {/* // TODO: use dynamic value */}
-            www.iglootools.snowballtools.xyz
-          </Button>
-        </p>
-      </div>
-
-      {/* Card */}
-      <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
-        {/* Trigger question */}
-        <div className="flex gap-2 justify-center items-center py-3">
-          <div className="h-5 w-5">
-            <QuestionMarkRoundFilledIcon size={18} />
+    <>
+      {project ? (
+        <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
+          {/* Icon */}
+          <div className="flex justify-center">
+            <Lottie animationData={logoAnimation} loop={false} size={40} />
          </div>
-          <Heading as="h5" className="font-sans font-medium text-sm">
-            {`Wondering what's next?`}
-          </Heading>
-        </div>

-        {/* CTA card */}
-        <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
-          <div className="flex gap-2">
-            <Badge variant="secondary">1</Badge>
-            <div className="space-y-3">
-              <div className="flex flex-col gap-1">
-                <Heading as="h6" className="text-sm font-sans">
-                  Add a custom domain
-                </Heading>
-                <p className="text-xs text-elements-low-em font-sans">
-                  Make it easy for your visitors to remember your URL with a
-                  custom domain.
-                </p>
-              </div>
-              <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
-                Setup domain
+          {/* Heading */}
+          <div className="flex flex-col items-center gap-1.5">
+            <Heading as="h3" className="font-medium text-xl">
+              Project deployed successfully.
+            </Heading>
+            <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
+              Your project has been deployed at{' '}
+              <Button
+                className="no-underline text-elements-link"
+                // TODO: use dynamic value
+                href={project ? `https://${project.subDomain}` : ''}
+                as="a"
+                variant="link-emphasized"
+                external
+                leftIcon={<LinkChainIcon />}
+              >
+                {project.subDomain}
              </Button>
+            </p>
+          </div>
+
+          {/* Card */}
+          <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
+            {/* Trigger question */}
+            <div className="flex gap-2 justify-center items-center py-3">
+              <div className="h-5 w-5">
+                <QuestionMarkRoundFilledIcon size={18} />
+              </div>
+              <Heading as="h5" className="font-sans font-medium text-sm">
+                {`Wondering what's next?`}
+              </Heading>
+            </div>
+
+            {/* CTA card */}
+            <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
+              <div className="flex gap-2">
+                <Badge variant="secondary">1</Badge>
+                <div className="space-y-3">
+                  <div className="flex flex-col gap-1">
+                    <Heading as="h6" className="text-sm font-sans">
+                      Add a custom domain
+                    </Heading>
+                    <p className="text-xs text-elements-low-em font-sans">
+                      Make it easy for your visitors to remember your URL with a
+                      custom domain.
+                    </p>
+                  </div>
+                  <Button
+                    onClick={handleSetupDomain}
+                    variant="tertiary"
+                    size="sm"
+                  >
+                    Setup domain
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col lg:flex-row justify-center gap-3">
+            <div className="w-full lg:w-fit">
+              <Link to="/">
+                <Button
+                  leftIcon={<ArrowLeftCircleFilledIcon />}
+                  fullWidth
+                  variant="tertiary"
+                >
+                  Back to projects
+                </Button>
+              </Link>
+            </div>
+            <div className="w-full lg:w-fit">
+              <Link to={`/${orgSlug}/projects/${id}`}>
+                <Button fullWidth variant="primary">
+                  View project
+                </Button>
+              </Link>
            </div>
          </div>
        </div>
-      </div>
-
-      {/* CTA Buttons */}
-      <div className="flex flex-col lg:flex-row justify-center gap-3">
-        <div className="w-full lg:w-fit">
-          <Link to="/">
-            <Button
-              leftIcon={<ArrowLeftCircleFilledIcon />}
-              fullWidth
-              variant="tertiary"
-            >
-              Back to projects
-            </Button>
-          </Link>
-        </div>
-        <div className="w-full lg:w-fit">
-          <Link to={`/${orgSlug}/projects/${id}`}>
-            <Button fullWidth variant="primary">
-              View project
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </div>
+      ) : (
+        <></>
+      )}
+    </>
  );
 };

@@ -11,7 +11,10 @@ import { Template } from '../../../../../types/types';
 import { Heading } from 'components/shared/Heading';
 import { Input } from 'components/shared/Input';
 import { Select, SelectOption } from 'components/shared/Select';
-import { ArrowRightCircleFilledIcon } from 'components/shared/CustomIcon';
+import {
+  ArrowRightCircleFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
 import { Checkbox } from 'components/shared/Checkbox';
 import { Button } from 'components/shared/Button';
 import { useToast } from 'components/shared/Toast';
@@ -192,7 +195,13 @@ const CreateRepo = () => {
            {...buttonSize}
            type="submit"
            disabled={!Boolean(template.repoFullName) || isLoading}
-            rightIcon={<ArrowRightCircleFilledIcon />}
+            rightIcon={
+              isLoading ? (
+                <LoadingIcon className="animate-spin" />
+              ) : (
+                <ArrowRightCircleFilledIcon />
+              )
+            }
          >
            Deploy
          </Button>
@@ -131,9 +131,12 @@ const OverviewTabPanel = () => {
            <Heading className="text-lg leading-6 font-medium truncate">
              {project.name}
            </Heading>
-            <p className="text-sm text-elements-low-em tracking-tight truncate">
+            <a
+              href={`https://${project.subDomain}`}
+              className="text-sm text-elements-low-em tracking-tight truncate"
+            >
              {project.subDomain}
-            </p>
+            </a>
          </div>
        </div>
        <OverviewInfo label="Domain" icon={<GlobeIcon />}>
@@ -0,0 +1,20 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { ProjectSearchBar } from 'components/projects/ProjectSearchBar';
+
+const meta: Meta<typeof ProjectSearchBar> = {
+  title: 'Components/ProjectSearchBar',
+  component: ProjectSearchBar,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: {
+      action: 'change',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProjectSearchBar>;
+
+export const Default: Story = {};
Author	SHA1	Message	Date
Vivian Phung	c433ce0e27	fix: ProjectSearchBarDialog suppressRefError	2024-06-24 22:49:30 +00: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