@spacemade/ui 0.0.1

package/src/pages/providers/[name].tsx

@@ -0,0 +1,512 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { useMemo, useState } from 'react'
+import type { GetServerSideProps, NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useDisclosure } from '@chakra-ui/react'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { DetailHero } from '@components/common/layout/DetailHero'
+import Spinner from '@components/common/loading/Spinner'
+import Button from '@components/common/button/Button'
+import { APIHelpers } from '@helpers/api'
+import { PageProps } from '@helpers/types/page-props'
+import { SiteLogoIcon } from '@helpers/images'
+import { ProviderConnectModal } from '@components/provider/ProviderConnectModal'
+import { InTheNews } from '@components/post/block/InTheNews'
+import {
+  useGetProviderQuery,
+  useListProvidersQuery,
+  useListProvidersWithMySettingsQuery,
+} from '@store/slice/api/providerApiSlice'
+import { useListSettingsQuery } from '@store/slice/api/providerSettingApiSlice'
+import { createProjectSlug } from '@helpers/slugUtils'
+import { ProviderFeaturesSideNav } from '@components/providers/ProviderFeaturesSideNav'
+import {
+  PROVIDER_FEATURES,
+  getProviderFeatureLabel,
+  getProviderFeatureQueryParams,
+  isProviderFeatureSlug,
+} from '@helpers/providers/providerFeatures'
+import { useGetApprovedPostsQuery } from '@store/slice/api/postApiSlice'
+
+type ProviderDetailProps = PageProps & {
+  user?: string | null
+  providerId?: string | null
+  isLoggedIn?: boolean
+}
+
+type SupportedApp = {
+  key: string
+  label: string
+  href: string
+  icon: string
+}
+
+const ProviderDetail: NextPage<ProviderDetailProps> = ({ user, providerId, isLoggedIn }) => {
+  const router = useRouter()
+  const slugFromUrl = router.query.name?.toString() || ''
+  const isFeaturePage = isProviderFeatureSlug(slugFromUrl)
+  const featureQueryParams = getProviderFeatureQueryParams(slugFromUrl)
+  const isUserLoggedIn = typeof isLoggedIn === 'boolean' ? isLoggedIn : Boolean(user)
+
+  const listArgs = { limit: 100, ...featureQueryParams }
+  const { data: dataWithSettings, isFetching: isFetchingWithSettings } =
+    useListProvidersWithMySettingsQuery(listArgs, {
+      skip: !isFeaturePage || !isUserLoggedIn,
+    })
+
+  const { data: dataPublic, isFetching: isFetchingProviders } =
+    useListProvidersQuery(listArgs, {
+      skip: !isFeaturePage || isUserLoggedIn,
+    })
+
+  const featureProviders = (isUserLoggedIn ? dataWithSettings : dataPublic)?.results ?? []
+
+  const { data, isFetching } = useGetProviderQuery(
+    { idOrKey: providerId || '', isAdmin: false },
+    { skip: !providerId || isFeaturePage }
+  )
+  const provider = (data as any)?.provider
+
+  const {
+    data: mySettings,
+    isFetching: isFetchingSettings,
+    refetch: refetchSettings,
+  } = useListSettingsQuery(
+    { providerId, limit: 50 },
+    { skip: !providerId || !user || isFeaturePage }
+  )
+
+  const connectedRows = useMemo(() => {
+    return (((mySettings as any)?.data || []) as any[]).filter(Boolean)
+  }, [mySettings])
+
+  const supportsFeature = (camelKey: string) => {
+    const p: any = provider
+    return p?.[camelKey] === true
+  }
+
+  const supportedApps = useMemo<SupportedApp[]>(() => {
+    return [
+      {
+        key: 'projects',
+        label: 'Projects',
+        href: '/projects',
+        icon: 'bi-folder2-open',
+      },
+      {
+        key: 'storage',
+        label: 'Storage',
+        href: '/storage',
+        icon: 'bi-hdd-stack',
+      },
+    ].filter((item) =>
+      item.key === 'projects'
+        ? supportsFeature('hasProject')
+        : supportsFeature('hasStorage')
+    )
+  }, [provider])
+
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [editing, setEditing] = useState<any | undefined>(undefined)
+
+  const isProviderConnected = (providerItem: any) => Boolean(providerItem?.mySetting)
+  const isFetchingFeatureProviders = isUserLoggedIn
+    ? isFetchingWithSettings
+    : isFetchingProviders
+
+  const { data: providerPosts, isFetching: isFetchingPosts } = useGetApprovedPostsQuery(
+    { limit: 5, providerId: providerId || undefined },
+    { skip: !providerId || isFeaturePage }
+  )
+  const hasPosts = Boolean((providerPosts as any)?.count)
+
+  if (isFeaturePage) {
+    if (isFetchingFeatureProviders && featureProviders.length === 0) {
+      return (
+        <div className="w-100 h-100 d-flex justify-content-center align-items-center">
+          <Spinner color="primary" />
+        </div>
+      )
+    }
+
+    const visibleProviders = !isUserLoggedIn
+      ? featureProviders.slice(1)
+      : featureProviders
+
+    const connectedProviders = isUserLoggedIn
+      ? visibleProviders.filter(isProviderConnected)
+      : []
+
+    const notConnectedProviders = isUserLoggedIn
+      ? visibleProviders.filter((p) => !isProviderConnected(p))
+      : visibleProviders
+
+    const Section = ({
+      items,
+    }: {
+      items: any[]
+    }) =>
+      items.length > 0 ? (
+        <div className="my-1">
+          <div className="row row-cols-sm-3 row-cols-lg-4 g-4 my-4">
+            {items.map((p: any) => {
+              const name = p.label ?? ''
+              const slug = createProjectSlug(name)
+              const isConnected = isProviderConnected(p)
+              const buttonLabel = isConnected ? 'Connected' : undefined
+
+              return (
+                <div className="col" key={p.id}>
+                  <div className="border rounded-3 p-3 h-100 bg-white">
+                    <h6 className="mb-2 text-truncate">{name}</h6>
+                    <p className="small text-muted mb-3 text-truncate">{p.description || '-'}</p>
+                    <Link
+                      href={`/providers/${slug}`}
+                      className={`btn btn-sm ${isConnected ? 'btn-success' : 'btn-primary'} w-100`}
+                    >
+                      {buttonLabel || (isUserLoggedIn ? 'Connect' : 'View')}
+                    </Link>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      ) : null
+
+    return (
+      <SideNavLayout
+        useMainContentAreaId={false}
+        sidebarContent={(isCollapsed) =>
+          isUserLoggedIn && !isCollapsed ? <ProviderFeaturesSideNav /> : null
+        }
+      >
+        <div className="mt-5 w-100">
+          <div className="d-flex align-items-center w-100">
+            <h1 className="mb-0">Providers</h1>
+            <select
+              id="provider-feature-filter"
+              className="form-select ms-auto"
+              style={{ width: '220px' }}
+              value={slugFromUrl}
+              onChange={(event) => {
+                const value = event.target.value
+                router.push(value === 'all' ? '/providers' : `/providers/${value}`)
+              }}
+            >
+              <option value="all">All features</option>
+              {PROVIDER_FEATURES.map((feature) => (
+                <option key={feature.slug} value={feature.slug}>
+                  {feature.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <Section items={connectedProviders} />
+
+          {isUserLoggedIn &&
+            connectedProviders.length > 0 &&
+            notConnectedProviders.length > 0 && (
+              <div className="mt-5 w-100">
+                <h2 className="mb-0">Available</h2>
+              </div>
+            )}
+
+          <Section items={notConnectedProviders} />
+        </div>
+      </SideNavLayout>
+    )
+  }
+
+  if (isFetching && !provider) {
+    return (
+      <div className="w-100 h-100 d-flex justify-content-center align-items-center">
+        <Spinner color="primary" />
+      </div>
+    )
+  }
+
+  if (!provider) return null
+
+  const media = (provider as any)?.iconMedia?.media
+  const logoSrc = media?.sourceUrl || SiteLogoIcon
+  const logoAlt = media?.details?.altText || `${provider.label || 'Provider'} icon`
+
+  const primaryCta = !user ? 'Join' : 'Add'
+
+  const handlePrimaryClick = () => {
+    if (!user) {
+      router.push('/signup')
+      return
+    }
+
+    setEditing(undefined)
+    onOpen()
+  }
+
+  const showStatusBadge = connectedRows.length > 0 && provider.status === 'active'
+  const defaultSettingsForModal = editing || undefined
+
+  return (
+    <SideNavLayout
+      useMainContentAreaId={false}
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">Providers</h2>
+          <ul className="sidebar-list mb-5">
+            <li className="sidebar-item" title="Back to Providers">
+              <Link href="/providers" className="sidebar-link">
+                <i className="bi bi-arrow-left" /> <span>Back</span>
+              </Link>
+            </li>
+          </ul>
+        </>
+      )}
+      renderMainNav={() => null}
+    >
+      <DetailHero
+        logoSrc={logoSrc}
+        logoAlt={logoAlt}
+        title={provider.label}
+        description={provider.description}
+        backHref="/providers"
+        backLabel="Providers"
+        titleBadge={
+          showStatusBadge ? (
+            <span className="badge text-white text-bg-success">Active</span>
+          ) : null
+        }
+        actions={
+          <Button
+            color={primaryCta === 'Join' ? 'primary' : 'success'}
+            className="text-white fw-bold w-xs-150p"
+            onClick={handlePrimaryClick}
+          >
+            {primaryCta}
+          </Button>
+        }
+      />
+
+      {user && (
+        <div className="container mt-5">
+          <div className="d-flex align-items-center justify-content-between gap-3 flex-wrap">
+            <h2 className="fs-4 fw-bolder">Connections</h2>
+          </div>
+
+          <div className="mt-3">
+            {isFetchingSettings ? (
+              <div className="py-4 d-flex justify-content-center">
+                <Spinner color="primary" />
+              </div>
+            ) : !connectedRows.length ? (
+              <div className="alert alert-light border mb-0">
+                No connections yet. Click "Add" to create one.
+              </div>
+            ) : (
+              <div className="table-responsive">
+                <table className="table table-hover align-middle mb-0">
+                  <thead>
+                    <tr>
+                      <th style={{ width: 260 }}>Name</th>
+                      <th>Summary</th>
+                      <th style={{ width: 200 }}>Created</th>
+                      <th style={{ width: 140 }} className="text-end">
+                        Actions
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {connectedRows.map((row) => {
+                      const name = row?.name || 'Connection'
+                      const created = row?.createdAt
+                        ? new Date(row.createdAt).toLocaleString()
+                        : ''
+
+                      const s = row?.settings || {}
+                      const summary =
+                        s?.account ||
+                        s?.org ||
+                        s?.region ||
+                        s?.project ||
+                        s?.baseUrl ||
+                        (Object.keys(s).length ? 'Configured' : '')
+
+                      return (
+                        <tr key={row.id}>
+                          <td className="fw-bold">{name}</td>
+                          <td className="text-muted">
+                            {summary || <span className="text-muted">-</span>}
+                          </td>
+                          <td className="text-muted">{created || '-'}</td>
+                          <td className="text-end">
+                            <button
+                              type="button"
+                              className="btn btn-link p-0 fw-bold text-decoration-none"
+                              onClick={() => {
+                                setEditing(row)
+                                onOpen()
+                              }}
+                              aria-label={`Edit connection ${name}`}
+                            >
+                              Edit
+                            </button>
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="container mt-5">
+        {provider.longDescription || provider.description ? (
+          <>
+            <h2 className="fs-4 fw-bolder">Description</h2>
+            <div className="ck-content">
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: (provider as any)?.longDescription || provider.description || '',
+                }}
+              />
+            </div>
+
+            {provider.websiteUrl && (
+              <div className="mt-4">
+                <Button
+                  color="secondary"
+                  className="fw-bold"
+                  onClick={() => window.open(provider.websiteUrl!, '_blank')}
+                >
+                  Docs
+                </Button>
+              </div>
+            )}
+          </>
+        ) : null}
+      </div>
+
+      {supportedApps.length > 0 && (
+        <div className="container mt-5">
+          <div className="d-flex align-items-center justify-content-between gap-3 flex-wrap">
+            <h2 className="fs-4 fw-bolder">Supported Apps</h2>
+          </div>
+          <div className="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 mt-1">
+            {supportedApps.map((app) => (
+              <div className="col" key={app.key}>
+                <Link href={app.href} className="text-decoration-none d-block h-100">
+                  <div className="border rounded p-3 h-100 d-flex align-items-center gap-3">
+                    <span className="text-primary fs-4">
+                      <i className={`bi ${app.icon}`} />
+                    </span>
+                    <div>
+                      <div className="fw-semibold text-dark">{app.label}</div>
+                      <div className="small text-muted">Open {app.label.toLowerCase()}</div>
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {(isFetchingPosts || hasPosts) && providerId ? (
+        <InTheNews
+          providerId={providerId}
+          title={`${provider?.label || 'Provider'} in the News`}
+          limit={5}
+          backgroundColor="transparent"
+        />
+      ) : null}
+
+      {user && (
+        <ProviderConnectModal
+          providerId={providerId}
+          defaultSettings={defaultSettingsForModal}
+          isOpen={isOpen}
+          onClose={() => {
+            onClose()
+            setEditing(undefined)
+            refetchSettings()
+          }}
+        />
+      )}
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  try {
+    const name = context.params?.name?.toString() || ''
+    const cookie = context.req.headers.cookie || ''
+
+    let user: string | null = null
+    try {
+      const auth = await APIHelpers.get(`/auth/user`, { Cookie: cookie })
+      user = auth?.user?.name || null
+    } catch {
+      user = null
+    }
+
+    const isLoggedIn = Boolean(user)
+
+    if (isProviderFeatureSlug(name)) {
+      return {
+        props: {
+          user,
+          isLoggedIn,
+          providerId: null,
+          pageTitle: `${getProviderFeatureLabel(name)} Providers`,
+        },
+      }
+    }
+
+    const list = await APIHelpers.get(`/provider?showAll=true`, { Cookie: cookie })
+    const providers: any[] =
+      (list as any)?.providers ||
+      (list as any)?.data ||
+      (list as any)?.results ||
+      (list as any)?.items ||
+      []
+
+    const match = providers.find((p) => {
+      const slug = (p?.slug || p?.key || '').toString()
+      const labelSlug = createProjectSlug((p?.label || '').toString())
+      return slug === name || labelSlug === name
+    })
+
+    if (!match?.id) {
+      return { redirect: { destination: '/providers', permanent: false } }
+    }
+
+    const correctSlug = createProjectSlug((match?.label || '').toString())
+    if (name !== correctSlug) {
+      return {
+        redirect: {
+          destination: `/providers/${correctSlug}`,
+          permanent: false,
+        },
+      }
+    }
+
+    return {
+      props: {
+        user,
+        isLoggedIn,
+        providerId: match.id,
+        pageTitle: match?.label ?? 'Provider',
+      },
+    }
+  } catch {
+    return { redirect: { destination: '/providers', permanent: false } }
+  }
+}
+
+export default ProviderDetail