H-1553, H-3395, H-3397: Entity editor UX improvements and bug fixes

apps/hash-frontend/src/components/grid/utils/custom-grid-icons.ts

@@ -48,6 +48,10 @@ export const customGridIcons = {
     `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path fill="${fgColor}" d="M171.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-96 96c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L144 86.6V464c0 8.8 7.2 16 16 16s16-7.2 16-16V86.6l68.7 68.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-96-96zM352 288c-8.8 0-16 7.2-16 16s7.2 16 16 16h94.7L339.5 454c-3.8 4.8-4.6 11.4-1.9 16.9s8.3 9.1 14.4 9.1H480c8.8 0 16-7.2 16-16s-7.2-16-16-16H385.3L492.5 314c3.8-4.8 4.6-11.4 1.9-16.9s-8.3-9.1-14.4-9.1H352zM416 32c-6.1 0-11.6 3.4-14.3 8.8L337.8 168.6c-.1 .2-.2 .4-.3 .6l-15.8 31.7c-4 7.9-.7 17.5 7.2 21.5s17.5 .7 21.5-7.2L361.9 192H470.1l11.6 23.2c4 7.9 13.6 11.1 21.5 7.2s11.1-13.6 7.2-21.5l-15.8-31.7c-.1-.2-.2-.4-.3-.6L430.3 40.8c-2.7-5.4-8.2-8.8-14.3-8.8zM377.9 160L416 83.8 454.1 160H377.9z"/></svg>`,
   arrowDownAzLight: ({ fgColor }) =>
     `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path fill="${fgColor}" d="M267.3 379.3l-96 96c-6.2 6.2-16.4 6.2-22.6 0l-96-96c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L144 425.4V48c0-8.8 7.2-16 16-16s16 7.2 16 16V425.4l68.7-68.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6zm163-338.5l63.9 127.7c.1 .2 .2 .4 .3 .6l15.8 31.7c4 7.9 .7 17.5-7.2 21.5s-17.5 .7-21.5-7.2L470.1 192H361.9l-11.6 23.2c-4 7.9-13.6 11.1-21.5 7.2s-11.1-13.6-7.2-21.5l15.8-31.7c.1-.2 .2-.4 .3-.6L401.7 40.8c2.7-5.4 8.2-8.8 14.3-8.8s11.6 3.4 14.3 8.8zM416 83.8L377.9 160h76.2L416 83.8zM352 288H480c6.2 0 11.8 3.5 14.4 9.1s1.9 12.1-1.9 16.9L385.3 448H480c8.8 0 16 7.2 16 16s-7.2 16-16 16H352c-6.2 0-11.8-3.5-14.4-9.1s-1.9-12.1 1.9-16.9L446.7 320H352c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg>`,
+  arrowUpRightRegular: ({ fgColor }) => `
+      <svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" >
+      <path fill="${fgColor}" d="M328 96c13.3 0 24 10.7 24 24V360c0 13.3-10.7 24-24 24s-24-10.7-24-24V177.9L73 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l231-231H88c-13.3 0-24-10.7-24-24s10.7-24 24-24H328z" />
+    </svg>`,
   filterLight: ({ fgColor }) =>
     `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="${fgColor}" d="M0 71.5C0 49.7 17.7 32 39.5 32H472.5C494.3 32 512 49.7 512 71.5c0 9.2-3.2 18.1-9.1 25.2L320 317.8V446.1c0 18.7-15.2 33.9-33.9 33.9c-7.5 0-14.8-2.5-20.8-7.1l-61-47.4c-7.8-6.1-12.4-15.4-12.4-25.3V317.8L9.1 96.7C3.2 89.6 0 80.7 0 71.5zM39.5 64c-4.2 0-7.5 3.4-7.5 7.5c0 1.8 .6 3.4 1.7 4.8L220.3 301.8c2.4 2.9 3.7 6.5 3.7 10.2v88.2l61 47.4c.3 .3 .7 .4 1.1 .4c1 0 1.9-.8 1.9-1.9V312c0-3.7 1.3-7.3 3.7-10.2L478.3 76.3c1.1-1.3 1.7-3 1.7-4.8c0-4.2-3.4-7.5-7.5-7.5H39.5z"/></svg>`,
   calendarRegular: ({ fgColor }) =>

apps/hash-frontend/src/components/grid/utils/draw-url-as-link.ts

@@ -0,0 +1,55 @@
+import type { CustomCell, DrawArgs } from "@glideapps/glide-data-grid";
+import { customColors } from "@hashintel/design-system/theme";
+
+import { getYCenter } from "../utils";
+
+interface DrawUrlParams {
+  args: DrawArgs<CustomCell>;
+  url: string;
+  left: number;
+}
+
+export const drawUrlAsLink = ({ args, url, left }: DrawUrlParams) => {
+  const { ctx, overrideCursor, theme } = args;
+  const yCenter = getYCenter(args);
+
+  overrideCursor?.("pointer");
+
+  const textLeft = left;
+
+  const color = customColors.blue[70];
+
+  ctx.font = theme.baseFontStyle;
+  ctx.fillStyle = color;
+  ctx.fillText(url, textLeft, yCenter);
+  const { width: textWidth } = ctx.measureText(url);
+
+  /**
+   * This is the size set in baseFontStyle
+   */
+  const fontSize = 14;
+
+  const underlineOffset = 2;
+  const underlineY = yCenter + fontSize / 2 + underlineOffset;
+
+  ctx.beginPath();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.moveTo(textLeft, underlineY);
+  ctx.lineTo(textLeft + textWidth, underlineY);
+  ctx.stroke();
+
+  const iconLeft = textLeft + textWidth + 5;
+  const iconSize = 13;
+
+  const fgIconHeader = color;
+  args.spriteManager.drawSprite(
+    "arrowUpRightRegular",
+    "normal",
+    ctx,
+    iconLeft,
+    yCenter - (iconSize - 5),
+    iconSize,
+    { ...theme, fgIconHeader },
+  );
+};