fix: env name truncate

This commit is contained in:
Pooja Belaramani 2024-12-19 11:00:51 +05:30
parent ad59e3f8d1
commit bf142af6d9
5 changed files with 20 additions and 15 deletions

View File

@ -27,7 +27,7 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
handleConfirm={onConfirm}
handleCancel={onClose}
>
<div className='flex gap-1'>Are you sure you want to delete <span className="font-semibold max-w-[200px] truncate inline-block">{environment.name}</span> ?</div>
Are you sure you want to delete <span className="font-semibold">{environment.name}</span> ?
</Modal>
</StyledWrapper>
</Portal>

View File

@ -23,6 +23,10 @@ const StyledWrapper = styled.div`
padding: 8px 10px;
border-left: solid 2px transparent;
text-decoration: none;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration: none;

View File

@ -8,6 +8,7 @@ import ImportEnvironment from '../ImportEnvironment';
import ManageSecrets from '../ManageSecrets';
import StyledWrapper from './StyledWrapper';
import ConfirmSwitchEnv from './ConfirmSwitchEnv';
import ToolHint from 'components/ToolHint';
const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified }) => {
const { environments } = collection;
@ -108,7 +109,9 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
>
<span className="break-all">{env.name}</span>
<ToolHint text={env.name} toolhintId={env.uid} place="bottom">
<span className="break-all">{env.name}</span>
</ToolHint>
</div>
))}
<div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>

View File

@ -117,12 +117,11 @@ const QueryParams = ({ item, collection }) => {
<StyledWrapper className="w-full flex flex-col absolute">
<div className="flex-1 mt-2">
<div className="mb-1 title text-xs">Query</div>
<Table
headers={[
{ name: 'Name', accessor: 'name', width: '31%' },
{ name: 'Path', accessor: 'path', width: '50%' },
{ name: '', accessor: '', width: '19%' }
{ name: 'Path', accessor: 'path', width: '56%' },
{ name: '', accessor: '', width: '13%' }
]}
>
<ReorderTable updateReorderedItem={handleParamDrag}>
@ -158,7 +157,7 @@ const QueryParams = ({ item, collection }) => {
type="checkbox"
checked={param.enabled}
tabIndex="-1"
className="mr-1.5 mousetrap"
className="mr-3 mousetrap"
onChange={(e) => handleQueryParamChange(e, param, 'enabled')}
/>
<button tabIndex="-1" onClick={() => handleRemoveQueryParam(param)}>
@ -188,7 +187,7 @@ const QueryParams = ({ item, collection }) => {
</code>
</div>
`}
infotipId="path-param-InfoTip"
infotipId="path-param-InfoTip"
/>
</div>
<table>
@ -241,11 +240,7 @@ const QueryParams = ({ item, collection }) => {
: null}
</tbody>
</table>
{!(pathParams && pathParams.length) ?
<div className="title pr-2 py-3 mt-2 text-xs">
</div>
: null}
{!(pathParams && pathParams.length) ? <div className="title pr-2 py-3 mt-2 text-xs"></div> : null}
</div>
</StyledWrapper>
);

View File

@ -23,7 +23,7 @@ import FolderSettings from 'components/FolderSettings';
import { getGlobalEnvironmentVariables, getGlobalEnvironmentVariablesMasked } from 'utils/collections/index';
import { produce } from 'immer';
const MIN_LEFT_PANE_WIDTH = 300;
const MIN_LEFT_PANE_WIDTH = 450;
const MIN_RIGHT_PANE_WIDTH = 350;
const DEFAULT_PADDING = 5;
@ -39,12 +39,15 @@ const RequestTabPanel = () => {
const _collections = useSelector((state) => state.collections.collections);
// merge `globalEnvironmentVariables` into the active collection and rebuild `collections` immer proxy object
let collections = produce(_collections, draft => {
let collections = produce(_collections, (draft) => {
let collection = find(draft, (c) => c.uid === focusedTab?.collectionUid);
if (collection) {
// add selected global env variables to the collection object
const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
const globalEnvironmentVariables = getGlobalEnvironmentVariables({
globalEnvironments,
activeGlobalEnvironmentUid
});
const globalEnvSecrets = getGlobalEnvironmentVariablesMasked({ globalEnvironments, activeGlobalEnvironmentUid });
collection.globalEnvironmentVariables = globalEnvironmentVariables;
collection.globalEnvSecrets = globalEnvSecrets;