Merge pull request #10 from microsoft/ByAgenT/fields-hint

Add table with field ref names

.eslintrc.js

@@ -63,7 +63,7 @@ module.exports = {
     'react/no-string-refs': 0,
     'react/no-unknown-property': 1,
     'react/prefer-es6-class': 1,
-    'react/prop-types': 1,
+    'react/prop-types': 0,
     'react/react-in-jsx-scope': 1,
     'react/self-closing-comp': 1,
     'react/sort-comp': 1,

src/confighub/components/FieldsTable.tsx

@@ -0,0 +1,50 @@
+import { ObservableValue } from 'azure-devops-ui/Core/Observable';
+import {
+  ColumnFill,
+  ISimpleTableCell,
+  renderSimpleCell,
+  Table,
+  TableColumnLayout,
+} from 'azure-devops-ui/Table';
+import { IItemProvider } from 'azure-devops-ui/Utilities/Provider';
+import * as React from 'react';
+
+export const tableDefinition = [
+  {
+    columnLayout: TableColumnLayout.singleLinePrefix,
+    id: 'name',
+    name: 'Name',
+    readonly: true,
+    renderCell: renderSimpleCell,
+    width: new ObservableValue(400),
+  },
+  {
+    id: 'reference',
+    name: 'Reference Name',
+    readonly: true,
+    renderCell: renderSimpleCell,
+    width: new ObservableValue(600),
+  },
+  ColumnFill,
+];
+
+interface FieldTableItem extends ISimpleTableCell {
+  name: string;
+  reference: string;
+}
+
+interface FieldsTableProps {
+  itemProvider: IItemProvider<FieldTableItem>;
+}
+
+const FieldsTable: React.FC<FieldsTableProps> = ({ itemProvider }) => (
+  <Table
+    columns={tableDefinition}
+    itemProvider={itemProvider}
+    selectableText={true}
+    role='table'
+    pageSize={itemProvider.length}
+  />
+);
+
+export { FieldsTable, FieldTableItem };

src/confighub/hooks/projectfieldlist.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import * as SDK from 'azure-devops-extension-sdk';
+import { FieldTableItem } from '../components/FieldsTable';
+import { IProjectPageService, CommonServiceIds, getClient } from 'azure-devops-extension-api';
+import { WorkItemTrackingRestClient } from 'azure-devops-extension-api/WorkItemTracking/WorkItemTrackingClient';
+
+function useProjectFieldsList(): FieldTableItem[] {
+  const [fields, setFields] = useState<FieldTableItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const projectInfoService = await SDK.getService<IProjectPageService>(
+        CommonServiceIds.ProjectPageService
+      );
+      const project = await projectInfoService.getProject();
+      const witRestClient = await getClient(WorkItemTrackingRestClient);
+      const fields = await witRestClient.getFields(project.id);
+      setFields(fields.map(field => ({ name: field.name, reference: field.referenceName })));
+    })();
+  }, []);
+
+  return fields;
+}
+
+export { useProjectFieldsList };

src/confighub/views/ConfigView.tsx

@@ -2,8 +2,11 @@ import * as React from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import styled from 'styled-components';
 import { Header } from '../components/Header';
-import { useExternalToast } from '../hooks/toast';
 import { useConfigurationStorage } from '../hooks/configstorage';
+import { useExternalToast } from '../hooks/toast';
+import { FieldsTable, FieldTableItem } from '../components/FieldsTable';
+import { ArrayItemProvider } from 'azure-devops-ui/Utilities/Provider';
+import { useProjectFieldsList } from '../hooks/projectfieldlist';
 
 const EditorContainer = styled.div`
   display: flex;
@@ -22,9 +25,10 @@ const EditorOptions = {
   selectOnLineNumbers: true,
 };
 
-const ConfigView = () => {
+const ConfigView: React.FC = () => {
   const [configText, status, saveDraft, publishConfig] = useConfigurationStorage();
   const showToast = useExternalToast();
+  const fields = useProjectFieldsList();
 
   function editorDidMount(editor) {
     editor.getModel().updateOptions({ tabSize: 2 });
@@ -55,6 +59,7 @@ const ConfigView = () => {
           }}
         />
       </EditorContainer>
+      <FieldsTable itemProvider={new ArrayItemProvider<FieldTableItem>(fields)} />
     </ConfigViewContainer>
   );
 };