Feat/improve schema sync (#901)

* feat: Improve schema synchronization UX

* docs: add sync UI improvements to Changelog.md

* docs: fix header sync removal description in Changelog.md

* fix: update sync button text for different states

* fix: change flex to inline-flex

* docs:update Changelog for PR #901

* fix: change InfoItemValue class from inline-flex to inline

* fix style: use inline

Author: enumura1

Changelog.md

@@ -2,6 +2,11 @@
 
 ## Upcoming
 
+### Other changes
+
+- **Improved** Improved connection details by moving the sync button near the
+  last sync timestamp ([#901](https://github.com/aws/graph-explorer/pull/901))
+
 ## Release v1.15.0
 
 Graph Explorer now offers session persistence, allowing you to seamlessly

packages/graph-explorer/src/components/Button/LinkButton.tsx

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils/cn";
+
+export function LinkButton({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"button">) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        className,
+        "text-primary-main m-0 cursor-pointer border-0 bg-transparent p-0 underline underline-offset-2 hover:no-underline"
+      )}
+    />
+  );
+}

packages/graph-explorer/src/components/Button/index.ts

@@ -1 +1,2 @@
 export * from "./Button";
+export * from "./LinkButton";

packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx

@@ -26,6 +26,7 @@ import {
   TooltipTrigger,
   TrayArrowIcon,
 } from "@/components";
+import { LinkButton } from "@/components/Button";
 import {
   activeSchemaSelector,
   ConfigurationContextProps,
@@ -74,7 +75,7 @@ function ConnectionDetail({ config }: ConnectionDetailProps) {
   const t = useTranslations();
   const [edit, setEdit] = useState(false);
 
-  const { refetch: syncSchema, isFetching: isSync } = useSchemaSync();
+  const { isFetching: isSync } = useSchemaSync();
 
   const onConfigExport = useCallback(() => {
     saveConfigurationToFile(config);
@@ -96,12 +97,6 @@ function ConnectionDetail({ config }: ConnectionDetailProps) {
           {config.displayLabel || config.id}
         </PanelTitle>
         <PanelHeaderActions>
-          <PanelHeaderActionButton
-            label="Synchronize Database"
-            icon={<SyncIcon className={isSync ? "animate-spin" : ""} />}
-            isDisabled={isSync}
-            onActionClick={syncSchema}
-          />
           <PanelHeaderActionButton
             label="Export Connection"
             icon={<TrayArrowIcon />}
@@ -213,6 +208,7 @@ function MainContentLayout() {
 
 function LastSyncInfo({ config }: { config: ConfigurationContextProps }) {
   const isSyncing = useIsSyncing();
+  const { refetch: syncSchema } = useSchemaSync();
 
   if (isSyncing) {
     return (
@@ -225,18 +221,31 @@ function LastSyncInfo({ config }: { config: ConfigurationContextProps }) {
 
   const lastSyncFail = config.schema?.lastSyncFail === true;
   if (lastSyncFail) {
-    return <InfoItemValue>Synchronization Failed</InfoItemValue>;
+    return (
+      <InfoItemValue className="inline">
+        <span>Synchronization Failed</span>
+        <LinkButton onClick={() => syncSchema()}>Retry</LinkButton>
+      </InfoItemValue>
+    );
   }
 
   const lastSyncUpdate = config.schema?.lastUpdate;
   if (!lastSyncUpdate) {
-    return <Chip variant="warning">Not Synchronized</Chip>;
+    return (
+      <InfoItemValue className="inline">
+        <Chip variant="warning">Not Synchronized</Chip>
+        <LinkButton onClick={() => syncSchema()}>Synchronize</LinkButton>
+      </InfoItemValue>
+    );
   }
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <InfoItemValue>{formatRelativeDate(lastSyncUpdate)}</InfoItemValue>
+        <InfoItemValue className="inline">
+          <span>{formatRelativeDate(lastSyncUpdate)}</span>
+          <LinkButton onClick={() => syncSchema()}>Refresh</LinkButton>
+        </InfoItemValue>
       </TooltipTrigger>
       <TooltipContent>{formatDate(lastSyncUpdate)}</TooltipContent>
     </Tooltip>