+
diff --git a/src/app/shared/entry/info-tab-topic/display-topic/display-topic.component.spec.ts b/src/app/shared/entry/info-tab-topic/display-topic/display-topic.component.spec.ts
new file mode 100644
index 0000000000..2d4bfe6f39
--- /dev/null
+++ b/src/app/shared/entry/info-tab-topic/display-topic/display-topic.component.spec.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2024 OICR and UCSC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DisplayTopicComponent } from './display-topic.component';
+import { EntryTypeMetadataStubService } from 'app/test/service-stubs';
+import { MatLegacyDialogModule } from '@angular/material/legacy-dialog';
+import { EntryTypeMetadataService } from 'app/entry/type-metadata/entry-type-metadata.service';
+import { sampleWorkflow1 } from 'app/test/mocked-objects';
+
+describe('DisplayTopicComponent', () => {
+ let component: DisplayTopicComponent;
+ let fixture: ComponentFixture
+ Topic:
+ {{ selectedTopic || 'n/a' }}
+
+ {{ entry.topicSelection === TopicSelectionEnum.MANUAL ? 'edit' : 'sync' }}
+ {{ entry.topicSelection | titlecase }}
+
+
+
+Select a Topic
++ A topic is a short description of your {{ entryTypeMetadata.term }}. There are {{ isHostedEntry ? 'two' : 'three' }} types of topics + that you can choose from: +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ edit
+ Manual
+
+
+ Entered manually by the user{{ isGitHubAppEntry ? ' in the .dockstore.yml file on GitHub' : '' }}.
+
+
+ {{ entry.topicManual || 'Not Available' }}
+
+
+ sync
+ Automatic
+
+ Retrieved automatically from the GitHub repository description.
+
+ {{ entry.topicAutomatic || 'Not Available' }}
+
+
+ 
+ AI
+
+
+ AI
+ Generated by AI using the content of your {{ entryTypeMetadata.term }}.
+ {{ entry.topicAI || 'Not Available' }}
+
+
+
+
diff --git a/src/app/shared/entry/info-tab-topic/edit-topic/edit-topic-dialog.component.scss b/src/app/shared/entry/info-tab-topic/edit-topic/edit-topic-dialog.component.scss
new file mode 100644
index 0000000000..7a9b2dbddd
--- /dev/null
+++ b/src/app/shared/entry/info-tab-topic/edit-topic/edit-topic-dialog.component.scss
@@ -0,0 +1,9 @@
+// This style ensures that the mat radio content text fills up the whole mat-card
+:host ::ng-deep .mat-radio-label-content {
+ width: 100%;
+}
+
+// Wraps the text because by default, mat-radio-label doesn't wrap
+:host ::ng-deep .mat-radio-label {
+ white-space: normal;
+}
diff --git a/src/app/shared/entry/info-tab-topic/edit-topic/edit-topic-dialog.component.spec.ts b/src/app/shared/entry/info-tab-topic/edit-topic/edit-topic-dialog.component.spec.ts
new file mode 100644
index 0000000000..ad5efac85e
--- /dev/null
+++ b/src/app/shared/entry/info-tab-topic/edit-topic/edit-topic-dialog.component.spec.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2024 OICR and UCSC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { EditTopicDialogStubService, EntryActionsStubService, EntryTypeMetadataStubService } from 'app/test/service-stubs';
+import { MAT_LEGACY_DIALOG_DATA, MatLegacyDialogModule, MatLegacyDialogRef } from '@angular/material/legacy-dialog';
+import { EntryTypeMetadataService } from 'app/entry/type-metadata/entry-type-metadata.service';
+import { sampleWorkflow1 } from 'app/test/mocked-objects';
+import { EditTopicDialogComponent } from './edit-topic-dialog.component';
+import { EditTopicDialogService } from './edit-topic-dialog.service';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { EntryActionsService } from 'app/shared/entry-actions/entry-actions.service';
+
+describe('EditTopicDialogComponent', () => {
+ let component: EditTopicDialogComponent;
+ let fixture: ComponentFixture
- Topic:
- {{ workflow?.topicAutomatic }}
- {{ workflow?.topicManual }}
-
- {{ workflow?.topicAI }}
-
-
- Topic Automatic:
- {{ workflow?.topicAutomatic }}
-
-
- AI Generated Topic:
- {{ workflow?.topicAI }}
-
-
-
-
- Topic Selection:
-
-
- Automatic
- Manual
- AI Generated
-
-
-
+