Adding topics details page (#369)

* Adding topics details page

* added spport for Avro and json mode .

* minor style changes

* addressing review comment

* addressing review comment

Author: Sachin-chaurasiya

catalog-rest-service/src/main/resources/ui/package-lock.json

@@ -23,6 +23,7 @@
     "bootstrap": "^4.5.2",
     "buffer": "^6.0.3",
     "builtin-status-codes": "^3.0.0",
+    "codemirror": "^5.62.3",
     "cookie-storage": "^6.1.0",
     "core-js": "^3.10.1",
     "draft-js": "^0.11.7",
@@ -53,6 +54,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
     "react-bootstrap": "^1.6.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^16.14.0",
     "react-draft-wysiwyg": "^1.14.7",
     "react-js-pagination": "^3.0.3",

catalog-rest-service/src/main/resources/ui/package.json

@@ -16,6 +16,7 @@
 */
 
 import { AxiosResponse } from 'axios';
+import { Topic } from 'Models';
 import { getURLWithQueryFields } from '../utils/APIUtils';
 import APIClient from './index';
 
@@ -31,3 +32,48 @@ export const getTopics: Function = (
 
   return APIClient.get(url);
 };
+
+export const getTopicByFqn: Function = (
+  fqn: string,
+  arrQueryFields: string
+): Promise<AxiosResponse> => {
+  const url = getURLWithQueryFields(`/topics/name/${fqn}`, arrQueryFields);
+
+  return APIClient.get(url);
+};
+
+export const addFollower: Function = (
+  topicId: string,
+  userId: string
+): Promise<AxiosResponse> => {
+  const configOptions = {
+    headers: { 'Content-type': 'application/json' },
+  };
+
+  return APIClient.put(`/topics/${topicId}/followers`, userId, configOptions);
+};
+
+export const removeFollower: Function = (
+  topicId: string,
+  userId: string
+): Promise<AxiosResponse> => {
+  const configOptions = {
+    headers: { 'Content-type': 'application/json' },
+  };
+
+  return APIClient.delete(
+    `/topics/${topicId}/followers/${userId}`,
+    configOptions
+  );
+};
+
+export const patchTopicDetails: Function = (
+  id: string,
+  data: Topic
+): Promise<AxiosResponse> => {
+  const configOptions = {
+    headers: { 'Content-type': 'application/json-patch+json' },
+  };
+
+  return APIClient.patch(`/topics/${id}`, data, configOptions);
+};

catalog-rest-service/src/main/resources/ui/src/axiosAPIs/topicsAPI.ts

@@ -0,0 +1,47 @@
+.field-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-left: 15px;
+  border-left: 3px solid #d9ceee;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.field-child {
+  display: flex;
+  gap: 4px;
+}
+.field-child::before {
+  content: '';
+  display: inline-block;
+  width: 32px;
+  height: 3px;
+  background: #d9ceee;
+  position: relative;
+  top: 11px;
+}
+.field-child-icon {
+  cursor: pointer;
+  color: #7147e8;
+}
+.field-child-icon i {
+  vertical-align: sub;
+  margin-right: 2px;
+  margin-left: 2px;
+}
+
+.field-label {
+  display: flex;
+  gap: 4px;
+}
+
+.field-label-name {
+  padding: 4px 6px;
+}
+
+.child-fields-wrapper {
+  display: flex;
+  flex-direction: column;
+  /* margin-top: -11px; */
+}

catalog-rest-service/src/main/resources/ui/src/components/common/SchemaTreeStructure/SchemaTreeStructure.css

@@ -0,0 +1,107 @@
+import React, { CSSProperties, useCallback, useState } from 'react';
+import './SchemaTreeStructure.css';
+
+type Props = {
+  positions?: Array<number>;
+  name: string;
+  type: string;
+  fields?: Array<Props>;
+  isCollapsed?: boolean;
+};
+
+export const getStyle = (type: string) => {
+  const sharedStyles = {
+    padding: '4px 8px',
+    borderRadius: '5px',
+    minWidth: '60px',
+    textAlign: 'center',
+    display: 'inline-block',
+  };
+  switch (type) {
+    case 'double':
+      return {
+        backgroundColor: '#B02AAC33',
+        color: '#B02AAC',
+        ...sharedStyles,
+      };
+
+    case 'string':
+      return {
+        backgroundColor: '#51c41a33',
+        color: '#51c41a',
+        ...sharedStyles,
+      };
+
+    case 'int':
+      return {
+        backgroundColor: '#1890FF33',
+        color: '#1890FF',
+        ...sharedStyles,
+      };
+
+    default:
+      return {
+        backgroundColor: '#EEEAF8',
+        ...sharedStyles,
+      };
+  }
+};
+
+const SchemaTreeStructure = ({
+  name,
+  type,
+  fields,
+  isCollapsed = false,
+  // to track position of element [L0,L1,L2,...Ln]
+  positions = [],
+}: Props) => {
+  const [showChildren, setShowChildren] = useState<boolean>(!isCollapsed);
+  const flag = (fields ?? []).length > 0;
+
+  const showChildrenHandler = useCallback(() => {
+    setShowChildren(!showChildren);
+  }, [showChildren, setShowChildren]);
+
+  const getIcon = () => {
+    return (
+      flag &&
+      (showChildren ? (
+        <i className="fas fa-minus-circle" />
+      ) : (
+        <i className="fas fa-plus-circle" />
+      ))
+    );
+  };
+
+  return (
+    <div
+      className="field-wrapper"
+      style={{ paddingLeft: flag ? '26px' : '0px' }}>
+      <div
+        className="field-child"
+        style={{ marginLeft: flag ? '-26px' : '0px' }}>
+        <p className="field-child-icon" onClick={showChildrenHandler}>
+          {getIcon()}
+        </p>
+        <p className="field-label">
+          <span style={getStyle(type) as CSSProperties}>{type}</span>
+          <span className="field-label-name">{name}</span>
+        </p>
+      </div>
+      {flag && showChildren && (
+        <div className="child-fields-wrapper">
+          {(fields ?? []).map((field, index) => (
+            <SchemaTreeStructure
+              isCollapsed
+              key={index}
+              positions={[...positions, index]}
+              {...field}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SchemaTreeStructure;

catalog-rest-service/src/main/resources/ui/src/components/common/SchemaTreeStructure/SchemaTreeStructure.tsx

@@ -29,6 +29,7 @@ const TabsPane = ({ activeTab, setActiveTab, tabs }: Props) => {
           tab.isProtected ? (
             <NonAdminAction
               isOwner={tab.protectedState}
+              key={tab.position}
               title="You need to be owner to perform this action">
               <button
                 className={getTabClasses(tab.position, activeTab)}
@@ -46,6 +47,7 @@ const TabsPane = ({ activeTab, setActiveTab, tabs }: Props) => {
             <button
               className={getTabClasses(tab.position, activeTab)}
               data-testid="tab"
+              key={tab.position}
               onClick={() => setActiveTab(tab.position)}>
               <SVGIcons
                 alt={tab.icon.alt}