Fetch breaking changes data from web api (#5202)

Signed-off-by: khanhtc1202 <[email protected]>

Author: khanhtc1202

web/src/api/piped.ts

@@ -22,6 +22,8 @@ import {
   ListReleasedVersionsRequest,
   RestartPipedRequest,
   RestartPipedResponse,
+  ListDeprecatedNotesRequest,
+  ListDeprecatedNotesResponse,
 } from "pipecd/web/api_client/service_pb";
 
 export const getPipeds = ({
@@ -39,6 +41,16 @@ export const listReleasedVersions = (): Promise<
   return apiRequest(req, apiClient.listReleasedVersions);
 };
 
+export const listBreakingChanges = ({
+  projectId,
+}: ListDeprecatedNotesRequest.AsObject): Promise<
+  ListDeprecatedNotesResponse.AsObject
+> => {
+  const req = new ListDeprecatedNotesRequest();
+  req.setProjectId(projectId);
+  return apiRequest(req, apiClient.listDeprecatedNotes);
+};
+
 export const registerPiped = ({
   name,
   desc,

web/src/components/application-detail-page/application-detail/index.test.tsx

@@ -69,6 +69,7 @@ const baseState: Partial<AppState> = {
     registeredPiped: null,
     updating: false,
     releasedVersions: [],
+    breakingChangesNote: "",
   },
 };
 

web/src/components/applications-page/edit-application-drawer/index.test.tsx

@@ -38,6 +38,7 @@ const initialState = {
     registeredPiped: null,
     updating: false,
     releasedVersions: [],
+    breakingChangesNote: "",
   },
   applications: {
     loading: false,

web/src/components/deployments-detail-page/index.test.tsx

@@ -28,6 +28,7 @@ describe("DeploymentDetailPage", () => {
         registeredPiped: null,
         updating: false,
         releasedVersions: [],
+        breakingChangesNote: "",
       },
     });
 

web/src/components/settings-page/piped/index.tsx

@@ -42,6 +42,7 @@ import {
   restartPiped,
   fetchPipeds,
   fetchReleasedVersions,
+  fetchBreakingChanges,
   Piped,
   RegisteredPiped,
   selectAllPipeds,
@@ -95,6 +96,7 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
     enabled: true,
   });
   const dispatch = useAppDispatch();
+  const projectId = useAppSelector((state) => state.project.id);
   const pipeds = useAppSelector<Piped.AsObject[]>((state) =>
     selectFilteredPipeds(state, filterValues)
   );
@@ -103,10 +105,22 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() {
     dispatch(fetchReleasedVersions());
   }, [dispatch]);
 
+  useEffect(() => {
+    if (projectId) {
+      dispatch(fetchBreakingChanges({ projectId: projectId }));
+    }
+  }, [dispatch, projectId]);
+
   const releasedVersions = useAppSelector<string[]>(
     (state) => state.pipeds.releasedVersions
   );
 
+  const breakingChangesNote = useAppSelector<string | null>(
+    (state) => state.pipeds.breakingChangesNote
+  );
+  // TODO: Remove this console.log
+  console.log("[DEBUG]", breakingChangesNote);
+
   const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false);
   const handleUpgradeDialogClose = (): void => setIsUpgradeDialogOpen(false);
 

web/src/modules/pipeds/index.test.ts

@@ -14,6 +14,7 @@ const baseState = {
   registeredPiped: null,
   updating: false,
   releasedVersions: [],
+  breakingChangesNote: "",
 };
 
 describe("pipedsSlice reducer", () => {

web/src/modules/pipeds/index.ts

@@ -37,6 +37,16 @@ export const fetchReleasedVersions = createAsyncThunk<string[]>(
   }
 );
 
+export const fetchBreakingChanges = createAsyncThunk<
+  string,
+  { projectId: string }
+>(`${MODULE_NAME}/fetchBreakingChanges`, async (props) => {
+  const { notes } = await pipedsApi.listBreakingChanges({
+    projectId: props.projectId,
+  });
+  return notes;
+});
+
 export const fetchPipeds = createAsyncThunk<Piped.AsObject[], boolean>(
   `${MODULE_NAME}/fetchList`,
   async (withStatus: boolean) => {
@@ -120,10 +130,12 @@ export const pipedsSlice = createSlice({
     registeredPiped: RegisteredPiped | null;
     updating: boolean;
     releasedVersions: string[];
+    breakingChangesNote: string;
   }>({
     registeredPiped: null,
     updating: false,
     releasedVersions: [],
+    breakingChangesNote: "",
   }),
   reducers: {
     clearRegisteredPipedInfo(state) {
@@ -157,6 +169,9 @@ export const pipedsSlice = createSlice({
       })
       .addCase(fetchReleasedVersions.fulfilled, (state, action) => {
         state.releasedVersions = action.payload;
+      })
+      .addCase(fetchBreakingChanges.fulfilled, (state, action) => {
+        state.breakingChangesNote = action.payload;
       });
   },
 });