Enhanced sidebar and Implement horizontal tab navigation for mobile settings screen || Admin Portal

ownercommunity.code-workspace

@@ -24,10 +24,10 @@
 	],
 	"settings": {
 		"debug.internalConsoleOptions": "neverOpen",
-		"github.copilot.chat.codeGeneration.instructions": [
+		"github.copilot.chat.experimental.codeGeneration.instructions": [
 			{
 				"file": "rules.md"
-			}
+			},
 		]
 	}
 }

ui-community/src/components/layouts/admin/components/community-detail.container.tsx

@@ -10,13 +10,14 @@ export const CommunityDetailContainer: React.FC<any> = (props) => {
     loading: communityLoading,
     error: communityError
   } = useQuery(AdminCommunityDetailContainerCommunityByIdDocument, {
-    variables: { id: props.data.id ?? '' }
-  });
+    variables: { id: props.data.id },
+      fetchPolicy: 'network-only'
+  },);
 
   return (
     <ComponentQueryLoader
       loading={communityLoading}
-      hasData={communityData}
+      hasData={communityData?.communityById}
       hasDataComponent={<CommunityDetail data={communityData?.communityById as AdminCommunityDetailContainerCommunityFieldsFragment} />}
       error={communityError}
     />

ui-community/src/components/layouts/admin/components/community-detail.tsx

@@ -10,10 +10,10 @@ export interface CommunityDetailProps {
 export const CommunityDetail: React.FC<CommunityDetailProps> = (props) => {
 
   const whiteLabelDetails = () => {
-    if (props.data.whiteLabelDomain) {
+    if (props.data?.whiteLabelDomain) {
       return (
         <Descriptions.Item label="White Label Name">
-          <Text strong>{props.data.whiteLabelDomain}</Text>
+          <Text strong>{props.data?.whiteLabelDomain}</Text>
         </Descriptions.Item>
       );
     } else {
@@ -22,20 +22,20 @@ export const CommunityDetail: React.FC<CommunityDetailProps> = (props) => {
   };
 
   const domainDetails = () => {
-    if (props.data.domain) {
+    if (props.data?.domain) {
       return (
         <Descriptions.Item label="Domain Name">
-          <Text strong>{props.data.domain}</Text>
+          <Text strong>{props.data?.domain}</Text>
         </Descriptions.Item>
       );
     }
   };
 
   const handleDetails = () => {
-    if (props.data.handle) {
+    if (props.data?.handle) {
       return (
         <Descriptions.Item label="Handle Name">
-          <Text strong>{props.data.handle}</Text>
+          <Text strong>{props.data?.handle}</Text>
         </Descriptions.Item>
       );
     } else {
@@ -65,10 +65,10 @@ export const CommunityDetail: React.FC<CommunityDetailProps> = (props) => {
 
       <Descriptions column={1}>
         <Descriptions.Item label="Community ID">
-          <Text strong data-testid="community-id">{props.data.id}</Text>
+          <Text strong data-testid="community-id">{props.data?.id}</Text>
         </Descriptions.Item>
         <Descriptions.Item label="Community Name">
-          <Text strong data-testid="community-name">{props.data.name}</Text>
+          <Text strong data-testid="community-name">{props.data?.name}</Text>
         </Descriptions.Item>
         {whiteLabelDetails()}
         {domainDetails()}

ui-community/src/components/layouts/admin/index.tsx

@@ -1,22 +1,7 @@
-import {
-  BarsOutlined,
-  ContactsOutlined,
-  HomeOutlined,
-  LayoutOutlined,
-  SafetyOutlined,
-  ScheduleOutlined,
-  SettingOutlined
-} from '@ant-design/icons';
 import { Route, Routes, useParams } from 'react-router-dom';
 import { BlobToLocalStorage } from '../../shared/blob-to-local-storage';
-import { Home } from './pages/home';
-import { Members } from './pages/members';
-import { Properties } from './pages/properties';
-import { Roles } from './pages/roles';
-import { ServiceTickets } from './pages/service-tickets';
-import { Settings } from './pages/settings';
-import { SiteEditor } from './pages/site-editor';
 import { SectionLayoutContainer } from './section-layout.container';
+import { AdminPage } from './pages/admin-page';
 import { Member } from '../../../generated';
 
 export interface PageLayoutProps {
@@ -31,82 +16,11 @@ export interface PageLayoutProps {
 export const Admin: React.FC<any> = (_props) => {
   const params = useParams();
 
-  const pathLocations = {
-    home: '',
-    settings: 'settings/*',
-    siteEditor: 'site-editor/*',
-    roles: 'roles/*',
-    members: 'members/*',
-    properties: 'properties/*',
-    serviceTickets: 'service-tickets/*'
-  };
-
-  const pageLayouts: PageLayoutProps[] = [
-    { path: pathLocations.home, title: 'Home', icon: <HomeOutlined />, id: 'ROOT' },
-    {
-      path: pathLocations.settings,
-      title: 'Settings',
-      icon: <SettingOutlined />,
-      id: 2,
-      parent: 'ROOT',
-      hasPermissions: (member: Member) =>
-        member?.role?.permissions?.communityPermissions?.canManageCommunitySettings ?? false
-    },
-    {
-      path: pathLocations.siteEditor,
-      title: 'Site Editor',
-      icon: <LayoutOutlined />,
-      id: 3,
-      parent: 'ROOT',
-      hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageSiteContent ?? false
-    },
-    {
-      path: pathLocations.roles,
-      title: 'Roles',
-      icon: <SafetyOutlined />,
-      id: 4,
-      parent: 'ROOT',
-      hasPermissions: (member: Member) =>
-        member?.role?.permissions?.communityPermissions?.canManageRolesAndPermissions ?? false
-    },
-    {
-      path: pathLocations.members,
-      title: 'Members',
-      icon: <ContactsOutlined />,
-      id: 5,
-      parent: 'ROOT',
-      hasPermissions: (member: Member) => member?.role?.permissions?.communityPermissions?.canManageMembers ?? false
-    },
-    {
-      path: pathLocations.properties,
-      title: 'Properties',
-      icon: <BarsOutlined />,
-      id: 6,
-      parent: 'ROOT',
-      hasPermissions: (member: Member) => member?.role?.permissions?.propertyPermissions?.canManageProperties ?? false
-    },
-    {
-      path: pathLocations.serviceTickets,
-      title: 'Tickets',
-      icon: <ScheduleOutlined />,
-      id: 7,
-      parent: 'ROOT',
-      hasPermissions: (member: Member) => (member?.role?.permissions?.serviceTicketPermissions?.canManageTickets || 
-                                          member?.role?.permissions?.violationTicketPermissions?.canManageTickets) ?? false
-    }
-  ];
-
   return (
     <BlobToLocalStorage communityId={params.communityId}>
       <Routes>
-        <Route path="" element={<SectionLayoutContainer pageLayouts={pageLayouts} />}>
-          <Route path={pathLocations.home} element={<Home />} />
-          <Route path={pathLocations.settings} element={<Settings />} />
-          <Route path={pathLocations.siteEditor} element={<SiteEditor />} />
-          <Route path={pathLocations.roles} element={<Roles />} />
-          <Route path={pathLocations.members} element={<Members />} />
-          <Route path={pathLocations.properties} element={<Properties />} />
-          <Route path={pathLocations.serviceTickets} element={<ServiceTickets />} />
+        <Route path="*" element={<SectionLayoutContainer />}>
+          <Route path="*" element={<AdminPage />} />
         </Route>
       </Routes>
     </BlobToLocalStorage>