feat: Key-value pair view for environment[INS-4256] #8071

cwangsmv · 2024-10-12T05:31:34Z

Highlight and Changes:

Add new KV-pair view for environment

Collection environment

Global environment

Folder environment

UI Change:
- New key-pair table for collection environment, global environment and folder environment UI
- Prompt JSON editor modal
- Add button to switch JSON view & kv pair view
- Confirm naming and default view for environment
Models Change:
- Add type and kv pair data attribute to environment and request-group data model
- Ensure that newly add attributes won't add new attributes to old datas in git sync
Data transform
- JSON and kv pair data transform logic

ihexxa

Had review as pass 1 and will do more checks later.

packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx

packages/insomnia/src/ui/components/panes/request-group-pane.tsx

ihexxa · 2024-10-21T07:57:57Z

packages/insomnia/src/models/environment.ts

+    kvPair.push({
+      id: generateId('envPair'),
+      name: key,
+      value: isValObject ? JSON.stringify(val) : String(val),


JSON.stringify may not work with nunjucks tags as values.

Show a modal to block user from changing to table view when there's JSON error

gatzjames · 2024-10-25T09:41:10Z

packages/insomnia/src/models/environment.ts

+  id: string;
+  name: string;
+  value: string;
+  type: EnvironmentKvPairDataType;


Can we infer the data types for other primitives like number, boolean etc?
Currently if I add a number or boolean it is recognized as string in the table editor.
This might be difficult if we try to infer nunjucks templates that are not inside quotes but not quite sure about it.

packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx

gatzjames · 2024-10-25T09:49:51Z

packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx

+    },
+  ];
+
+  const renderPairItem = (kvPair: EnvironmentKvPairData) => {


Maybe we should turn this into a component in the module scope?

gatzjames · 2024-10-25T09:53:00Z

packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx

+  }, []);
+
+  return (
+    <div className="p-[--padding-sm] min-w-max h-full overflow-hidden flex flex-col">


Looks like there is extra padding around the toolbar. If we want we could add padding in the key-value editor ListBox bellow

Suggested change

<div className="p-[--padding-sm] min-w-max h-full overflow-hidden flex flex-col">

<div className="min-w-max h-full overflow-hidden flex flex-col">

OK, will remove the padding for toolbar

2.add message for duplicate items

2.fix bugs

2.Set default folder environment type to be key-value pair

cwangsmv marked this pull request as draft October 12, 2024 05:31

cwangsmv force-pushed the feat/env-config-table-view branch 2 times, most recently from ee16325 to 7578f6c Compare October 17, 2024 07:42

cwangsmv marked this pull request as ready for review October 17, 2024 07:56

cwangsmv changed the title ~~feat: Key-value pair view for environment~~ feat: Key-value pair view for environment[INS-4256] Oct 17, 2024

cwangsmv requested review from jackkav and gatzjames October 17, 2024 08:21

ihexxa reviewed Oct 21, 2024

View reviewed changes

ihexxa approved these changes Oct 22, 2024

View reviewed changes

gatzjames reviewed Oct 25, 2024

View reviewed changes

cwangsmv added 17 commits October 28, 2024 10:14

1.save work

6829598

1.remove typo

68b82d7

1.save changes

f948c0c

1.save work

f38b294

1.support kv picker in folder

0ab309e

1.modify css

5f50ea2

1.auto expand

896fc77

1.add tooltip for items with same name

fd0abe3

1.update style

e778e54

2.add message for duplicate items

1.fix issues

fcb5430

1.fix type script error

06b0ee3

1.fix lint issue

37aaef9

1.align styles with url query parameter editor

b2f16bb

2.fix bugs

1.add comment

d2606b8

1.fix a css style

b6cf688

1.Extract common function to toggle environment type

4416739

2.Set default folder environment type to be key-value pair

1.Do not allow user to change Table view when there's JSON error

c239fbe

cwangsmv force-pushed the feat/env-config-table-view branch from 7d5f4c6 to c239fbe Compare October 28, 2024 02:14

cwangsmv enabled auto-merge (squash) October 28, 2024 02:15

cwangsmv merged commit 0bae709 into develop Oct 28, 2024
8 checks passed

cwangsmv deleted the feat/env-config-table-view branch October 28, 2024 02:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Key-value pair view for environment[INS-4256] #8071

feat: Key-value pair view for environment[INS-4256] #8071

cwangsmv commented Oct 12, 2024 •

edited

Loading

ihexxa left a comment

ihexxa Oct 21, 2024

cwangsmv Oct 22, 2024 •

edited

Loading

gatzjames Oct 25, 2024

gatzjames Oct 25, 2024

gatzjames Oct 25, 2024

cwangsmv Oct 28, 2024

	<div className="p-[--padding-sm] min-w-max h-full overflow-hidden flex flex-col">
	<div className="min-w-max h-full overflow-hidden flex flex-col">

feat: Key-value pair view for environment[INS-4256] #8071

feat: Key-value pair view for environment[INS-4256] #8071

Conversation

cwangsmv commented Oct 12, 2024 • edited Loading

ihexxa left a comment

Choose a reason for hiding this comment

ihexxa Oct 21, 2024

Choose a reason for hiding this comment

cwangsmv Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

gatzjames Oct 25, 2024

Choose a reason for hiding this comment

gatzjames Oct 25, 2024

Choose a reason for hiding this comment

gatzjames Oct 25, 2024

Choose a reason for hiding this comment

cwangsmv Oct 28, 2024

Choose a reason for hiding this comment

cwangsmv commented Oct 12, 2024 •

edited

Loading

cwangsmv Oct 22, 2024 •

edited

Loading