feat: Redesign for the integrations pages (#30476)

* Initial commit. * Minor type fixes. * Add a integration for Queues. Refactor some of the integration layout. * Migrate the Cron integration to the new style. * Add useInstalledIntegrations hook. * Add an integration entry for vault. * Add an integration entry for GraphiQL. * Add supabase webhooks. * Feat/integrations get layout (#30538) * scroll based icon * Update header.tsx * remove dep from overview * moar * more table stuff * moar * alt nav put in * fix MotionNumber issues * more * trying both layouts * Fix bunch of type errors. --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> * Migrate Vercel and Github files to their own folders. * Switch all integrations with the new designs. * More fixes for links, pages structure and other random stuff. * Remove unneeded file. * Another set of fixes. Migrated most of the extension integrations. * Migrated Vault and webhooks to the new style. * Various fixes to make the animation work. * Remove extra code. * Tiny fixes 😬 i swear its tiny * Refactor IntegrationOverviewTab * chore/ update integrations routes (#30585) * init * add child support in tabs * add webhooks * Update IntegrationPageHandler.tsx * fix id issues * use messageId instead * animation tweaks * Move the description to the wrappers array. * The useInstalledIntegrations now provides integrations which could be installed. * Add static content for the various integrations. * Move the page handler logic into the integrations definitions. * Clean up some extra code. * Add logic to make the overview tab the default tab. * Don't show the header until the integration id has been checked. * Add logic to the integration pages to avoid weird loading bugs, deselecting tabs if the integration hasn't been installed etc. * Fix the webhooks overview tab. * Fix the buttons for enabling extensions. * Add padding to all custom tab contents. * Small fixes * Prettier lint * Fix icon color + add empty state for when available integrations are all installed * Fix ts errors * Fiox * Add enable webhooks cta * Fix key * Fix all lints * Fix the queues create sheet. * Fix the deletion of wrappers. * Fix the minimum version alert for the wrappers extension. * Make the queues table fit the whole container. * Fix an issue which reset the tab when installing an extension. * Address comments * Add loading state for installed integrations in side nav * Fix edit secret not rendering value in input field after subsequent openings * Fix vault keys auto filling search input with vault * Fix search input placeholder for cron * Minor fix in install database extension copy * Fix a bad redirect when reloading. * Fix bad url redirects. * Fix scrolling in create new/edit wrapper sheet. * Add y padding to the wrappers rows. * Fix merge errors. * More merge fixes. * Fix bad imports during the merge. --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-10-05 01:15:03 +03:00 · 2024-11-25 13:26:22 +01:00
1 parent 12d92aed99
commit 590ed362ab
@@ -0,0 +1,57 @@
+import { motion } from 'framer-motion'
+import { useEffect, useState } from 'react'
+
+import { Markdown } from 'components/interfaces/Markdown'
+import { cn } from 'ui'
+
+const CHAR_LIMIT = 500 // Adjust this number as needed
+
+export const MarkdownContent = ({ integrationId }: { integrationId: string }) => {
+  const [content, setContent] = useState<string>('')
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  useEffect(() => {
+    import(`static-data/integrations/${integrationId}/overview.md`)
+      .then((module) => setContent(String(module.default)))
+      .catch((error) => console.error('Error loading markdown:', error))
+  }, [integrationId])
+
+  const displayContent = isExpanded ? content : content.slice(0, CHAR_LIMIT)
+  const supportExpanding = content.length > CHAR_LIMIT || (content.match(/\n/g) || []).length > 1
+
+  if (displayContent.length === 0) return null
+
+  return (
+    <div className="px-10">
+      <div className="relative">
+        <motion.div
+          initial={false}
+          animate={{ height: isExpanded ? 'auto' : 80 }}
+          className="overflow-hidden"
+          transition={{ duration: 0.4 }}
+        >
+          <Markdown content={displayContent} className="!max-w-3xl" />
+        </motion.div>
+        {!isExpanded && (
+          <div
+            className={cn(
+              'bottom-0 left-0 right-0 h-24',
+              supportExpanding && 'bg-gradient-to-t from-background-200 to-transparent',
+              !isExpanded ? 'absolute' : 'relative'
+            )}
+          />
+        )}
+        {supportExpanding && (
+          <div className={cn('bottom-0 z-10', !isExpanded ? 'absolute' : 'relative mt-3')}>
+            <button
+              className="text-foreground-light hover:text-foreground underline text-sm"
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              {isExpanded ? 'Show less' : 'Read more'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}