feat: Updated order of tabs on import details (#353)

Author: chavda-bhavik

apps/web/assets/icons/Five.icon.tsx

@@ -0,0 +1,10 @@
+import { IconType } from '@types';
+import { IconSizes } from 'config';
+
+export const FiveIcon = ({ size = 'sm' }: IconType) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={IconSizes[size]} height={IconSizes[size]}>
+      <path d="M18.0005 2V4H9.30073L8.62386 10.4448C9.60799 9.84532 10.7639 9.5 12.0005 9.5C15.5904 9.5 18.5005 12.4101 18.5005 16C18.5005 19.5899 15.5904 22.5 12.0005 22.5C8.95483 22.5 6.39837 20.4052 5.69336 17.5778L7.634 17.0922C8.12205 19.0497 9.89193 20.5 12.0005 20.5C14.4858 20.5 16.5005 18.4853 16.5005 16C16.5005 13.5147 14.4858 11.5 12.0005 11.5C9.97832 11.5 8.72286 12.139 8.04033 13.0293L6.46536 11.848L7.50054 2H18.0005Z" />
+    </svg>
+  );
+};

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

@@ -20,6 +20,7 @@ import { AppLayout } from '@layouts/AppLayout';
 import { OneIcon } from '@assets/icons/One.icon';
 import { TwoIcon } from '@assets/icons/Two.icon';
 import { EditIcon } from '@assets/icons/Edit.icon';
+import { FiveIcon } from '@assets/icons/Five.icon';
 import { FourIcon } from '@assets/icons/Four.icon';
 import { ThreeIcon } from '@assets/icons/Three.icon';
 import { DeleteIcon } from '@assets/icons/Delete.icon';
@@ -87,33 +88,39 @@ export default function ImportDetails({ template }: ImportDetailProps) {
             icon: <OneIcon size="xs" />,
             content: <Schema templateId={template._id} />,
           },
+          {
+            value: 'destination',
+            title: 'Destination',
+            icon: <TwoIcon size="xs" />,
+            content: <Destination template={template} accessToken={profile?.accessToken} />,
+          },
           {
             value: 'snippet',
             title: 'Snippet',
-            icon: <TwoIcon size="xs" />,
+            icon: <ThreeIcon size="xs" />,
             content: (
               <Snippet templateId={template._id} projectId={template._projectId} accessToken={profile?.accessToken} />
             ),
           },
-          {
-            value: 'destination',
-            title: 'Destination',
-            icon: <ThreeIcon size="xs" />,
-            content: <Destination template={template} accessToken={profile?.accessToken} />,
-          },
           ...(publicRuntimeConfig.NEXT_PUBLIC_CUSTOM_VALIDATION_ENABLED === 'true'
             ? [
                 {
                   value: 'validator',
                   title: 'Validator',
+                  icon: <FourIcon size="xs" />,
                   content: <Validator templateId={template._id} />,
                 },
               ]
             : []),
           {
             value: 'output',
             title: 'Output',
-            icon: <FourIcon size="xs" />,
+            icon:
+              publicRuntimeConfig.NEXT_PUBLIC_CUSTOM_VALIDATION_ENABLED === 'true' ? (
+                <FiveIcon size="xs" />
+              ) : (
+                <FourIcon size="xs" />
+              ),
             content: <Editor templateId={template._id} />,
           },
         ]}