UI: Display feature key column in feature table (#569)

* Add key column in feature list page

* Fix lint issues

* Change Key to Entity Key

.github/pull_request_template.md

@@ -4,14 +4,14 @@ Hey! Thank you for the contribution! Please go through https://github.com/linked
 
 Describe
 - What changes to make and why you are making these changes.
-- How are you going to achieve your goal Describe what testings you have done, for example, performance testing etc.
+- How are you going to achieve your goal. Describe what testings you have done, for example, performance testing etc.
 
 If this PR resolves an issue be sure to include "Resolves #XXX" to correctly link and close the issue upon merge.
 -->
 
 Resolves #XXX
 
-## How was this patch tested?
+## How was this PR tested?
 <!--
 If you're unsure about what to test, where to add tests, or how to run tests, please feel free to ask. We'd be happy to help.
 -->
@@ -22,14 +22,4 @@ If yes, please clarify the previous behavior and the change this PR proposes - p
 If no, choose 'No'.
 -->
 - [ ] No. You can skip the rest of this section.
-- [ ] Yes. Make sure to clarify your proposed changes.
-
-## Dependencies
-<!--
-Please list the new dependencies in the PR description with
-
-- What's their license
-- Are they compatible with our license
--->
-- [ ] No. You can skip the rest of this section.
-- [ ] Yes. Make sure to list all the dependencies and licenses.
+- [ ] Yes. Make sure to clarify your proposed changes.

ui/src/components/dataSourceList.tsx

@@ -152,6 +152,7 @@ const DataSourceList: React.FC = () => {
           value={project}
           optionFilterProp="label"
           notFoundContent={<div>No projects found from server</div>}
+          showSearch={true}
           onChange={onProjectChange}
         ></Select>
       </Form.Item>

ui/src/components/featureList.tsx

@@ -44,7 +44,7 @@ const FeatureList: React.FC = () => {
     {
       title: <div>Type</div>,
       key: "type",
-      width: 120,
+      width: 80,
       render: (name: string, row: Feature) => {
         return (
           <div>{row.typeName.replace("feathr_", "").replace("_v1", "")}</div>
@@ -63,11 +63,9 @@ const FeatureList: React.FC = () => {
       key: "transformation",
       width: 190,
       render: (name: string, row: Feature) => {
+        const transformation = row.attributes.transformation;
         return (
-          <div>
-            {row.attributes.transformation.transformExpr ??
-              row.attributes.transformation.defExpr}
-          </div>
+          <div>{transformation.transformExpr ?? transformation.defExpr}</div>
         );
       },
       onCell: () => {
@@ -78,24 +76,44 @@ const FeatureList: React.FC = () => {
         };
       },
     },
+    {
+      title: <div>Entity Key</div>,
+      key: "aggregation",
+      width: 80,
+      render: (name: string, row: Feature) => {
+        const key = row.attributes.key && row.attributes.key[0];
+        if ("NOT_NEEDED" !== key.keyColumn) {
+          return (
+            <div>
+              {key.keyColumn && `${key.keyColumn}`}{" "}
+              {key.keyColumnType && `(${key.keyColumnType})`}
+            </div>
+          );
+        } else {
+          return <div>N/A</div>;
+        }
+      },
+      onCell: () => {
+        return {
+          style: {
+            maxWidth: 120,
+          },
+        };
+      },
+    },
     {
       title: <div>Aggregation</div>,
       key: "aggregation",
       width: 150,
       render: (name: string, row: Feature) => {
+        const transformation = row.attributes.transformation;
         return (
           <>
             <div>
-              {row.attributes.transformation.aggFunc &&
-                `Type: ${row.attributes.transformation.aggFunc}`}
-            </div>
-            <div>
-              {row.attributes.transformation.aggFunc &&
-                `Window: ${row.attributes.transformation.window}`}
+              {transformation.aggFunc && `Type: ${transformation.aggFunc}`}
             </div>
             <div>
-              {row.attributes.transformation.aggFunc &&
-                `Key: ${row.attributes.key[0].keyColumn}`}
+              {transformation.aggFunc && `Window: ${transformation.window}`}
             </div>
           </>
         );

ui/src/components/graph/graphNodeDetails.tsx

@@ -74,7 +74,7 @@ const GraphNodeDetails: React.FC = () => {
           )}
           {feature?.attributes.key && feature.attributes.key.length > 0 && (
             <Card>
-              <Title level={4}>Key</Title>
+              <Title level={4}>Entity Key</Title>
               <p>Full name: {feature.attributes.key[0].fullName}</p>
               <p>Description: {feature.attributes.key[0].description}</p>
               <p>Key column: {feature.attributes.key[0].keyColumn}</p>

ui/src/components/roleManagementForm.tsx

@@ -58,7 +58,7 @@ const RoleManagementForm: React.FC<RoleManagementFormProps> = ({
             label="User Name"
             rules={[{ required: true }]}
           >
-            <Input disabled={!editMode} placeholder="Email Account or App Id"/>
+            <Input disabled={!editMode} placeholder="Email Account or App Id" />
           </Form.Item>
           <Form.Item
             name="roleName"

ui/src/components/userRoles.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   Menu,
   message,
-  PageHeader,
   Popconfirm,
   Row,
   Space,

ui/src/pages/feature/featureDetails.tsx

@@ -14,15 +14,14 @@ import { getElements } from "../../components/graph/utils";
 
 const { Title } = Typography;
 
-function FeatureKey(props: { feature: Feature }) {
+const FeatureKey = (props: { feature: Feature }) => {
   const keys = props.feature.attributes.key;
-  console.log(props.feature.attributes);
   return (
     <>
       {keys && keys.length > 0 && (
         <Col span={24}>
           <Card className="card">
-            <Title level={4}>Key</Title>
+            <Title level={4}>Entity Key</Title>
             <div className="feature-container">
               <p>Full Name: {keys[0].fullName}</p>
               <p>Key Column: {keys[0].keyColumn}</p>
@@ -35,9 +34,9 @@ function FeatureKey(props: { feature: Feature }) {
       )}
     </>
   );
-}
+};
 
-function FeatureType(props: { feature: Feature }) {
+const FeatureType = (props: { feature: Feature }) => {
   const type = props.feature.attributes.type;
   return (
     <>
@@ -56,9 +55,9 @@ function FeatureType(props: { feature: Feature }) {
       )}
     </>
   );
-}
+};
 
-function FeatureTransformation(props: { feature: Feature }) {
+const FeatureTransformation = (props: { feature: Feature }) => {
   const transformation = props.feature.attributes.transformation;
   return (
     <>
@@ -88,9 +87,9 @@ function FeatureTransformation(props: { feature: Feature }) {
       )}
     </>
   );
-}
+};
 
-function InputAnchorFeatures(props: { project: string; feature: Feature }) {
+const InputAnchorFeatures = (props: { project: string; feature: Feature }) => {
   const navigate = useNavigate();
   const inputAnchorFeatures = props.feature.attributes.inputAnchorFeatures;
   return (
@@ -124,7 +123,7 @@ function InputAnchorFeatures(props: { project: string; feature: Feature }) {
       )}
     </>
   );
-}
+};
 
 function InputDerivedFeatures(props: { project: string; feature: Feature }) {
   const navigate = useNavigate();