fix: re-order change and analysis modal titles and add overflow

Overflow on last item now shows ellipses Closes #1379
flanksource · Sep 21, 2023 · 56a624a · 56a624a
1 parent eadb799
commit 56a624a
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 42 deletions.
diff --git a/src/components/ConfigAnalysis/ConfigInsightsList.tsx b/src/components/ConfigAnalysis/ConfigInsightsList.tsx
@@ -1,6 +1,6 @@
 import { SortingState } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { useConfigInsightsQuery } from "../../api/query-hooks/useConfigAnalysisQuery";
 import ConfigInsightsDetailsModal from "../ConfigAnalysisLink/ConfigInsightsDetailsModal";
 import { ConfigTypeInsights } from "../ConfigInsights";

diff --git a/src/components/ConfigAnalysisLink/ConfigInsightsDetailsModal.tsx b/src/components/ConfigAnalysisLink/ConfigInsightsDetailsModal.tsx
@@ -10,6 +10,7 @@ import ConfigLink from "../ConfigLink/ConfigLink";
 import { DescriptionCard } from "../DescriptionCard";
 import { Modal } from "../Modal";
 import TextSkeletonLoader from "../SkeletonLoader/TextSkeletonLoader";
+import ModalTitleListItems from "../Modal/ModalTitleListItems";
 
 type Props = {
   id?: string;
@@ -35,10 +36,10 @@ export default function ConfigInsightsDetailsModal({
       {
         label: "Type",
         value: (
-          <>
+          <div className="flex flex-row gap-2">
             <ConfigInsightsIcon analysis={configInsight!} />
             {configInsight?.analysis_type}
-          </>
+          </div>
         )
       },
       {
@@ -75,18 +76,21 @@ export default function ConfigInsightsDetailsModal({
   return (
     <Modal
       title={
-        <div className="flex flex-row items-center">
-          <ConfigLink
-            className="text-blue-600 text-xl font-semibold whitespace-nowrap mr-1"
-            configId={configInsight.config!.id}
-            configName={configInsight.config!.name}
-            configType={configInsight.config!.type}
-            configTypeSecondary={configInsight.config!.config_class}
-          />
-          {" / "}
-          <ConfigInsightsIcon analysis={configInsight} />
-          {configInsight.analyzer}
-        </div>
+        <ModalTitleListItems
+          items={[
+            <div className="flex flex-row flex-grow-0 gap-1 whitespace-nowrap items-center">
+              <ConfigInsightsIcon analysis={configInsight} />
+              <span>{configInsight.analyzer}</span>
+            </div>,
+            <ConfigLink
+              className="text-blue-600 text-xl font-semibold whitespace-nowrap overflow-hidden overflow-ellipsis"
+              configId={configInsight.config!.id}
+              configName={configInsight.config!.name}
+              configType={configInsight.config!.type}
+              configTypeSecondary={configInsight.config!.config_class}
+            />
+          ]}
+        />
       }
       open={isOpen}
       onClose={() => {

diff --git a/src/components/ConfigChangeHistory/index.tsx b/src/components/ConfigChangeHistory/index.tsx
@@ -1,14 +1,12 @@
 import { ColumnDef } from "@tanstack/table-core";
 import { useState } from "react";
-import { useGetConfigByIdQuery } from "../../api/query-hooks";
 import { ConfigTypeChanges } from "../ConfigChanges";
 import ConfigLink from "../ConfigLink/ConfigLink";
-
+import { useGetConfigChangesByConfigChangeIdQuery } from "../../api/query-hooks/useGetConfigChangesByConfigChangeIdQuery";
+import { ConfigDetailChangeModal } from "../ConfigDetailsChanges/ConfigDetailsChanges";
 import { DateCell } from "../ConfigViewer/columns";
 import { PaginationOptions } from "../DataTable";
 import { DataTable, Icon } from "../index";
-import { ConfigDetailChangeModal } from "../ConfigDetailsChanges/ConfigDetailsChanges";
-import { useGetConfigChangesByConfigChangeIdQuery } from "../../api/query-hooks/useGetConfigChangesByConfigChangeIdQuery";
 
 const columns: ColumnDef<ConfigTypeChanges>[] = [
   {

diff --git a/src/components/ConfigDetailsChanges/ConfigDetailsChanges.tsx b/src/components/ConfigDetailsChanges/ConfigDetailsChanges.tsx
@@ -17,6 +17,7 @@ import { JSONViewer } from "../JSONViewer";
 import { Modal } from "../Modal";
 import TextSkeletonLoader from "../SkeletonLoader/TextSkeletonLoader";
 import ConfigChangeDetailSection from "./ConfigChangeDetailsSection";
+import ModalTitleListItems from "../Modal/ModalTitleListItems";
 
 type ConfigDetailsChangesProps = {
   id: string;
@@ -200,22 +201,25 @@ export function ConfigDetailChangeModal({
     <Modal
       title={
         config && (
-          <div className="flex flex-row gap-1">
-            <ConfigLink
-              className="text-blue-600 text-xl font-semibold whitespace-nowrap mr-1"
-              configId={config.id}
-              configName={config.name}
-              configType={config.type}
-              configTypeSecondary={config.config_class}
-            />
-            /
-            <Icon
-              name={changeDetails?.change_type}
-              secondary="diff"
-              className="w-5 h-auto pr-1"
-            />
-            {changeDetails?.change_type}
-          </div>
+          <ModalTitleListItems
+            items={[
+              <div className="flex flex-row flex-grow-0 gap-1 whitespace-nowrap items-center">
+                <Icon
+                  name={changeDetails?.change_type}
+                  secondary="diff"
+                  className="w-5 h-auto pr-1"
+                />
+                <span> {changeDetails?.change_type}</span>
+              </div>,
+              <ConfigLink
+                className="text-blue-600 text-xl font-semibold whitespace-nowrap overflow-hidden overflow-ellipsis"
+                configId={config.id}
+                configName={config.name}
+                configType={config.type}
+                configTypeSecondary={config.config_class}
+              />
+            ]}
+          />
         )
       }
       open={open}

diff --git a/src/components/ConfigLink/ConfigLink.tsx b/src/components/ConfigLink/ConfigLink.tsx
@@ -13,14 +13,14 @@ type ConfigLinkProps = {
   variant?: "label" | "link";
   target?: HTMLAttributeAnchorTarget;
 };
+
 export default function ConfigLink({
   configId,
   configName,
   configType,
   configTypeSecondary,
   variant = "link",
-  className = "text-zinc-600 text-sm",
-  ...props
+  className = "text-zinc-600 text-sm whitespace-nowrap overflow-hidden overflow-ellipsis"
 }: ConfigLinkProps) {
   if (variant === "link") {
     return (
@@ -35,7 +35,7 @@ export default function ConfigLink({
             type: configType
           }}
         />
-        <div className="overflow-hidden truncate flex-1">{configName}</div>
+        <div className="overflow-hidden text-ellipsis flex-1">{configName}</div>
       </Link>
     );
   }
@@ -46,9 +46,7 @@ export default function ConfigLink({
         secondary={configTypeSecondary}
         className="w-5 mr-1 h-5"
       />
-      <div className="overflow-hidden truncate flex-1 text-sm">
-        {configName}
-      </div>
+      <div className="overflow-hidden text-ellipsis text-sm">{configName}</div>
     </div>
   );
 }
diff --git a/src/components/Modal/ModalTitleListItems.tsx b/src/components/Modal/ModalTitleListItems.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+type ModalTitleListItemsProps = {
+  items: ReactNode[];
+};
+
+export default function ModalTitleListItems({
+  items
+}: ModalTitleListItemsProps) {
+  return (
+    <div className="flex flex-row gap-1 items-center overflow-hidden text-ellipsis">
+      {items.map((item, idx) => {
+        return (
+          <>
+            {item}
+            {idx !== items.length - 1 && (
+              <span className="w-auto flex-shrink">/</span>
+            )}
+          </>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/Sidebars/configs.tsx b/src/components/Sidebars/configs.tsx
@@ -89,7 +89,7 @@ export function ConfigsList({
                 configName={config.name}
                 configType={config.type}
                 configTypeSecondary={config.config_class}
-                className="overflow-hidden flex-1"
+                className="overflow-hidden text-ellipsis flex-1 whitespace-nowrap"
               />
               {config.deleted_at && (
                 <Badge