Skip to content

Commit

Permalink
Merge pull request #44 from aws/dogusata/feat-file-list-to-show-singl…
Browse files Browse the repository at this point in the history
…e-file

Feature: File list should also show one single file without root folder and card title
  • Loading branch information
dogusata authored Apr 23, 2024
2 parents bd9f085 + bcebab6 commit 0823440
Show file tree
Hide file tree
Showing 18 changed files with 521 additions and 428 deletions.
2 changes: 1 addition & 1 deletion example/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
onVote: (tabId: string, messageId: string, vote: RelevancyVoteType) => {
Log(`Message <b>${messageId}</b> is <b>${vote}d</b>.`);
},
onOpenDiff: (tabId: string, filePath: string, deleted: boolean, messageId?: string) => {
onFileClick: (tabId: string, filePath: string, deleted: boolean, messageId?: string) => {
Log(`File clicked: <b>${filePath}</b>`);
},
onFileActionClick: (tabId, messageId, filePath, actionName) => {
Expand Down
29 changes: 8 additions & 21 deletions example/src/samples/sample-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export const exampleFileListChatItem: ChatItem = {
},
],
fileList: {
filePaths: ['src/App.tsx', 'devfile.yaml', 'src/App.test.tsx'],
filePaths: ['dummy.ts', 'src/App.tsx', 'devfile.yaml', 'src/App.test.tsx'],
deletedFiles: ['src/devfile.yaml'],
actions: {
'src/App.tsx': [
Expand Down Expand Up @@ -366,10 +366,9 @@ _To send the form, mandatory items should be filled._`,
};

const checkIcons = {
wait: '![wait](data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTkgM2gtMTRjLTEuMTEgMC0yIC44OS0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0ydi0xNGMwLTEuMTEtLjktMi0yLTJtMCAydjE0aC0xNHYtMTR6Ii8+PC9zdmc+)',
current:
'![current](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLXNxdWFyZS1kb3QiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiIC8+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMSIgLz4KPC9zdmc+CgoK)',
done: '![check](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLWNoZWNrYm94IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cG9seWxpbmUgcG9pbnRzPSI5IDExIDEyIDE0IDIwIDYiIC8+CiAgPHBhdGggZD0iTTIwIDEydjZhMiAyIDAgMCAxIC0yIDJoLTEyYTIgMiAwIDAgMSAtMiAtMnYtMTJhMiAyIDAgMCAxIDIgLTJoOSIgLz4KPC9zdmc+CgoK)',
wait: '&#9744;',
current: '&#9744;',
done: '&#9745;',
};
export const exampleProgressCards: Partial<ChatItem>[] = [
{
Expand Down Expand Up @@ -507,25 +506,13 @@ ${checkIcons.done} Creating a refactor plan
${checkIcons.done} Showing the plan details
Your refactor request is finished.
Here's a preview of list of the files to be refactored:
Your Refactor analysis is ready! You can review it by opening the Markdown file: [Refactor_analysis_[id].pdf](#)
You can also ask me any follow-up questions that you have or adjust any part by generating a revised analysis.
`,
fileList: {
filePaths: ['fil1.tsx', 'file2.tsx'],
fileTreeTitle: 'Refactor result',
rootFolderTitle: 'Refactored files',
filePaths: ['Refactor_analysis_[id].pdf'],
},
buttons: [
{
id: 'open-refactor-plan',
text: 'Open plan',
disabled: false,
icon: MynahIcons.EXTERNAL,
status: 'info',
},
],
},
];

Expand Down Expand Up @@ -701,6 +688,6 @@ export const exampleDownloadFile: ChatItem = {
fileList: {
fileTreeTitle: 'Report',
rootFolderTitle: '',
filePaths: ['Refactor_analysis_[id] .pdf']
filePaths: ['Refactor_analysis_[id] .pdf'],
},
};
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@aws/mynah-ui",
"displayName": "AWS Mynah UI",
"version": "4.6.2",
"version": "4.6.3",
"description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
"publisher": "Amazon Web Services",
"license": "Apache License 2.0",
Expand Down
2 changes: 1 addition & 1 deletion src/components/card/card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export class Card {
mouseup: e => {
const mouseUpInfo = { x: e.clientX, y: e.clientY, time: new Date().getTime() };
if (
this.mouseDownInfo !== undefined && // in case of down is prevented by default by some listener
this.mouseDownInfo !== undefined &&
(Math.abs(this.mouseDownInfo.x - mouseUpInfo.x) > ENGAGEMENT_MIN_SELECTION_DISTANCE ||
Math.abs(this.mouseDownInfo.y - mouseUpInfo.y) >
ENGAGEMENT_MIN_SELECTION_DISTANCE) &&
Expand Down
99 changes: 99 additions & 0 deletions src/components/chat-item/chat-item-tree-file.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
import { MynahUIGlobalEvents, cancelEvent } from '../../helper/events';
import { FileNodeAction, MynahEventNames, TreeNodeDetails } from '../../static';
import { Button } from '../button';
import { Icon, MynahIcons } from '../icon';

export interface ChatItemTreeFileProps {
tabId: string;
messageId: string;
filePath: string;
fileName: string;
icon?: MynahIcons;
deleted?: boolean;
details?: TreeNodeDetails;
actions?: FileNodeAction[];
}

export class ChatItemTreeFile {
render: ExtendedHTMLElement;
constructor (props: ChatItemTreeFileProps) {
this.render = DomBuilder.getInstance().build({
type: 'div',
classNames: [
'mynah-chat-item-tree-view-file-item',
props.details?.status !== undefined ? `mynah-chat-item-tree-view-file-item-status-${props.details?.status}` : '',
],
events: {
click: () => {
MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FILE_CLICK, {
tabId: props.tabId,
messageId: props.messageId,
filePath: props.filePath,
deleted: props.deleted,
});
}
},
children: [
...(props.icon != null
? [ {
type: 'span',
classNames: [ 'mynah-chat-single-file-icon' ],
children: [ new Icon({ icon: props.icon ?? MynahIcons.PAPER_CLIP }).render ]
} ]
: []),
{
type: 'div',
classNames: [
'mynah-chat-item-tree-view-file-item-title',
props.deleted === true ? 'mynah-chat-item-tree-view-file-item-deleted' : '',
],
children: [ {
type: 'span',
children: [ props.fileName ]
} ]
},
{
type: 'div',
classNames: [ 'mynah-chat-item-tree-view-file-item-details' ],
children: props.details != null
? [
...(props.details.icon !== undefined ? [ new Icon({ icon: props.details.icon }).render ] : []),
...(props.details.label !== undefined
? [ {
type: 'span',
classNames: [ 'mynah-chat-item-tree-view-file-item-details-text' ],
children: [ props.details.label ]
} ]
: []),
]
: []
},
...(props.actions !== undefined
? [ {
type: 'div',
classNames: [ 'mynah-chat-item-tree-view-file-item-actions' ],
children: props.actions.map((action: FileNodeAction) => new Button({
icon: new Icon({ icon: action.icon }).render,
...(action.label !== undefined ? { label: action.label } : {}),
attributes: {
title: action.description ?? ''
},
classNames: [ 'mynah-icon-button', action.status ?? '' ],
primary: false,
onClick: (e) => {
cancelEvent(e);
MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FILE_ACTION_CLICK, {
tabId: props.tabId,
messageId: props.messageId,
filePath: props.filePath,
actionName: action.name,
});
},
}).render)
} ]
: []),
]
});
}
}
53 changes: 34 additions & 19 deletions src/components/chat-item/chat-item-tree-view-wrapper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { Config } from '../../helper/config';
import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
import { fileListToTree } from '../../helper/file-tree';
import { FileNodeAction, ReferenceTrackerInformation, TreeNodeDetails } from '../../static';
import { MynahIcons } from '../icon';
import { ChatItemTreeFile } from './chat-item-tree-file';
import { ChatItemTreeView } from './chat-item-tree-view';
import { ChatItemTreeViewLicense } from './chat-item-tree-view-license';

Expand All @@ -32,11 +34,22 @@ export class ChatItemTreeViewWrapper {
references: props.references
}).render;

const tree = new ChatItemTreeView({
messageId: props.messageId,
tabId: props.tabId,
node: fileListToTree(props.files, props.deletedFiles, props.actions, props.details, props.rootTitle),
}).render;
const tree = props.files.length === 1
? new ChatItemTreeFile({
filePath: props.files[0],
fileName: props.files[0],
tabId: props.tabId,
messageId: props.messageId,
deleted: props.deletedFiles.includes(props.files[0]),
details: props.details != null ? props.details[props.files[0]] : undefined,
actions: props.actions != null ? props.actions[props.files[0]] : undefined,
icon: MynahIcons.PAPER_CLIP
}).render
: new ChatItemTreeView({
messageId: props.messageId,
tabId: props.tabId,
node: fileListToTree(props.files, props.deletedFiles, props.actions, props.details, props.rootTitle),
}).render;

this.render = DomBuilder.getInstance().build({
type: 'div',
Expand All @@ -46,20 +59,22 @@ export class ChatItemTreeViewWrapper {
type: 'div',
classNames: [ 'mynah-chat-item-tree-view-wrapper-container' ],
children: [
{
type: 'div',
classNames: [ 'mynah-chat-item-tree-view-wrapper-title' ],
children: [
{
type: 'h4',
children: [ `${props.cardTitle ?? Config.getInstance().config.texts.codeSuggestions}` ]
},
{
type: 'span',
children: [ `${(props.files?.length ?? 0) + (props.deletedFiles?.length ?? 0)} ${Config.getInstance().config.texts.files}` ]
},
]
},
...(props.cardTitle != null && props.cardTitle !== ''
? [ {
type: 'div',
classNames: [ 'mynah-chat-item-tree-view-wrapper-title' ],
children: [
{
type: 'h4',
children: [ `${props.cardTitle ?? Config.getInstance().config.texts.codeSuggestions}` ]
},
{
type: 'span',
children: [ `${(props.files?.length ?? 0) + (props.deletedFiles?.length ?? 0)} ${Config.getInstance().config.texts.files}` ]
},
]
} ]
: []),
license,
tree,
]
Expand Down
85 changes: 12 additions & 73 deletions src/components/chat-item/chat-item-tree-view.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Config } from '../../helper/config';
import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
import { cancelEvent, MynahUIGlobalEvents } from '../../helper/events';
import { FileNode, TreeNode } from '../../helper/file-tree';
import { FileNodeAction, MynahEventNames } from '../../static';
import { cancelEvent } from '../../helper/events';
import { TreeNode } from '../../helper/file-tree';
import { Button } from '../button';
import { Icon, MynahIcons } from '../icon';
import { ChatItemTreeFile } from './chat-item-tree-file';

export interface ChatItemTreeViewProps {
node: TreeNode;
Expand Down Expand Up @@ -98,76 +98,15 @@ export class ChatItemTreeView {
buildFileNode (): ExtendedHTMLElement[] {
if (this.node.type !== 'file') return [];

const fileItem = DomBuilder.getInstance().build({
type: 'div',
classNames: [
'mynah-chat-item-tree-view-file-item',
this.node.details?.status !== undefined ? `mynah-chat-item-tree-view-file-item-status-${this.node.details?.status}` : '',
],
events: {
click: () => {
MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.OPEN_DIFF, {
tabId: this.tabId,
messageId: this.messageId,
filePath: (this.node as FileNode).filePath,
deleted: (this.node as FileNode).deleted,
});
}
},
children: [
{
type: 'div',
classNames: [
'mynah-chat-item-tree-view-file-item-title',
this.node.deleted ? 'mynah-chat-item-tree-view-file-item-deleted' : '',
],
children: [ {
type: 'span',
children: [ this.node.name ]
} ]
},
...(this.node.details !== undefined
? [ {
type: 'div',
classNames: [ 'mynah-chat-item-tree-view-file-item-details' ],
children: [
...(this.node.details.icon !== undefined ? [ new Icon({ icon: this.node.details.icon }).render ] : []),
...(this.node.details.label !== undefined
? [ {
type: 'span',
classNames: [ 'mynah-chat-item-tree-view-file-item-details-text' ],
children: [ this.node.details.label ]
} ]
: []),
]
} ]
: []),
...(this.node.actions !== undefined
? [ {
type: 'div',
classNames: [ 'mynah-chat-item-tree-view-file-item-actions' ],
children: this.node.actions.map((action: FileNodeAction) => new Button({
icon: new Icon({ icon: action.icon }).render,
...(action.label !== undefined ? { label: action.label } : {}),
attributes: {
title: action.description ?? ''
},
classNames: [ 'mynah-icon-button', action.status ?? '' ],
primary: false,
onClick: (e) => {
cancelEvent(e);
MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FILE_ACTION_CLICK, {
tabId: this.tabId,
messageId: this.messageId,
filePath: (this.node as FileNode).filePath,
actionName: action.name,
});
},
}).render)
} ]
: []),
]
});
const fileItem = new ChatItemTreeFile({
fileName: this.node.name,
filePath: this.node.filePath,
tabId: this.tabId,
messageId: this.messageId,
details: this.node.details,
deleted: this.node.deleted,
actions: this.node.actions
}).render;

return [ fileItem ];
}
Expand Down
1 change: 1 addition & 0 deletions src/components/icon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export enum MynahIcons {
MINUS = 'minus',
SEARCH = 'search',
PLUS = 'plus',
PAPER_CLIP = 'paper-clip',
LIST_ADD = 'list-add',
TABS = 'tabs',
CHAT = 'chat',
Expand Down
2 changes: 2 additions & 0 deletions src/components/icon/icon-importer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import MENU from './icons/menu.svg';
import MINUS from './icons/minus.svg';
import SEARCH from './icons/search.svg';
import PLUS from './icons/plus.svg';
import PAPER_CLIP from './icons/paper-clip.svg';
import LIST_ADD from './icons/list-add.svg';
import TABS from './icons/tabs.svg';
import PENCIL from './icons/pencil.svg';
Expand Down Expand Up @@ -64,6 +65,7 @@ export class MynahUIIconImporter {
MINUS,
SEARCH,
PLUS,
PAPER_CLIP,
LIST_ADD,
TABS,
PENCIL,
Expand Down
Loading

0 comments on commit 0823440

Please sign in to comment.