Update project settings form layout and configure import sorting

Enhanced the user interface by adjusting the project settings form layout in 'ProjectSettings/index.tsx' and 'projects/[projectId]/boards/[boardId]/page.tsx'. Added configuration for improved import sorting using the '@trivago/prettier-plugin-sort-imports' package, specified the required order and enabled separation in '.prettierrc.json'. Updates were also made in 'Sidebar/index.tsx' and 'constants.ts' to refine view visibility conditions and regular expression patterns respectively. The import order of modules in several files have been re-arranged as per new configuration.
openpro-io · Dec 28, 2023 · f632fc9 · f632fc9
1 parent eadbc2a
commit f632fc9
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 70 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -18,7 +18,10 @@
       "files": ["frontend/**/*.{tsx,ts}"],
       "options": {
         "jsxSingleQuote": true,
-        "plugins": ["prettier-plugin-tailwindcss"]
+        "importOrder": ["^@/(.*)$", "^[./]"],
+        "importOrderSeparation": true,
+        "importOrderSortSpecifiers": true,
+        "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"]
       }
     }
   ]

diff --git a/frontend/app/projects/[projectId]/boards/[boardId]/page.tsx b/frontend/app/projects/[projectId]/boards/[boardId]/page.tsx
@@ -1,9 +1,11 @@
 'use client';
+
+import Link from 'next/link';
 import React from 'react';
-import Breadcrumb from '@/components/Breadcrumbs/Breadcrumb';
-import KanbanBoardNew from '../../../../../components/KanbanBoard';
 import { FaGear } from 'react-icons/fa6';
