mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-07 05:27:48 +00:00
improvement: address feedback
This commit is contained in:
+13
-9
@@ -2,6 +2,7 @@
|
|||||||
import { useCallback, useRef, useState } from "react";
|
import { useCallback, useRef, useState } from "react";
|
||||||
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
|
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
export interface Version {
|
export interface Version {
|
||||||
id?: string;
|
id?: string;
|
||||||
@@ -452,7 +453,7 @@ const formatDeletedJson = (json: JsonValue): JSX.Element => {
|
|||||||
{lines.map((line, lineIndex) => {
|
{lines.map((line, lineIndex) => {
|
||||||
const lineKey = `deleted-${line.slice(0, 30)}-${lineIndex}`;
|
const lineKey = `deleted-${line.slice(0, 30)}-${lineIndex}`;
|
||||||
return (
|
return (
|
||||||
<div key={lineKey} className="flex">
|
<div key={lineKey} className="flex w-fit">
|
||||||
<div className="w-4 flex-shrink-0">-</div>
|
<div className="w-4 flex-shrink-0">-</div>
|
||||||
<div>{line}</div>
|
<div>{line}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -516,7 +517,7 @@ export const SecretVersionDiffView = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
oldVersionContent = (
|
oldVersionContent = (
|
||||||
<div className="font-mono text-sm">
|
<div className="w-fit font-mono text-sm">
|
||||||
{renderJsonWithDiffs(
|
{renderJsonWithDiffs(
|
||||||
cleanOldVersion,
|
cleanOldVersion,
|
||||||
diffPaths,
|
diffPaths,
|
||||||
@@ -532,7 +533,7 @@ export const SecretVersionDiffView = ({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
newVersionContent = (
|
newVersionContent = (
|
||||||
<div className="font-mono text-sm">
|
<div className="w-fit font-mono text-sm">
|
||||||
{renderJsonWithDiffs(
|
{renderJsonWithDiffs(
|
||||||
cleanNewVersion,
|
cleanNewVersion,
|
||||||
diffPaths,
|
diffPaths,
|
||||||
@@ -572,19 +573,19 @@ export const SecretVersionDiffView = ({
|
|||||||
if (item.isDeleted) {
|
if (item.isDeleted) {
|
||||||
textStyle = "line-through text-red-300";
|
textStyle = "line-through text-red-300";
|
||||||
changeBadge = (
|
changeBadge = (
|
||||||
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
|
<span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
|
||||||
{isSecret ? "Secret" : "Folder"} Deleted
|
{isSecret ? "Secret" : "Folder"} Deleted
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
} else if (item.isAdded) {
|
} else if (item.isAdded) {
|
||||||
changeBadge = (
|
changeBadge = (
|
||||||
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
|
<span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
|
||||||
{isSecret ? "Secret" : "Folder"} Added
|
{isSecret ? "Secret" : "Folder"} Added
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
} else if (item.isUpdated) {
|
} else if (item.isUpdated) {
|
||||||
changeBadge = (
|
changeBadge = (
|
||||||
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
|
<span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
|
||||||
{isSecret ? "Secret" : "Folder"} Updated
|
{isSecret ? "Secret" : "Folder"} Updated
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
@@ -604,11 +605,14 @@ export const SecretVersionDiffView = ({
|
|||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
aria-expanded={!collapsed}
|
aria-expanded={!collapsed}
|
||||||
>
|
>
|
||||||
<div className="flex items-center">
|
<div className="flex min-w-0 flex-1 items-center">
|
||||||
<span className={textStyle}>{key}</span>
|
<p className={twMerge(textStyle, "truncate")}>{key}</p>
|
||||||
{changeBadge}
|
{changeBadge}
|
||||||
</div>
|
</div>
|
||||||
<FontAwesomeIcon icon={collapsed ? faChevronDown : faChevronUp} className="text-gray-400" />
|
<FontAwesomeIcon
|
||||||
|
icon={collapsed ? faChevronDown : faChevronUp}
|
||||||
|
className="ml-2 text-gray-400"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user