🚚(app-desk) rename and group team Panel

- add folder Panel
- rename PanelTeams to TeamList
- rename PanelTeam to TeamItem

src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx

@@ -4,7 +4,7 @@ import fetchMock from 'fetch-mock';
 
 import { AppWrapper } from '@/tests/utils';
 
-import { PanelTeams } from '../components/PanelTeams';
+import { TeamList } from '../components/Panel/TeamList';
 
 window.HTMLElement.prototype.scroll = function () {};
 
@@ -26,7 +26,7 @@ describe('PanelTeams', () => {
       results: [],
     });
 
-    render(<PanelTeams />, { wrapper: AppWrapper });
+    render(<TeamList />, { wrapper: AppWrapper });
 
     expect(screen.getByRole('status')).toBeInTheDocument();
 
@@ -49,7 +49,7 @@ describe('PanelTeams', () => {
       ],
     });
 
-    render(<PanelTeams />, { wrapper: AppWrapper });
+    render(<TeamList />, { wrapper: AppWrapper });
 
     expect(screen.getByRole('status')).toBeInTheDocument();
 
@@ -75,7 +75,7 @@ describe('PanelTeams', () => {
       ],
     });
 
-    render(<PanelTeams />, { wrapper: AppWrapper });
+    render(<TeamList />, { wrapper: AppWrapper });
 
     expect(screen.getByRole('status')).toBeInTheDocument();
 
@@ -105,7 +105,7 @@ describe('PanelTeams', () => {
       ],
     });
 
-    render(<PanelTeams />, { wrapper: AppWrapper });
+    render(<TeamList />, { wrapper: AppWrapper });
 
     expect(screen.getByRole('status')).toBeInTheDocument();
 
@@ -117,7 +117,7 @@ describe('PanelTeams', () => {
       status: 500,
     });
 
-    render(<PanelTeams />, { wrapper: AppWrapper });
+    render(<TeamList />, { wrapper: AppWrapper });
 
     expect(screen.getByRole('status')).toBeInTheDocument();
 

src/frontend/apps/desk/src/features/teams/api/index.ts

@@ -1,2 +1,3 @@
 export * from './useCreateTeam';
 export * from './useTeam';
+export * from './useTeams';

src/frontend/apps/desk/src/features/teams/components/Panel/Panel.tsx

@@ -5,7 +5,7 @@ import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 import { PanelActions } from './PanelActions';
-import { PanelTeams } from './PanelTeams';
+import { TeamList } from './TeamList';
 
 export const Panel = () => {
   const { t } = useTranslation();
@@ -36,7 +36,7 @@ export const Panel = () => {
         </Text>
         <PanelActions />
       </Box>
-      <PanelTeams />
+      <TeamList />
     </Box>
   );
 };

src/frontend/apps/desk/src/features/teams/components/Panel/PanelActions.tsx

@@ -5,11 +5,10 @@ import styled from 'styled-components';
 
 import { Box, StyledLink } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-
+import { TeamsOrdering } from '@/features/teams/api/';
-import { TeamsOrdering } from '../api/useTeams';
+import IconAdd from '@/features/teams/assets/icon-add.svg';
-import IconAdd from '../assets/icon-add.svg';
+import IconSort from '@/features/teams/assets/icon-sort.svg';
-import IconSort from '../assets/icon-sort.svg';
+import { useTeamStore } from '@/features/teams/store/useTeamsStore';
-import { useTeamStore } from '../store/useTeamsStore';
 
 const ButtonSort = styled(Button)<{
   $background: CSSProperties['background'];

src/frontend/apps/desk/src/features/teams/components/Panel/TeamItem.tsx

@@ -5,15 +5,14 @@ import { useTranslation } from 'react-i18next';
 import IconGroup from '@/assets/icons/icon-group.svg';
 import { Box, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-
+import { Team } from '@/features/teams/api/';
-import { Team } from '../api/types';
+import IconNone from '@/features/teams/assets/icon-none.svg';
-import IconNone from '../assets/icon-none.svg';
 
 interface TeamProps {
   team: Team;
 }
 
-export const PanelTeam = ({ team }: TeamProps) => {
+export const TeamItem = ({ team }: TeamProps) => {
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const {

src/frontend/apps/desk/src/features/teams/components/Panel/TeamList.tsx

@@ -4,12 +4,10 @@ import { useTranslation } from 'react-i18next';
 
 import { Box, Text } from '@/components';
 import { InfiniteScroll } from '@/components/InfiniteScroll';
+import { Team, useTeams } from '@/features/teams/api/';
+import { useTeamStore } from '@/features/teams/store/useTeamsStore';
 
-import { Team } from '../api/types';
+import { TeamItem } from './TeamItem';
-import { useTeams } from '../api/useTeams';
-import { useTeamStore } from '../store/useTeamsStore';
-
-import { PanelTeam } from './PanelTeam';
 
 interface PanelTeamsStateProps {
   isLoading: boolean;
@@ -17,11 +15,7 @@ interface PanelTeamsStateProps {
   teams?: Team[];
 }
 
-const PanelTeamsState = ({
+const TeamListState = ({ isLoading, isError, teams }: PanelTeamsStateProps) => {
-  isLoading,
-  isError,
-  teams,
-}: PanelTeamsStateProps) => {
   const { t } = useTranslation();
 
   if (isError) {
@@ -57,10 +51,10 @@ const PanelTeamsState = ({
     );
   }
 
-  return teams.map((team) => <PanelTeam team={team} key={team.id} />);
+  return teams.map((team) => <TeamItem team={team} key={team.id} />);
 };
 
-export const PanelTeams = () => {
+export const TeamList = () => {
   const ordering = useTeamStore((state) => state.ordering);
   const {
     data,
@@ -92,11 +86,7 @@ export const PanelTeams = () => {
         className="p-0 mt-0"
         role="listbox"
       >
-        <PanelTeamsState
+        <TeamListState isLoading={isLoading} isError={isError} teams={teams} />
-          isLoading={isLoading}
-          isError={isError}
-          teams={teams}
-        />
       </InfiniteScroll>
     </Box>
   );

src/frontend/apps/desk/src/features/teams/components/index.ts

@@ -1,2 +1,2 @@
-export * from './Panel';
+export * from './Panel/Panel';
 export * from './TeamInfo';