From 029b2b5f7ec61f7406306034177a46cb79c4f8b1 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Tue, 31 Oct 2023 11:45:19 -0700
Subject: [PATCH] web: UI improvements

---
 packages/web/components/SchemaList/Item.tsx           |  3 ++-
 packages/web/components/SchemaList/NotFound.tsx       | 10 +++++++++-
 .../components/SqlDataTable/SqlMessage/SuccessMsg.tsx | 11 +++++++++--
 packages/web/components/TableList/Item/index.tsx      |  3 ++-
 packages/web/components/Views/NoViews.tsx             |  2 +-
 packages/web/components/Views/ViewItem.tsx            |  3 ++-
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/SchemaList/Item.tsx b/packages/web/components/SchemaList/Item.tsx
index 7deebfce..8589707f 100644
--- a/packages/web/components/SchemaList/Item.tsx
+++ b/packages/web/components/SchemaList/Item.tsx
@@ -1,5 +1,6 @@
 import Btn from "@components/Btn";
 import Link from "@components/links/Link";
+import excerpt from "@lib/excerpt";
 import { RefParams } from "@lib/params";
 import { sqlQuery } from "@lib/urls";
 import { RiBookOpenLine } from "@react-icons/all-files/ri/RiBookOpenLine";
@@ -27,7 +28,7 @@ export default function Item({ name, params, isActive, query }: Props) {
         data-cy={`db-schemas-${name}-play`}
       >
         <Btn className={css.button}>
-          <span className={css.name}>{name}</span>
+          <span className={css.name}>{excerpt(name, 45)}</span>
           <span className={isActive ? css.viewing : css.icon}>
             {isActive ? "Viewing" : <RiBookOpenLine />}
           </span>
diff --git a/packages/web/components/SchemaList/NotFound.tsx b/packages/web/components/SchemaList/NotFound.tsx
index 9178e681..5c49d9b8 100644
--- a/packages/web/components/SchemaList/NotFound.tsx
+++ b/packages/web/components/SchemaList/NotFound.tsx
@@ -1,3 +1,4 @@
+import useIsDolt from "@hooks/useIsDolt";
 import { RefParams } from "@lib/params";
 import css from "./index.module.css";
 
@@ -7,9 +8,16 @@ type Props = {
 };
 
 export default function NotFound(props: Props) {
+  const { isDolt } = useIsDolt();
   return (
     <p className={css.text} data-cy={`db-${props.name}-empty`}>
-      No {props.name} found on <code>{props.params.refName}</code>
+      No {props.name} found
+      {isDolt && (
+        <span>
+          {" "}
+          on <code>{props.params.refName}</code>
+        </span>
+      )}
     </p>
   );
 }
diff --git a/packages/web/components/SqlDataTable/SqlMessage/SuccessMsg.tsx b/packages/web/components/SqlDataTable/SqlMessage/SuccessMsg.tsx
index d5da593c..74f7dedf 100644
--- a/packages/web/components/SqlDataTable/SqlMessage/SuccessMsg.tsx
+++ b/packages/web/components/SqlDataTable/SqlMessage/SuccessMsg.tsx
@@ -1,4 +1,5 @@
 import Link from "@components/links/Link";
+import useIsDolt from "@hooks/useIsDolt";
 import { SqlQueryParams } from "@lib/params";
 import { isMutation } from "@lib/parseSqlQuery";
 import { pluralize } from "@lib/pluralize";
@@ -13,6 +14,7 @@ type Props = {
 };
 
 export default function SuccessMsg(props: Props) {
+  const { isDolt } = useIsDolt();
   const lower = props.params.q.toLowerCase();
   if (isMutation(props.params.q)) {
     return (
@@ -34,8 +36,13 @@ export default function SuccessMsg(props: Props) {
   }
   return (
     <p className={css.status}>
-      {props.rowsLen} {pluralize(props.rowsLen, "row")} selected on{" "}
-      <span className={css.bold}>{props.params.refName}</span>
+      {props.rowsLen} {pluralize(props.rowsLen, "row")} selected
+      {isDolt && (
+        <span>
+          {" "}
+          on <span className={css.bold}>{props.params.refName}</span>
+        </span>
+      )}
     </p>
   );
 }
diff --git a/packages/web/components/TableList/Item/index.tsx b/packages/web/components/TableList/Item/index.tsx
index 3558f5a8..445ac27a 100644
--- a/packages/web/components/TableList/Item/index.tsx
+++ b/packages/web/components/TableList/Item/index.tsx
@@ -1,6 +1,7 @@
 import Btn from "@components/Btn";
 import Link from "@components/links/Link";
 import { Maybe } from "@gen/graphql-types";
+import excerpt from "@lib/excerpt";
 import { RefParams } from "@lib/params";
 import { table } from "@lib/urls";
 import { FaChevronDown } from "@react-icons/all-files/fa/FaChevronDown";
@@ -33,7 +34,7 @@ export default function Item({ tableName, params }: Props) {
         <span>
           <Btn onClick={() => setExpanded(!expanded)} className={css.tableName}>
             {expanded ? <FaChevronUp /> : <FaChevronDown />}
-            {tableName}
+            {excerpt(tableName, 33)}
           </Btn>
           <Link
             {...table({ ...params, tableName })}
diff --git a/packages/web/components/Views/NoViews.tsx b/packages/web/components/Views/NoViews.tsx
index 79b3623b..75324ebc 100644
--- a/packages/web/components/Views/NoViews.tsx
+++ b/packages/web/components/Views/NoViews.tsx
@@ -4,7 +4,7 @@ import css from "./index.module.css";
 export default function NoViews() {
   return (
     <p className={css.text} data-cy="db-no-views">
-      No saved views. <SchemasDocLink />?
+      No views. <SchemasDocLink />?
     </p>
   );
 }
diff --git a/packages/web/components/Views/ViewItem.tsx b/packages/web/components/Views/ViewItem.tsx
index dbec5a11..78f7f152 100644
--- a/packages/web/components/Views/ViewItem.tsx
+++ b/packages/web/components/Views/ViewItem.tsx
@@ -1,6 +1,7 @@
 import Btn from "@components/Btn";
 import { useSqlEditorContext } from "@contexts/sqleditor";
 import { SchemaItemFragment } from "@gen/graphql-types";
+import excerpt from "@lib/excerpt";
 import { RefParams } from "@lib/params";
 import { MdPlayCircleOutline } from "@react-icons/all-files/md/MdPlayCircleOutline";
 import cx from "classnames";
@@ -28,7 +29,7 @@ export default function ViewItem(props: Props) {
       className={cx(css.item, { [css.selected]: viewingQuery })}
     >
       <Btn onClick={executeView} className={css.button}>
-        <span className={css.name}>{name}</span>
+        <span className={css.name}>{excerpt(name, 47)}</span>
         <span
           className={viewingQuery ? css.viewing : css.icon}
           data-cy={`db-views-view-button-${name}`}