"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const IntegrationSuccess = ({integrationName}) => { const _components = { a: "a", b: "b", br: "br", p: "p", ..._provideComponents() }; return _jsxs(_components.p, { children: [_jsxs(_components.b, { children: [integrationName, " connected!"] }), _jsx(_components.br, {}), "You can now use", " ", _jsx(_components.a, { href: "/building-with-clark", children: "Clark to build" }), " with ", integrationName, "."] }); }; const DynamicIntegrationActions = ({integrationId, maxActions = 20}) => { const _components = { a: "a", button: "button", div: "div", h4: "h4", p: "p", ..._provideComponents() }; const [actions, setActions] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [showAll, setShowAll] = useState(false); useEffect(() => { const fetchIntegrationSpec = async () => { try { setLoading(true); const response = await fetch(`https://integrations.superblocks.com/openapi/${integrationId}.yaml`); if (!response.ok) { throw new Error(`Failed to fetch integration spec: ${response.status}`); } const yamlText = await response.text(); const actions = parseActionsFromYaml(yamlText); setActions(actions); setError(null); } catch (err) { setError(err.message); setActions(getFallbackActions(integrationId)); } finally { setLoading(false); } }; fetchIntegrationSpec(); }, [integrationId]); const parseActionsFromYaml = yamlText => { const actions = []; const summaryRegex = /summary:[ \t]+(.+)/g; let match; while ((match = summaryRegex.exec(yamlText)) !== null) { const summary = match[1].trim(); if (summary && summary.length > 0) { actions.push({ summary: summary, description: `API action: ${summary.toLowerCase()}` }); } } return actions.slice(0, 50); }; const getFallbackActions = integrationId => { const fallbackActions = { slack: [{ summary: 'Send Message', description: 'Send a message to a Slack channel or user' }, { summary: 'Get Channel Info', description: 'Retrieve information about a Slack channel' }, { summary: 'List Channels', description: 'Get a list of channels in the workspace' }, { summary: 'Get User Info', description: 'Retrieve information about a Slack user' }, { summary: 'List Users', description: 'Get a list of users in the workspace' }], github: [{ summary: 'Get Repository', description: 'Retrieve information about a repository' }, { summary: 'List Issues', description: 'Get a list of issues in a repository' }, { summary: 'Create Issue', description: 'Create a new issue in a repository' }, { summary: 'List Pull Requests', description: 'Get a list of pull requests' }, { summary: 'Create Pull Request', description: 'Create a new pull request' }] }; return fallbackActions[integrationId] || [{ summary: 'Generic Action', description: 'Perform actions with this integration' }]; }; if (loading) { return _jsxs(_components.div, { children: [_jsxs(_components.p, { children: ["Loading actions for ", integrationId, "..."] }), _jsx(_components.div, { style: { display: 'inline-flex', flexWrap: 'wrap', gap: '0.5em', marginTop: '8px' }, children: [...Array(8)].map((_, i) => _jsx(_components.div, { style: { alignItems: 'center', padding: '2px 6px', borderRadius: '32px', border: '1px solid var(--superblocks-accent-blue-subtle)', background: 'var(--superblocks-accent-blue-subtle)', height: '20px', width: `${Math.random() * 100 + 80}px` }, children: _jsx(_components.div, { style: { height: '12px', backgroundColor: '#e1e5e9', borderRadius: '4px', width: '100%' } }) }, i)) })] }); } if (error) {} const displayedActions = showAll ? actions : actions.slice(0, maxActions); const hiddenCount = actions.length - maxActions; return _jsxs(_components.div, { children: [actions.length === 0 && _jsxs(_components.p, { style: { color: 'red', fontWeight: 'bold' }, children: ["No actions found for ", integrationId, ". Check console for errors."] }), _jsxs(_components.div, { style: { display: 'inline-flex', flexWrap: 'wrap', gap: '0.5em', marginTop: '8px' }, children: [displayedActions.map((action, index) => _jsx(_components.div, { style: { alignItems: 'center', padding: '4px 8px', borderRadius: '32px', border: '1px solid var(--superblocks-accent-blue-subtle)', background: 'var(--superblocks-accent-blue-subtle)', transition: 'display 0.3ms ease-in' }, children: _jsx(_components.h4, { style: { color: 'var(--ifm-color-primary-darker)', marginBottom: 'unset', alignSelf: 'center', fontSize: '12px', fontStyle: 'normal', fontWeight: '500', lineHeight: '16px', margin: '0', padding: '0' }, children: action.summary }) }, index)), showAll && _jsx(_components.a, { href: `https://app.superblocks.com/integrations/${integrationId === 'openai' ? 'openai_v2' : integrationId}`, target: "_blank", rel: "noopener noreferrer", style: { color: 'var(--ifm-color-primary)', fontSize: '12px', textDecoration: 'none', border: 'none', borderBottom: 'none', padding: '4px 0', marginLeft: '8px', alignSelf: 'center', whiteSpace: 'nowrap' }, children: "See full list in app →" })] }), !showAll && hiddenCount > 0 && _jsx(_components.div, { style: { marginTop: '8px', textAlign: 'center' }, children: _jsxs(_components.button, { onClick: () => setShowAll(true), style: { background: 'none', border: 'none', color: '#6c7989', cursor: 'pointer', textDecoration: 'underline', fontSize: '14px' }, children: ["and ", hiddenCount, " more"] }) }), showAll && hiddenCount > 0 && _jsx(_components.div, { style: { marginTop: '8px', textAlign: 'center' }, children: _jsx(_components.button, { onClick: () => setShowAll(false), style: { background: 'none', border: 'none', color: '#6c7989', cursor: 'pointer', textDecoration: 'underline', fontSize: '14px' }, children: "show less" }) })] }); }; const DynamicIntegrationSetup = ({integrationId, title}) => { const _components = { br: "br", div: "div", h1: "h1", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", span: "span", strong: "strong", ul: "ul", ..._provideComponents() }; const [setupContent, setSetupContent] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchIntegrationSpec = async () => { try { setLoading(true); const response = await fetch(`https://integrations.superblocks.com/openapi/${integrationId}.yaml`); if (!response.ok) { throw new Error(`Failed to fetch integration spec: ${response.status}`); } const yamlText = await response.text(); const infoStartIndex = yamlText.indexOf('\ninfo:'); if (infoStartIndex === -1) { const altIndex = yamlText.indexOf('info:'); if (altIndex !== 0) { throw new Error('Could not find info section in YAML'); } } let afterInfo, infoSection; if (infoStartIndex !== -1) { afterInfo = yamlText.slice(infoStartIndex + 6); } else { afterInfo = yamlText.slice(5); } const lines = afterInfo.split('\n'); let infoEndIndex = afterInfo.length; for (let i = 0; i < lines.length; i++) { const line = lines[i]; if (line.trim() && !line.match(/^\s/)) { infoEndIndex = afterInfo.indexOf(line); break; } } infoSection = afterInfo.slice(0, infoEndIndex).trim(); let overviewText = null; const multilineMatchDash = infoSection.match(/description:\s*\|\-\s*\n([\s\S]*?)(?=\n\s+(?:termsOfService|version|contact|license|x-public-description):|$)/); if (multilineMatchDash) { overviewText = multilineMatchDash[1].replace(/^\s+|\s+$/g, ''); } else { const multilineMatch = infoSection.match(/description:\s*\|\s*\n([\s\S]*?)(?=\n\s+(?:termsOfService|version|contact|license|x-public-description):|$)/); if (multilineMatch) { overviewText = multilineMatch[1].replace(/^\s+|\s+$/g, ''); } else { const simpleMatch = infoSection.match(/description:\s*([\s\S]*?)(?=\n\s+(?:termsOfService|version|contact|license|x-public-description):|$)/); if (simpleMatch) { overviewText = simpleMatch[1].trim(); } } } if (!overviewText) { throw new Error('Could not extract description/overview from YAML spec'); } const parsedOverview = parseOverview(overviewText); if (!parsedOverview.setup) { throw new Error('Could not parse setup section from overview'); } const titleMatch = infoSection.match(/title:\s*(.+)/); const specTitle = titleMatch ? titleMatch[1].trim() : title; const content = `${parsedOverview.setup} ### Add integration Once you have an access token, you're ready to set up your Superblocks integration. 1. In the web app, navigate to the [Integrations](https://app.superblocks.com/integrations) page 2. Click on the **${specTitle}** tile 3. **Name** the integration 4. Paste your credentials into the relevant fields 5. Optionally, add more configurations to set credentials for [different environments](/development-lifecycle/build/profiles) 6. Click **Create**`; setSetupContent(content); setError(null); } catch (err) { setError(err.message); setSetupContent(null); } finally { setLoading(false); } }; fetchIntegrationSpec(); }, [integrationId, title]); const parseOverview = overview => { const startIndex = overview.indexOf('## Get started'); if (startIndex === -1) { const nextSectionMatch = overview.match(/\n##\s+/); if (!nextSectionMatch) { return { description: overview.trim(), setup: null, usage: null }; } else { const nextSectionIndex = nextSectionMatch.index; return { description: overview.slice(0, nextSectionIndex).trim(), setup: null, usage: overview.slice(nextSectionIndex).trim() }; } } const lines = overview.split('\n'); let getStartedLineIndex = -1; for (let i = 0; i < lines.length; i++) { if (lines[i].trim().startsWith('## Get started')) { getStartedLineIndex = i; break; } } if (getStartedLineIndex === -1) { return { description: overview.slice(0, startIndex).trim(), setup: overview.slice(startIndex).replace('## Get started', '### Create an access token').trim(), usage: null }; } let nextSectionLineIndex = -1; for (let i = getStartedLineIndex + 1; i < lines.length; i++) { const trimmedLine = lines[i].trim(); if (trimmedLine.startsWith('##') && !trimmedLine.includes('Get started')) { nextSectionLineIndex = i; break; } } let endIndex; if (nextSectionLineIndex === -1) { endIndex = overview.length; } else { let currentPos = 0; for (let i = 0; i < nextSectionLineIndex; i++) { currentPos += lines[i].length + 1; } endIndex = currentPos; } return { description: overview.slice(0, startIndex).trim(), setup: overview.slice(startIndex, endIndex).replace('## Get started', '### Create an access token').trim(), usage: overview.slice(endIndex).trim() }; }; if (loading) { return _jsxs(_components.div, { children: [_jsx(_components.div, { style: { height: '20px', backgroundColor: '#e1e5e9', borderRadius: '4px', marginBottom: '16px', width: '40%' } }), _jsx(_components.div, { style: { height: '16px', backgroundColor: '#e1e5e9', borderRadius: '4px', marginBottom: '8px' } }), _jsx(_components.div, { style: { height: '16px', backgroundColor: '#e1e5e9', borderRadius: '4px', marginBottom: '8px' } }), _jsx(_components.div, { style: { height: '16px', backgroundColor: '#e1e5e9', borderRadius: '4px', marginBottom: '8px' } }), _jsx(_components.div, { style: { height: '16px', backgroundColor: '#e1e5e9', borderRadius: '4px', width: '60%' } })] }); } if (error) { return _jsxs(_components.div, { style: { padding: '12px', backgroundColor: '#fee', border: '1px solid #fcc', borderRadius: '4px', color: '#c00' }, children: [_jsx(_components.strong, { children: "Error parsing setup:" }), " ", error] }); } if (!setupContent) { return _jsxs(_components.div, { style: { padding: '12px', backgroundColor: '#fee', border: '1px solid #fcc', borderRadius: '4px', color: '#c00' }, children: [_jsx(_components.strong, { children: "Error:" }), " No setup content found for ", integrationId] }); } const renderMarkdown = content => { const lines = content.split('\n'); const elements = []; let currentOrderedList = []; let currentUnorderedList = []; let lastOrderedItemIndex = -1; let lastElementWasHeader = false; for (let i = 0; i < lines.length; i++) { const originalLine = lines[i]; const line = originalLine.trim(); const indentLevel = originalLine.length - originalLine.trimStart().length; if (!line) { if (currentOrderedList.length > 0) { elements.push(_jsx(_components.ol, { children: currentOrderedList }, `ol-${i}`)); currentOrderedList = []; lastOrderedItemIndex = -1; lastElementWasHeader = false; } if (currentUnorderedList.length > 0) { elements.push(_jsx(_components.ul, { children: currentUnorderedList }, `ul-${i}`)); currentUnorderedList = []; lastElementWasHeader = false; } let nextNonEmptyLine = null; for (let j = i + 1; j < lines.length; j++) { const nextLine = lines[j].trim(); if (nextLine) { nextNonEmptyLine = nextLine; break; } } const isHeader = nextNonEmptyLine && (nextNonEmptyLine.startsWith('# ') || nextNonEmptyLine.startsWith('## ') || nextNonEmptyLine.startsWith('### ')); const isLearnMore = nextNonEmptyLine && nextNonEmptyLine.toLowerCase().includes('learn more about'); const noteCheckText = nextNonEmptyLine.replace(/\*\*/g, '').toLowerCase(); const isNote = nextNonEmptyLine && (noteCheckText.startsWith('note:') || noteCheckText.includes('note:')); if (isNote) { elements.push(_jsx(_components.br, {}, `br-before-note-${i}`)); } else if (!lastElementWasHeader && !isHeader && !isLearnMore) { elements.push(_jsx(_components.br, {}, `br-${i}`)); } continue; } if (line.startsWith('### ')) { if (currentOrderedList.length > 0) { elements.push(_jsx(_components.ol, { children: currentOrderedList }, `ol-${i}`)); currentOrderedList = []; lastOrderedItemIndex = -1; } if (currentUnorderedList.length > 0) { elements.push(_jsx(_components.ul, { children: currentUnorderedList }, `ul-${i}`)); currentUnorderedList = []; } elements.push(_jsx(_components.h3, { children: line.substring(4) }, `h3-${i}`)); lastElementWasHeader = true; continue; } if (line.startsWith('## ')) { if (currentOrderedList.length > 0) { elements.push(_jsx(_components.ol, { children: currentOrderedList }, `ol-${i}`)); currentOrderedList = []; lastOrderedItemIndex = -1; } if (currentUnorderedList.length > 0) { elements.push(_jsx(_components.ul, { children: currentUnorderedList }, `ul-${i}`)); currentUnorderedList = []; } elements.push(_jsx(_components.h2, { children: line.substring(3) }, `h2-${i}`)); lastElementWasHeader = true; continue; } if (line.startsWith('# ')) { if (currentOrderedList.length > 0) { elements.push(_jsx(_components.ol, { children: currentOrderedList }, `ol-${i}`)); currentOrderedList = []; lastOrderedItemIndex = -1; } if (currentUnorderedList.length > 0) { elements.push(_jsx(_components.ul, { children: currentUnorderedList }, `ul-${i}`)); currentUnorderedList = []; } elements.push(_jsx(_components.h1, { children: line.substring(2) }, `h1-${i}`)); lastElementWasHeader = true; continue; } const trimmedLineForOrdered = line.trimStart(); if (trimmedLineForOrdered.match(/^\d+\.\s/)) { if (currentUnorderedList.length > 0 && lastOrderedItemIndex >= 0) { const nestedList = _jsx(_components.ul, { children: currentUnorderedList }, `nested-ul-${i}`); const lastItem = currentOrderedList[lastOrderedItemIndex]; currentOrderedList[lastOrderedItemIndex] = _jsxs(_components.li, { children: [_jsx(_components.span, { dangerouslySetInnerHTML: { __html: lastItem.props.dangerouslySetInnerHTML.__html } }), nestedList] }, `li-nested-${lastOrderedItemIndex}`); currentUnorderedList = []; } const listItem = trimmedLineForOrdered.replace(/^\d+\.\s/, ''); const processedItem = processInlineMarkdown(listItem); currentOrderedList.push(_jsx(_components.li, { dangerouslySetInnerHTML: { __html: processedItem } }, `li-${i}`)); lastOrderedItemIndex = currentOrderedList.length - 1; lastElementWasHeader = false; continue; } const trimmedLine = line.trimStart(); if (trimmedLine.startsWith('- ') || trimmedLine.startsWith('* ')) { if (indentLevel > 0 && currentOrderedList.length > 0) { const listItem = trimmedLine.substring(2); const processedItem = processInlineMarkdown(listItem); currentUnorderedList.push(_jsx(_components.li, { dangerouslySetInnerHTML: { __html: processedItem } }, `li-${i}`)); lastElementWasHeader = false; continue; } const listItem = trimmedLine.substring(2); const processedItem = processInlineMarkdown(listItem); currentUnorderedList.push(_jsx(_components.li, { dangerouslySetInnerHTML: { __html: processedItem } }, `li-${i}`)); lastElementWasHeader = false; continue; } if (currentUnorderedList.length > 0 && lastOrderedItemIndex >= 0 && currentOrderedList.length > 0) { const nestedList = _jsx(_components.ul, { children: currentUnorderedList }, `nested-ul-${i}`); const lastItem = currentOrderedList[lastOrderedItemIndex]; currentOrderedList[lastOrderedItemIndex] = _jsxs(_components.li, { children: [_jsx(_components.span, { dangerouslySetInnerHTML: { __html: lastItem.props.dangerouslySetInnerHTML.__html } }), nestedList] }, `li-nested-${lastOrderedItemIndex}`); currentUnorderedList = []; lastOrderedItemIndex = -1; } if (currentOrderedList.length > 0) { elements.push(_jsx(_components.ol, { children: currentOrderedList }, `ol-${i}`)); currentOrderedList = []; lastOrderedItemIndex = -1; } if (currentUnorderedList.length > 0) { elements.push(_jsx(_components.ul, { children: currentUnorderedList }, `ul-${i}`)); currentUnorderedList = []; } const processedLine = processInlineMarkdown(line); elements.push(_jsx(_components.p, { dangerouslySetInnerHTML: { __html: processedLine } }, `p-${i}`)); lastElementWasHeader = false; } if (currentUnorderedList.length > 0 && lastOrderedItemIndex >= 0 && currentOrderedList.length > 0) { const nestedList = _jsx(_components.ul, { children: currentUnorderedList }, "nested-ul-final"); const lastItem = currentOrderedList[lastOrderedItemIndex]; currentOrderedList[lastOrderedItemIndex] = _jsxs(_components.li, { children: [_jsx(_components.span, { dangerouslySetInnerHTML: { __html: lastItem.props.dangerouslySetInnerHTML.__html } }), nestedList] }, `li-nested-final-${lastOrderedItemIndex}`); currentUnorderedList = []; } if (currentOrderedList.length > 0) { elements.push(_jsx(_components.ol, { children: currentOrderedList }, "ol-final")); } if (currentUnorderedList.length > 0) { elements.push(_jsx(_components.ul, { children: currentUnorderedList }, "ul-final")); } return elements; }; const processInlineMarkdown = text => { return text.replace(/\*\*(.*?)\*\*/g, '$1').replace(/\[([^\]]+)\]$([^)]+)$/g, '$1').replace(/`([^`]+)`/g, '$1'); }; return _jsx(_components.div, { children: setupContent && renderMarkdown(setupContent) }); }; const DynamicIntegrationOverview = ({integrationId}) => { const _components = { div: "div", p: "p", strong: "strong", ..._provideComponents() }; const [overview, setOverview] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchIntegrationSpec = async () => { try { setLoading(true); const response = await fetch(`https://integrations.superblocks.com/openapi/${integrationId}.yaml`); if (!response.ok) { throw new Error(`Failed to fetch integration spec: ${response.status}`); } const yamlText = await response.text(); const infoStartIndex = yamlText.indexOf('\ninfo:'); if (infoStartIndex === -1) { const altIndex = yamlText.indexOf('info:'); if (altIndex === 0) { const afterInfo = yamlText.slice(5); const lines = afterInfo.split('\n'); let infoEndIndex = afterInfo.length; for (let i = 0; i < lines.length; i++) { const line = lines[i]; if (line.trim() && !line.match(/^\s/)) { infoEndIndex = afterInfo.indexOf(line); break; } } var infoSection = afterInfo.slice(0, infoEndIndex).trim(); } else { throw new Error('Could not find info section in YAML'); } } else { const afterInfo = yamlText.slice(infoStartIndex + 6); const lines = afterInfo.split('\n'); let infoEndIndex = afterInfo.length; for (let i = 0; i < lines.length; i++) { const line = lines[i]; if (line.trim() && !line.match(/^\s/)) { infoEndIndex = afterInfo.indexOf(line); break; } } var infoSection = afterInfo.slice(0, infoEndIndex).trim(); } let overviewText = null; const multilineMatchDash = infoSection.match(/description:\s*\|\-\s*\n([\s\S]*?)(?=\n\s+(?:termsOfService|version|contact|license|x-public-description):|$)/); if (multilineMatchDash) { overviewText = multilineMatchDash[1].trim(); } else { const multilineMatch = infoSection.match(/description:\s*\|\s*\n([\s\S]*?)(?=\n\s+(?:termsOfService|version|contact|license|x-public-description):|$)/); if (multilineMatch) { overviewText = multilineMatch[1].trim(); } else { const simpleMatch = infoSection.match(/description:\s*([\s\S]*?)(?=\n\s+(?:termsOfService|version|contact|license|x-public-description):|$)/); if (simpleMatch) { overviewText = simpleMatch[1].trim(); } } } if (!overviewText) { throw new Error('Could not extract description/overview from YAML spec'); } const parsedOverview = parseOverview(overviewText); if (!parsedOverview.description) { throw new Error('Could not parse description from overview'); } setOverview({ description: parsedOverview.description }); setError(null); } catch (err) { setError(err.message); setOverview(null); } finally { setLoading(false); } }; fetchIntegrationSpec(); }, [integrationId]); const parseOverview = overview => { const HEADER_OFFSET = 3; const startIndex = overview.indexOf('## Get started'); let endIndex = overview.slice(startIndex + HEADER_OFFSET).indexOf("\n##"); if (startIndex === -1 && endIndex === -1) { return { description: overview.trim(), setup: null, usage: null }; } else if (startIndex === -1) { endIndex = endIndex + startIndex + HEADER_OFFSET; return { description: overview.slice(0, endIndex).trim(), setup: null, usage: overview.slice(endIndex).trim() }; } else if (endIndex === -1) { return { description: overview.slice(0, startIndex).trim(), setup: overview.slice(startIndex).replace('## Get started', '### Create an access token').trim(), usage: null }; } else { endIndex = endIndex + startIndex + HEADER_OFFSET; return { description: overview.slice(0, startIndex).trim(), setup: overview.slice(startIndex, endIndex).replace('## Get started', '### Create an access token').trim(), usage: overview.slice(endIndex).trim() }; } }; if (loading) { return _jsxs(_components.div, { children: [_jsx(_components.div, { style: { height: '20px', backgroundColor: '#e1e5e9', borderRadius: '4px', marginBottom: '16px', width: '60%' } }), _jsx(_components.div, { style: { height: '16px', backgroundColor: '#e1e5e9', borderRadius: '4px', marginBottom: '8px' } }), _jsx(_components.div, { style: { height: '16px', backgroundColor: '#e1e5e9', borderRadius: '4px', marginBottom: '8px', width: '80%' } }), _jsx(_components.div, { style: { height: '16px', backgroundColor: '#e1e5e9', borderRadius: '4px', width: '70%' } })] }); } if (error) { return _jsxs(_components.div, { style: { padding: '12px', backgroundColor: '#fee', border: '1px solid #fcc', borderRadius: '4px', color: '#c00' }, children: [_jsx(_components.strong, { children: "Error parsing overview:" }), " ", error] }); } if (!overview || !overview.description) { return _jsxs(_components.div, { style: { padding: '12px', backgroundColor: '#fee', border: '1px solid #fcc', borderRadius: '4px', color: '#c00' }, children: [_jsx(_components.strong, { children: "Error:" }), " No overview description found for ", integrationId] }); } return _jsx(_components.div, { children: _jsx(_components.p, { children: overview.description }) }); }; const Alert = ({type, title, children}) => { const _components = { div: "div", ..._provideComponents() }; const getIcon = () => { switch (type) { case 'info': return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E"; case 'success': return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm4.293 6.293L9 11.586 5.707 8.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414l4 4c.391.391 1.024.391 1.414 0l6-6c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%230CC26D'/%3E%3C/svg%3E"; case 'warning': return "data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxMDgwJyBoZWlnaHQ9JzEwODAnPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3RyYW5zcGFyZW50Jy8+PHBhdGggZD0nTTEzLjc5NCAxMC43NSA4LjMgMS4yNWExLjUgMS41IDAgMCAwLTIuNiAwbC01LjQ5NCA5LjVBMS40OTQgMS40OTQgMCAwIDAgMS41IDEzaDExYTEuNDkzIDEuNDkzIDAgMCAwIDEuMjk0LTIuMjVNNi41IDUuNWEuNS41IDAgMCAxIDEgMFY4YS41LjUgMCAwIDEtMSAwek03IDExYS43NS43NSAwIDEgMSAwLTEuNS43NS43NSAwIDAgMSAwIDEuNScgc3R5bGU9J3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDojZmY5ZjM1O2ZpbGwtcnVsZTpub256ZXJvO29wYWNpdHk6MScgdHJhbnNmb3JtPSd0cmFuc2xhdGUoLjAyIDE5LjMwNSlzY2FsZSg3Ny4xNCknLz48L3N2Zz4="; case 'danger': return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm5.707 4.293L10 9.586 4.293 4.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414L8.586 11l-5.707 5.293c-.391.391-.391 1.024 0 1.414s1.024.391 1.414 0L10 12.414l5.707 5.293c.391.391 1.024.391 1.414 0s.391-1.024 0-1.414L11.414 11l5.707-5.293c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%23F45252'/%3E%3C/svg%3E"; case 'note': return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E"; default: return ""; } }; return _jsxs(_components.div, { className: `alert alert--${type}`, children: [_jsx(_components.div, { className: "alert-icon", style: { backgroundImage: `url("${getIcon()}")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center center', backgroundSize: '20px', width: '24px', height: '24px', position: 'absolute', left: '16px', top: '16px' } }), _jsxs(_components.div, { className: "alert-content", children: [title && _jsx(_components.div, { className: "alert-title", children: title }), _jsx(_components.div, { className: "alert-body", children: children })] })] }); }; function _createMdxContent(props) { const _components = { p: "p", ..._provideComponents(), ...props.components }, {Heading} = _components; if (!Heading) _missingMdxReference("Heading", true); return _jsxs(_Fragment, { children: [_jsx(DynamicIntegrationOverview, { integrationId: "sendgrid" }), "\n", _jsx(Heading, { level: "2", id: "setting-up-sendgrid", children: "Setting up SendGrid" }), "\n", _jsx(DynamicIntegrationSetup, { integrationId: "sendgrid", title: "SendGrid" }), "\n", _jsx(Alert, { type: "success", children: _jsx(IntegrationSuccess, { integrationName: "SendGrid" }) }), "\n", _jsx(Heading, { level: "2", id: "use-sendgrid-in-apis", children: "Use SendGrid in APIs" }), "\n", _jsx(_components.p, { children: "Once your SendGrid integration is created, you can start calling SendGrid actions in Superblocks APIs. In addition to generic HTTP requests, SendGrid supports the following actions." }), "\n", _jsx(Heading, { level: "3", id: "supported-actions", children: "Supported actions" }), "\n", _jsx(DynamicIntegrationActions, { integrationId: "sendgrid", maxActions: 15 })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { IntegrationSuccess, DynamicIntegrationActions, DynamicIntegrationSetup, DynamicIntegrationOverview, Alert, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Integrations

Authentication & authorization

Troubleshooting

Documentation Index

​Setting up SendGrid

​Use SendGrid in APIs

​Supported actions

Setting up SendGrid

Use SendGrid in APIs

Supported actions