web: UI improvements

dolthub · Oct 31, 2023 · 029b2b5 · 029b2b5
1 parent 3352428
commit 029b2b5
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}`}