function ConnectionDetail()

in packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx [75:176]
96 lines of code
4 McCabe index (conditional complexity)

function ConnectionDetail({ config }: ConnectionDetailProps) {
  const t = useTranslations();
  const [edit, setEdit] = useState(false);

  const { isFetching: isSync } = useSchemaSync();

  const onConfigExport = useCallback(() => {
    saveConfigurationToFile(config);
  }, [config]);

  const deleteActiveConfig = useDeleteActiveConfiguration();

  const dbUrl = config.connection
    ? config.connection.proxyConnection
      ? config.connection.graphDbUrl
      : config.connection.url
    : MISSING_DISPLAY_VALUE;

  return (
    <Panel>
      <PanelHeader>
        <PanelTitle>
          <DatabaseIcon className="size-5" />
          {config.displayLabel || config.id}
        </PanelTitle>
        <PanelHeaderActions>
          <PanelHeaderActionButton
            label="Export Connection"
            icon={<TrayArrowIcon />}
            isDisabled={isSync}
            onActionClick={onConfigExport}
          />
          <PanelHeaderDivider />
          <PanelHeaderActionButton
            label="Edit connection"
            icon={<EditIcon />}
            isDisabled={isSync}
            onActionClick={() => setEdit(true)}
          />
          <PanelHeaderActionButton
            label="Delete connection"
            icon={<DeleteIcon />}
            color="danger"
            isDisabled={isSync}
            onActionClick={deleteActiveConfig}
          />
        </PanelHeaderActions>
      </PanelHeader>
      <PanelContent>
        <InfoBar className="@sm:flex hidden">
          <InfoItem className="shrink-0">
            <InfoItemIcon>
              <GlobeIcon />
            </InfoItemIcon>
            <InfoItemContent>
              <InfoItemLabel>Graph Type</InfoItemLabel>
              <InfoItemValue>{t("connection-detail.graph-type")}</InfoItemValue>
            </InfoItemContent>
          </InfoItem>
          <InfoItem>
            <InfoItemIcon>
              <LinkIcon />
            </InfoItemIcon>

            <InfoItemContent>
              <InfoItemLabel>Database URL</InfoItemLabel>
              <InfoItemValue>{dbUrl}</InfoItemValue>
            </InfoItemContent>
          </InfoItem>
        </InfoBar>
        <InfoBar className="@sm:flex hidden">
          <VertexCounts />
          <EdgeCounts />
          <InfoItem>
            <InfoItemIcon>
              <ClockIcon />
            </InfoItemIcon>
            <InfoItemContent>
              <InfoItemLabel>Last Synchronization</InfoItemLabel>
              <LastSyncInfo config={config} />
            </InfoItemContent>
          </InfoItem>
        </InfoBar>
        <NotInProduction featureFlag={showDebugActionsAtom}>
          <DebugActions />
        </NotInProduction>
        <MainContentLayout />
        <Modal
          opened={edit}
          onClose={() => setEdit(false)}
          title="Update connection"
          size="600px"
        >
          <CreateConnection
            onClose={() => setEdit(false)}
            existingConfig={config}
          />
        </Modal>
      </PanelContent>
    </Panel>
  );
}