export default function Connections()

in packages/graph-explorer/src/workspaces/Connections/Connections.tsx [21:80]
58 lines of code
5 McCabe index (conditional complexity)

export default function Connections() {
  const config = useConfiguration();
  const configuration = useAtomValue(configurationAtom);
  const [isModalOpen, setModal] = useState(configuration.size === 0);
  const isSyncing = useIsSyncing();

  return (
    <Workspace>
      <Workspace.TopBar logoVisible>
        <Workspace.TopBar.Title
          title="Connections Details"
          subtitle={`Connection: ${config?.displayLabel || config?.id || "none"}`}
        />
        <Workspace.TopBar.Version>
          {__GRAPH_EXP_VERSION__}
        </Workspace.TopBar.Version>
        <Workspace.TopBar.AdditionalControls>
          <div className="flex gap-2">
            <Link
              to="/settings/general"
              className={cn(buttonStyles({ variant: "default" }))}
            >
              <GearIcon />
              Settings
            </Link>

            <Link
              to={
                !config?.schema?.lastUpdate ? "/connections" : "/graph-explorer"
              }
              className={cn(buttonStyles({ variant: "filled" }))}
              aria-disabled={!config?.schema?.lastUpdate}
            >
              <ExplorerIcon />
              Open {APP_NAME}
            </Link>
          </div>
        </Workspace.TopBar.AdditionalControls>
      </Workspace.TopBar>
      <Workspace.Content>
        <div className="grid h-full grid-cols-2 gap-2">
          <div className="h-full grow">
            <AvailableConnections
              isSync={isSyncing}
              isModalOpen={isModalOpen}
              onModalChange={setModal}
            />
          </div>
          {config ? (
            <div className="h-full grow">
              <ConnectionDetail config={config} />
            </div>
          ) : (
            <NoActiveConnectionPanel />
          )}
        </div>
      </Workspace.Content>
    </Workspace>
  );
}