Fix: Topics table fixs

apps/tenant-management-webapp/src/app/pages/admin/services/comment/comments/commentsTable.tsx

@@ -45,13 +45,15 @@ export const CommentListTable: FunctionComponent<CommentTableProps> = ({ topic,
         </GoAButton>
       </HeaderFont>
       {Object.keys(comments).map((comment) => {
-        <CommentsList>
-          <CommentsHeader>
-            <CommentsHeading>{comment}</CommentsHeading>
-            <CommentsActions>{comment}</CommentsActions>
-          </CommentsHeader>
-          <CommentBody>{comment}</CommentBody>
-        </CommentsList>;
+        return (
+          <CommentsList>
+            <CommentsHeader>
+              <CommentsHeading>{comment}</CommentsHeading>
+              <CommentsActions>{comment}</CommentsActions>
+            </CommentsHeader>
+            <CommentBody>{comment}</CommentBody>
+          </CommentsList>
+        );
       })}
       {showAddComment && (
         <AddCommentModal

apps/tenant-management-webapp/src/app/pages/admin/services/comment/topics/topicsList.tsx

@@ -31,7 +31,7 @@ export const TopicsList = (): JSX.Element => {
   const [openAddTopic, setOpenAddTopic] = useState(false);
   const [modalType, setModalType] = useState('');
   const [selectedType, setSelectedType] = useState('');
-  const [spinner, setSpinner] = useState(false);
+
   const indicator = useSelector((state: RootState) => {
     return state?.session?.indicator;
   });
@@ -81,7 +81,6 @@ export const TopicsList = (): JSX.Element => {
               name="TopicTypes"
               value={selectedType}
               onChange={(name: string, selectedType: string) => {
-                setSpinner(true);
                 setSelectedType(selectedType);
               }}
               aria-label="select-comment-topictype-dropdown"
@@ -122,13 +121,14 @@ export const TopicsList = (): JSX.Element => {
         </ProgressWrapper>
       )}
       {!indicator.show && selectedType !== '' && topics && Object.keys(topics).length === 0 && renderNoItem('topics')}
-      {!indicator.show && selectedType !== '' && topics && Object.keys(topics).length !== 0 && (
+      {selectedType !== '' && topics && Object.keys(topics).length !== 0 && (
         <Visible visible={true}>
           {
             <TopicListTable
               topics={topics}
               onDeleteTopic={(topicSelected) => {
                 dispatch(deleteTopicRequest(topicSelected.id));
+                dispatch(fetchTopicsRequest(topicTypes[selectedType]));
               }}
             />
           }

apps/tenant-management-webapp/src/app/pages/admin/services/comment/topics/topicsTable.tsx

@@ -1,4 +1,4 @@
 import React, { FunctionComponent } from 'react';
 import DataTable from '@components/DataTable';
 import { TopicTableItem } from './topicTableItem';
 import { TopicItem } from '@store/comment/model';
@@ -22,9 +22,9 @@
         <DataTable data-testid="topic-table">
           <thead data-testid="topic-table-header">
             <tr>
-              <th data-testid="topic-table-header-namespace">Topic name</th>
-              <th data-testid="topic-table-header-name">Resource ID</th>
-              <th data-testid="topic-table-header-name">Action</th>
+              <th data-testid="topic-table-header-topicname">Topic name</th>
+              <th data-testid="topic-table-header-resourceid">Resource ID</th>
+              <th data-testid="topic-table-header-action">Action</th>
             </tr>
           </thead>
           <tbody>

apps/tenant-management-webapp/src/app/store/comment/action.ts

@@ -61,7 +61,7 @@ export interface AddTopicRequestAction {
 
 export interface AddTopicSuccessAction {
   type: typeof CREATE_COMMENT_TOPIC_SUCCESS_ACTION;
-  payload: TopicItem[];
+  payload: TopicItem;
 }
 
 export interface FetchTopicsRequestAction {
@@ -184,7 +184,7 @@ export const addTopicRequest = (topic: TopicItem[]): AddTopicRequestAction => ({
   payload: topic,
 });
 
-export const addTopicSuccess = (topic: TopicItem[]): AddTopicSuccessAction => ({
+export const addTopicSuccess = (topic: TopicItem): AddTopicSuccessAction => ({
   type: CREATE_COMMENT_TOPIC_SUCCESS_ACTION,
   payload: topic,
 });

apps/tenant-management-webapp/src/app/store/comment/reducers.ts

@@ -45,7 +45,7 @@ export default function (state: CommentState = defaultState, action: CommentActi
     case CREATE_COMMENT_TOPIC_SUCCESS_ACTION:
       return {
         ...state,
-        topics: { ...state.topics, ...action.payload },
+        topics: [...state.topics, action.payload],
       };
 
     case SET_COMMENT_TOPICS_ACTION:

apps/tenant-management-webapp/src/app/store/comment/sagas.ts

@@ -122,15 +122,25 @@ export function* deleteCommentTopicTypes({ topicTypeId }: DeleteCommentTopicType
 }
 
 function* addTopicSaga({ payload }: AddTopicRequestAction): SagaIterator {
+  yield put(
+    UpdateIndicator({
+      show: true,
+      message: 'Creating Topic...',
+    })
+  );
   const baseUrl: string = yield select((state: RootState) => state.config.serviceUrls?.commentServiceApiUrl);
   const token = yield call(getAccessToken);
 
   try {
     const url = `${baseUrl}/comment/v1/topics`;
     const newTopic = yield call(addTopicApi, token, url, payload);
     yield put(addTopicSuccess(newTopic));
+
+    yield put(UpdateIndicator({ show: false }));
   } catch (error) {
     yield put(ErrorNotification(error.toString()));
+
+    yield put(UpdateIndicator({ show: false }));
   }
 }