feat: add ability to select repository from tab

Author: bendera

frontend/src/components/cme-form-view/cme-form-view.ts

@@ -17,6 +17,7 @@ import '../cme-repo-selector';
 import FormBuilder from './FormBuilder';
 import TemplateCompiler from './TemplateCompiler';
 import {CodeEditor} from '../cme-code-editor/cme-code-editor';
+import { RepoSelector } from '../cme-repo-selector';
 
 @customElement('cme-form-view')
 export class FormView extends connect(store)(LitElement) {
@@ -53,6 +54,9 @@ export class FormView extends connect(store)(LitElement) {
   @state()
   private _tokenValues: {[name: string]: string | string[]} = {};
 
+  @query('#form-view-repo-selector')
+  private _repoSelector!: RepoSelector;
+
   private _dynamicTemplate: string[] = [];
   private _reduceEmptyLines = true;
 
@@ -129,13 +133,25 @@ export class FormView extends connect(store)(LitElement) {
     compiler.reduceEmptyLines = this._reduceEmptyLines;
     const compiled = compiler.compile();
 
+    const {selectedRepositoryPath} = this._repoSelector;
+
     if (this._amendCbChecked) {
       store.dispatch(confirmAmend(compiled));
     } else if (this._saveAndClose) {
-      store.dispatch(copyToSCMInputBox(compiled));
+      store.dispatch(
+        copyToSCMInputBox({
+          commitMessage: compiled,
+          selectedRepositoryPath,
+        })
+      );
       store.dispatch(closeTab());
     } else {
-      store.dispatch(copyToSCMInputBox(compiled));
+      store.dispatch(
+        copyToSCMInputBox({
+          commitMessage: compiled,
+          selectedRepositoryPath,
+        })
+      );
     }
   }
 
@@ -204,7 +220,7 @@ export class FormView extends connect(store)(LitElement) {
           ${formElements}
         </vscode-form-container>
       </div>
-      <cme-repo-selector></cme-repo-selector>
+      <cme-repo-selector id="form-view-repo-selector"></cme-repo-selector>
       <div class="buttons">
         <vscode-button
           id="success-button-form"

frontend/src/components/cme-repo-selector.ts

@@ -1,5 +1,5 @@
 import {LitElement, html, css, CSSResult, TemplateResult} from 'lit';
-import {customElement, state} from 'lit/decorators.js';
+import {customElement, state, property} from 'lit/decorators.js';
 import {nothing} from 'lit';
 import {connect} from 'pwa-helpers';
 import '@bendera/vscode-webview-elements/dist/vscode-icon';
@@ -9,6 +9,11 @@ import store, {RootState} from '../store/store';
 
 @customElement('cme-repo-selector')
 export class RepoSelector extends connect(store)(LitElement) {
+  @property()
+  get selectedRepositoryPath(): string {
+    return this._selectedRepositoryPath;
+  }
+
   @state()
   private _numberOfRepositories = 1;
 
@@ -35,6 +40,18 @@ export class RepoSelector extends connect(store)(LitElement) {
     return fpParts[fpParts.length - 1];
   }
 
+  private _handleChange(
+    ev: CustomEvent<{selectedIndex: number; value: string}>
+  ) {
+    this._selectedRepositoryPath = ev.detail.value;
+
+    const changeEvent = new CustomEvent('cme-change', {
+      detail: ev.detail.value,
+    });
+
+    this.dispatchEvent(changeEvent);
+  }
+
   static get styles(): CSSResult {
     return css`
       .repo-info {
@@ -55,7 +72,7 @@ export class RepoSelector extends connect(store)(LitElement) {
     return html`<div class="repo-info">
       <vscode-icon name="repo"></vscode-icon>&nbsp;
       <b>Selected repository:</b>&nbsp;
-      <vscode-single-select>
+      <vscode-single-select @vsc-change=${this._handleChange}>
         ${this._availableRepositories.map(
           (r) =>
             html`<vscode-option

frontend/src/components/cme-text-view.ts

@@ -1,5 +1,5 @@
 import {LitElement, html, css, CSSResult, nothing, TemplateResult} from 'lit';
-import {customElement, state} from 'lit/decorators.js';
+import {customElement, query, state} from 'lit/decorators.js';
 import {connect} from 'pwa-helpers';
 import '@bendera/vscode-webview-elements/dist/vscode-button';
 import '@bendera/vscode-webview-elements/dist/vscode-checkbox';
@@ -17,6 +17,7 @@ import {
 import './cme-code-editor/cme-code-editor';
 import './cme-recent-commits';
 import './cme-repo-selector';
+import {RepoSelector} from './cme-repo-selector';
 import {triggerInputboxRerender} from './helpers';
 
 @customElement('cme-text-view')
@@ -65,6 +66,9 @@ export class TextView extends connect(store)(LitElement) {
   @state()
   private _visibleLines = 10;
 
+  @query('#text-view-repo-selector')
+  private _repoSelector!: RepoSelector;
+
   private _staticTemplate = '';
   private _amendCbChecked = false;
 
@@ -80,13 +84,19 @@ export class TextView extends connect(store)(LitElement) {
   }
 
   private _handleSuccessButtonClick() {
+    const {selectedRepositoryPath} = this._repoSelector;
+    const successAction = copyToSCMInputBox({
+      commitMessage: this._inputBoxValue,
+      selectedRepositoryPath,
+    });
+
     if (this._amendCbChecked) {
       store.dispatch(confirmAmend(this._inputBoxValue));
     } else if (this._saveAndClose) {
-      store.dispatch(copyToSCMInputBox(this._inputBoxValue));
+      store.dispatch(successAction);
       store.dispatch(closeTab());
     } else {
-      store.dispatch(copyToSCMInputBox(this._inputBoxValue));
+      store.dispatch(successAction);
     }
   }
 
@@ -257,7 +267,7 @@ export class TextView extends connect(store)(LitElement) {
         </p>
       </div>
       ${this._useMonospaceEditor ? monospaceEditor : inputbox}
-      <cme-repo-selector></cme-repo-selector>
+      <cme-repo-selector id="text-view-repo-selector"></cme-repo-selector>
       <div class="buttons">
         <vscode-button @click="${this._handleSuccessButtonClick}"
           >${this._saveAndClose ? 'Save and close' : 'Save'}</vscode-button

frontend/src/store/actions.ts

@@ -34,12 +34,16 @@ export const textareaValueChanged = createAction<string>(
   TEXTAREA_VALUE_CHANGED
 );
 export const confirmAmend = createAction<string>(CONFIRM_AMEND);
-export const copyToSCMInputBox = createAction<string>(COPY_TO_SCM_INPUT_BOX);
+export const copyToSCMInputBox = createAction<{
+  commitMessage: string;
+  selectedRepositoryPath: string;
+}>(COPY_TO_SCM_INPUT_BOX);
 export const receiveRepositoryInfo = createAction<RepositoryInfo>(
   REPOSITORY_INFO_RECEIVED
 );
-export const updateTokenValues =
-  createAction<{[key: string]: string}>(UPDATE_TOKEN_VALUES);
+export const updateTokenValues = createAction<{[key: string]: string}>(
+  UPDATE_TOKEN_VALUES
+);
 
 export const importConfig = createAction(IMPORT_CONFIG);
 export const shareableConfigChange = createAction<ShareableConfig>(

frontend/src/store/middlewares/postMessageDispatcher.ts

@@ -27,6 +27,7 @@ export const postMessageDispatcher: Middleware = (_) => (next) => (action) => {
       break;
     case COPY_TO_SCM_INPUT_BOX:
       vscode.postMessage({
+        // TODO: rename
         command: 'copyFromExtensionMessageBox',
         payload,
       });

frontend/src/test/components/cme-form-view/cme-form-view.test.ts

@@ -190,7 +190,12 @@ describe('cme-form-view', () => {
     message += '\n';
     message += 'BREAKING CHANGE: footer test';
 
-    expect(calls[0].firstArg).to.deep.equal(copyToSCMInputBox(message));
+    expect(calls[0].firstArg).to.deep.equal(
+      copyToSCMInputBox({
+        commitMessage: message,
+        selectedRepositoryPath: '',
+      })
+    );
     expect(calls[1].firstArg).to.deep.equal(closeTab());
   });
 
@@ -228,7 +233,9 @@ describe('cme-form-view', () => {
     message += '\n';
     message += 'BREAKING CHANGE: footer test';
 
-    expect(calls[0].firstArg).to.deep.equal(copyToSCMInputBox(message));
+    expect(calls[0].firstArg).to.deep.equal(
+      copyToSCMInputBox({commitMessage: message, selectedRepositoryPath: ''})
+    );
     expect(calls[1]).to.be.undefined;
   });
 

src/commands/EditorController.ts

@@ -106,8 +106,10 @@ export default class EditorController {
     const { command, payload } = data;
 
     switch (command) {
+      // TODO: rename
       case 'copyFromExtensionMessageBox':
-        this._git.setSCMInputBoxMessage(payload);
+        const { commitMessage, selectedRepositoryPath } = payload;
+        this._git.setSCMInputBoxMessage(commitMessage, selectedRepositoryPath);
         break;
       case 'closeTab':
         this._primaryEditorPanel?.dispose();

src/utils/GitService.ts

@@ -103,8 +103,16 @@ class GitService {
     return '';
   }
 
-  public setSCMInputBoxMessage(message: string): void {
-    const repo = this.getSelectedRepository();
+  public setSCMInputBoxMessage(message: string, repositoryPath = ''): void {
+    let repo: Repository | undefined;
+
+    if (repositoryPath !== '') {
+      repo = this.getRepositoryByPath(repositoryPath);
+    }
+
+    if (!repo) {
+      repo = this.getSelectedRepository();
+    }
 
     if (repo) {
       repo.inputBox.value = message;