-import Link from 'next/link';
+
+import Breadcrumb from '@/components/Breadcrumbs/Breadcrumb';
+import KanbanBoardNew from '@/components/KanbanBoard';
 
 const BoardIdPage = ({
   params,
@@ -16,6 +18,11 @@ const BoardIdPage = ({
     <>
       <Breadcrumb
         paths={[
+          {
+            name: 'Projects',
+            href: `/projects`,
+            current: true,
+          },
           {
             name: `Project ${projectId} Board`,
             href: `/projects/${projectId}/boards/${boardId}`,

diff --git a/frontend/app/projects/page.tsx b/frontend/app/projects/page.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import Dashboard from '@/components/Dashboard/Dashboard';
+
+export default function Home() {
+  return <Dashboard />;
+}
diff --git a/frontend/components/ProjectSettings/index.tsx b/frontend/components/ProjectSettings/index.tsx
@@ -1,7 +1,9 @@
-import ProjectMembers from './ProjectMembers';
-import { GET_PROJECT_INFO } from '@/gql/gql-queries-mutations';
 import { useQuery } from '@apollo/client';
 
+import { GET_PROJECT_INFO } from '@/gql/gql-queries-mutations';
+
+import ProjectMembers from './ProjectMembers';
+
 export default function ProjectSettings({ projectId }: { projectId: string }) {
   const { data, loading, error } = useQuery(GET_PROJECT_INFO, {
     fetchPolicy: 'cache-first',
@@ -16,60 +18,46 @@ export default function ProjectSettings({ projectId }: { projectId: string }) {
   if (error) return <div>Error: {error.message}</div>;
 
   return (
-    <form>
-      <div className='space-y-12 pt-5'>
-        <div className='grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3'>
-          <div>
-            <h2 className='font-semibold leading-7'>General</h2>
-            <p className='mt-1 text-sm leading-6'>
-              This is for general settings
-            </p>
+    <div className='space-y-12 pt-5'>
+      <div className='grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3'>
+        <div>
+          <h2 className='font-semibold leading-7'>General</h2>
+          <div className='mt-1 text-sm leading-6'>
+            This is for general settings
           </div>
+        </div>
 
-          <div className='grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 md:col-span-2'>
-            <div className='sm:col-span-4'>
-              <label
-                htmlFor='name'
-                className='block text-sm font-medium leading-6 '
-              >
-                Project Name
-              </label>
-              <div className='mt-2'>
-                <div className='flex rounded-md shadow-sm focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md'>
-                  <input
-                    type='text'
-                    name='name'
-                    id='name'
-                    className='block flex-1 rounded border-primary/20 bg-transparent py-1.5 pl-1 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6'
-                    placeholder=''
-                  />
-                </div>
+        <div className='grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 md:col-span-2'>
+          <div className='sm:col-span-4'>
+            <label
+              htmlFor='name'
+              className='block text-sm font-medium leading-6 '
+            >
+              Project Name
+            </label>
+            <div className='mt-2'>
+              <div className='flex rounded-md shadow-sm focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md'>
+                <input
+                  type='text'
+                  name='name'
+                  id='name'
+                  className='block flex-1 rounded border-primary/20 bg-transparent py-1.5 pl-1 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6'
+                  placeholder=''
+                />
               </div>
             </div>
+          </div>
 
-            <div className='sm:col-span-4'>
-              <div className='mt-2'>Project Visibility</div>
-              <div>{data.project.visibility ?? 'undefined'}</div>
-            </div>
-
-            <div className='col-span-full'>
-              <ProjectMembers projectId={projectId} />
-            </div>
+          <div className='sm:col-span-4'>
+            <div className='mt-2'>Project Visibility</div>
+            <div>{data.project.visibility ?? 'undefined'}</div>
           </div>
-        </div>
 
-        <div className='mt-6 flex items-center justify-end gap-x-6'>
-          <button type='button' className='text-sm font-semibold leading-6 '>
-            Cancel
-          </button>
-          <button
-            type='submit'
-            className='rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-          >
-            Save
-          </button>
+          <div className='col-span-full'>
+            <ProjectMembers projectId={projectId} />
+          </div>
         </div>
       </div>
-    </form>
+    </div>
   );
 }
diff --git a/frontend/components/Sidebar/constants.ts b/frontend/components/Sidebar/constants.ts
@@ -1,4 +1,4 @@
 export const REGEX_PROJECT_BOARD_BACKLOG =
-  /\/projects\/\d+\/boards\/\d+\/backlog$/;
-export const REGEX_PROJECT_BOARD = /\/projects\/\d+\/boards\/\d+$/;
-export const REGEX_PROJECT_ISSUES = /\/projects\/\d+\/issues\/\d+$/;
+  /^\/projects\/\d+\/boards\/\d+\/backlog$/;
+export const REGEX_PROJECT_BOARD = /^\/projects\/\d+\/boards\/\d+$/;
+export const REGEX_PROJECT_ISSUES = /^\/projects\/\d+\/issues\/\d+$/;
diff --git a/frontend/components/Sidebar/index.tsx b/frontend/components/Sidebar/index.tsx
@@ -1,23 +1,26 @@
 'use client';
-import React, { useEffect, useRef, useState } from 'react';
+
+import { useQuery } from '@apollo/client';
+import { UserGroupIcon } from '@heroicons/react/24/solid';
+import type { Route } from 'next';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
-import SidebarLinkGroup from './SidebarLinkGroup';
-import Image from 'next/image';
-import { UserGroupIcon } from '@heroicons/react/24/solid';
-import { useQuery } from '@apollo/client';
-import { GET_BOARD_INFO } from '@/gql/gql-queries-mutations';
-import { classNames } from '@/services/utils';
+import React, { useEffect, useRef, useState } from 'react';
+
+import ProjectIssues from '@/components/Sidebar/Links/ProjectIssues';
+import ProjectContainerSection from '@/components/Sidebar/ProjectContainerSection';
 import {
   REGEX_PROJECT_BOARD,
   REGEX_PROJECT_BOARD_BACKLOG,
   REGEX_PROJECT_ISSUES,
 } from '@/components/Sidebar/constants';
-import ProjectIssues from '@/components/Sidebar/Links/ProjectIssues';
-import type { Route } from 'next';
-import ProjectContainerSection from '@/components/Sidebar/ProjectContainerSection';
+import { GET_BOARD_INFO } from '@/gql/gql-queries-mutations';
 import useColorMode from '@/hooks/useColorMode';
 import useLocalStorage from '@/hooks/useLocalStorage';
+import { classNames } from '@/services/utils';
+
+import SidebarLinkGroup from './SidebarLinkGroup';
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -127,7 +130,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
           {/* <!-- Menu Group --> */}
           <div>
             {/* <!--  This is the project view sidebar--> */}
-            {pathname.includes('projects') && (
+            {pathname.includes('projects') && pathname !== '/projects' && (
               <>
                 <ul className='mb-6 flex flex-col gap-0.5'>
                   {/* <!-- Menu Item Project Board --> */}
@@ -217,7 +220,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
             )}
 
             {/* <!-- We hide this navbar in non project view --> */}
-            {!pathname.includes('projects') && (
+            {(!pathname.includes('projects') ||
+              pathname === '/projects' ||
+              pathname === '/dashboard') && (
               <>
                 <ul className='mb-6 flex flex-col gap-0.5'>
                   {/* <!-- Menu Item Dashboard --> */}
@@ -234,6 +239,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                             href='/dashboard'
                             className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-link duration-300 ease-in-out ${
                               pathname === '/' ||
+                              pathname === '/projects' ||
                               (pathname.includes('dashboard') &&
                                 'border-l-4 bg-link-active text-link-active')
                             }`}

diff --git a/frontend/package.json b/frontend/package.json
@@ -92,6 +92,7 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/apollo-upload-client": "^17.0.5",
     "@types/lodash": "^4.14.202",
     "@types/luxon": "^3.3.7",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml