feat: Made Imports Page protected and respected DOM elements order in…

… list

apps/web/components/List/List.styles.tsx

@@ -9,11 +9,10 @@ export const getListStyles = createStyles((theme) => ({
   },
   row: {
     borderBottom: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`,
-    cursor: 'pointer',
   },
   td: {
-    padding: theme.spacing.sm,
     textAlign: 'left',
+    padding: `${theme.spacing.sm} !important`,
   },
   th: {
     textAlign: 'left',

apps/web/components/List/List.tsx

@@ -61,7 +61,7 @@ export function List<T extends { _id?: string }>(props: IListProps<T>) {
       );
 
     return (
-      <>
+      <tbody>
         {data.map((item: T) => (
           <tr
             key={item._id}
@@ -79,7 +79,7 @@ export function List<T extends { _id?: string }>(props: IListProps<T>) {
             ))}
           </tr>
         ))}
-      </>
+      </tbody>
     );
   };
 

apps/web/components/ManageProject/ManageProjectModal.tsx

@@ -99,8 +99,8 @@ export function ManageProjectModal() {
             </Button>
           </Flex>
           <Flex gap="xs">
-            <InformationIcon size="md" color={colors.yellow} />
-            <Text>You will be switched to the project once created.</Text>
+            <InformationIcon size="sm" color={colors.yellow} />
+            <Text size="sm">You will be switched to the project once created.</Text>
           </Flex>
         </Stack>
       </form>

apps/web/pages/imports/[id].tsx

@@ -7,12 +7,13 @@ import { ActionIcon, Flex, Group, LoadingOverlay, Title, useMantineTheme, Select
 import { track } from '@libs/amplitude';
 import { useImpler } from '@impler/react';
 import { TemplateModeEnum } from '@impler/shared';
-import { IMPORT_MODES, ROUTES, colors } from '@config';
+import { IMPORT_MODES, ROUTES, SubjectsEnum, colors } from '@config';
 import { useImportDetails } from '@hooks/useImportDetails';
 
 import { Tabs } from '@ui/Tabs';
 import { Button } from '@ui/button';
 import { Schema } from '@components/imports/schema';
+import { withProtectedResource } from '@components/hoc';
 import { Destination } from '@components/imports/destination';
 
 import { AppLayout } from '@layouts/AppLayout';
@@ -28,7 +29,7 @@ const Validator = dynamic(() => import('@components/imports/validator').then((mo
   ssr: false,
 });
 
-export default function ImportDetails({}) {
+function ImportDetails() {
   const router = useRouter();
   const [activeTab, setActiveTab] = useState<'schema' | 'destination' | 'snippet' | 'validator' | 'output'>();
   const { colorScheme } = useMantineTheme();
@@ -145,4 +146,20 @@ export default function ImportDetails({}) {
   );
 }
 
-ImportDetails.Layout = AppLayout;
+const EnhancedImportDetails = withProtectedResource(ImportDetails, {
+  subject: SubjectsEnum.IMPORTS,
+});
+
+export default function ImportDetailsPage() {
+  return <EnhancedImportDetails />;
+}
+
+ImportDetailsPage.Layout = AppLayout;
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      title: 'Import Details',
+    },
+  };
+}