Add color mapping for PR status and update legends menu component

web-server/pages/api/internal/team/[team_id]/deployment_analytics.ts

@@ -1,11 +1,18 @@
-import { descend, isNil, mapObjIndexed, prop, reject, sort } from 'ramda';
+import { isNil, reject } from 'ramda';
 import * as yup from 'yup';
 
 import { handleRequest } from '@/api-helpers/axios';
 import { Endpoint } from '@/api-helpers/global';
+import { Row } from '@/constants/db';
 import { mockDeploymentFreq } from '@/mocks/deployment-freq';
-import { TeamDeploymentsApiResponse } from '@/types/resources';
+import {
+  RepoWorkflowExtended,
+  UpdatedTeamDeploymentsApiResponse
+} from '@/types/resources';
+import { adaptedDeploymentsMap } from '@/utils/adapt_deployments';
 import { isoDateString } from '@/utils/date';
+import { db } from '@/utils/db';
+import groupBy from '@/utils/objectArray';
 
 const pathSchema = yup.object().shape({
   team_id: yup.string().uuid().required()
@@ -22,25 +29,62 @@ const endpoint = new Endpoint(pathSchema);
 endpoint.handle.GET(getSchema, async (req, res) => {
   if (req.meta?.features?.use_mock_data) return res.send(mockDeploymentFreq);
 
-  const { team_id, branches, from_date, to_date } = req.payload;
-  return res.send(
-    await handleRequest<TeamDeploymentsApiResponse>(
-      `/v2/teams/${team_id}/deployment_analytics`,
+  const { team_id, from_date, to_date } = req.payload;
+
+  const [updatedResponse, workflows_map] = await Promise.all([
+    handleRequest<UpdatedTeamDeploymentsApiResponse>(
+      `/teams/${team_id}/deployment_analytics`,
       {
         params: reject(isNil, {
-          branches,
           from_time: isoDateString(new Date(from_date)),
           to_time: isoDateString(new Date(to_date))
         })
       }
-    ).then((r) => ({
-      ...r,
-      deployments_map: mapObjIndexed(
-        sort(descend(prop('conducted_at'))),
-        r.deployments_map
+    ),
+    db('RepoWorkflow')
+      .select('*')
+      .leftJoin(
+        'TeamRepos',
+        'TeamRepos.org_repo_id',
+        'RepoWorkflow.org_repo_id'
+      )
+      .where('TeamRepos.team_id', team_id)
+      .then((rows) =>
+        groupBy(
+          rows.map(
+            (row: Row<'RepoWorkflow'>) =>
+              ({
+                id: row.id,
+                created_at: row.created_at,
+                name: row.name,
+                provider: row.provider?.toLowerCase(),
+                repo_id: row.org_repo_id,
+                type: row.type,
+                updated_at: row.updated_at
+              }) as RepoWorkflowExtended
+          )
+        )
       )
-    }))
-  );
+    // handleRequest<{ workflows: RepoWorkflowExtended[] }>(
+    //   `/teams/${team_id}/workflows`
+    // ).then((r) =>
+    //   r.workflows.reduce(
+    //     (acc, w) => ({
+    //       ...acc,
+    //       [w.id]: w
+    //     }),
+    //     {} as Record<ID, RepoWorkflowExtended>
+    //   )
+    // )
+  ]);
+
+  const adaptedUpdatedResponse = {
+    ...updatedResponse,
+    deployments_map: adaptedDeploymentsMap(updatedResponse.deployments_map),
+    workflows_map
+  };
+
+  res.send(adaptedUpdatedResponse);
 });
 
 export default endpoint.serve();

web-server/src/components/InsightChip.tsx

@@ -0,0 +1,44 @@
+import { ArrowForwardRounded, InfoOutlined } from '@mui/icons-material';
+import { useTheme } from '@mui/material';
+import { FC, ReactNode } from 'react';
+
+import { FlexBox, FlexBoxProps } from '@/components/FlexBox';
+import { deepMerge } from '@/utils/datatype';
+
+export const InsightChip: FC<
+  { startIcon?: ReactNode; endIcon?: ReactNode; cta?: ReactNode } & FlexBoxProps
+> = ({
+  startIcon = startIconDefault,
+  endIcon = endIconDefault,
+  cta,
+  children,
+  ...props
+}) => {
+  const theme = useTheme();
+
+  return (
+    <FlexBox
+      p={1}
+      border={`1px solid ${theme.colors.secondary.light}`}
+      borderRadius={2}
+      gap={1 / 2}
+      alignCenter
+      pointer
+      {...props}
+      sx={deepMerge(props.sx, {
+        transition: 'all 0.2s',
+        ':hover': {
+          bgcolor: theme.colors.secondary.lighter
+        }
+      })}
+    >
+      {startIcon}
+      {children}
+      <FlexBox ml="auto">{cta}</FlexBox>
+      <FlexBox round>{endIcon}</FlexBox>
+    </FlexBox>
+  );
+};
+
+const startIconDefault = <InfoOutlined fontSize="small" color="info" />;
+const endIconDefault = <ArrowForwardRounded color="info" fontSize="small" />;

web-server/src/components/LegendItem.tsx

@@ -0,0 +1,26 @@
+import { Box, useTheme } from '@mui/material';
+import { FC, ReactNode } from 'react';
+
+export const LegendItem: FC<{
+  size?: 'default' | 'small';
+  color: string;
+  label: ReactNode;
+}> = ({ size: _size = 'default', color, label }) => {
+  const theme = useTheme();
+  const size = _size === 'default' ? 1.5 : 1;
+  const fontSize = _size === 'default' ? '1em' : '0.8em';
+  const gap = _size === 'default' ? 1 : 0.5;
+  return (
+    <Box display="flex" alignItems="center" gap={gap}>
+      <Box
+        height={theme.spacing(size)}
+        width={theme.spacing(size)}
+        borderRadius="100vw"
+        bgcolor={color}
+      />
+      <Box flex={1} fontSize={fontSize}>
+        {label}
+      </Box>
+    </Box>
+  );
+};

web-server/src/components/LegendsMenu.tsx

@@ -0,0 +1,42 @@
+import { Box, useTheme } from '@mui/material';
+import { Serie } from '@nivo/line';
+import { FC } from 'react';
+
+import { FlexBox } from './FlexBox';
+
+export const LegendsMenu: FC<{
+  series: Serie[];
+}> = ({ series }) => {
+  const theme = useTheme();
+
+  return (
+    <FlexBox
+      gap={2}
+      alignCenter
+      fullWidth
+      wrap
+      sx={{ rowGap: theme.spacing(1 / 4) }}
+      justifyCenter
+    >
+      {series?.map((dataset, index) => {
+        return (
+          <FlexBox alignCenter key={index}>
+            <FlexBox col>
+              <FlexBox gap1 alignCenter>
+                {dataset.id}
+                <Box
+                  sx={{
+                    width: theme.spacing(2),
+                    height: theme.spacing(3 / 4),
+                    backgroundColor: dataset.color,
+                    borderRadius: theme.spacing(1 / 2)
+                  }}
+                />
+              </FlexBox>
+            </FlexBox>
+          </FlexBox>
+        );
+      })}
+    </FlexBox>
+  );
+};

web-server/src/components/PRTable/PrTableWithPrExclusionMenu.tsx

@@ -0,0 +1,172 @@
+import { Button, Divider } from '@mui/material';
+import { useRouter } from 'next/router';
+import { FC, useMemo, useCallback, useEffect } from 'react';
+
+import { PullRequestsTableHeadProps } from '@/components/PRTable/PullRequestsTableHead';
+import { useModal } from '@/contexts/ModalContext';
+import { useAuth } from '@/hooks/useAuth';
+import { useEasyState } from '@/hooks/useEasyState';
+import { useFeature } from '@/hooks/useFeature';
+import { useSingleTeamConfig } from '@/hooks/useStateTeamConfig';
+import { updateExcludedPrs, fetchExcludedPrs } from '@/slices/team';
+import { useDispatch, useSelector } from '@/store';
+import { PR } from '@/types/resources';
+
+import { PullRequestsTable } from './PullRequestsTable';
+
+import { FlexBox } from '../FlexBox';
+import { Line } from '../Text';
+
+export const PrTableWithPrExclusionMenu: FC<
+  { propPrs: PR[]; onUpdateCallback: () => void } & Omit<
+    PullRequestsTableHeadProps,
+    'conf' | 'updateSortConf' | 'count'
+  >
+> = ({ propPrs, onUpdateCallback }) => {
+  const dispatch = useDispatch();
+  const router = useRouter();
+  const { userId } = useAuth();
+  const { addModal } = useModal();
+
+  const teamId = useSingleTeamConfig().singleTeamId;
+  const selectedPrIds = useEasyState<ID[]>([]);
+
+  const excludedPrs = useSelector((s) => s.team.excludedPrs);
+
+  const updateExcludedPrsHandler = useCallback(() => {
+    const selectedPrIdsSet = new Set(selectedPrIds.value);
+    const selectedPrs = propPrs.filter((pr) => selectedPrIdsSet.has(pr.id));
+
+    dispatch(
+      updateExcludedPrs({
+        userId,
+        teamId,
+        excludedPrs: [...excludedPrs, ...selectedPrs]
+      })
+    ).then(() => onUpdateCallback());
+  }, [
+    dispatch,
+    excludedPrs,
+    onUpdateCallback,
+    propPrs,
+    selectedPrIds.value,
+    teamId,
+    userId
+  ]);
+
+  const isUserRoute = router.pathname.includes('/user');
+  const isPrExclusionEnabled = useFeature('enable_pr_exclusion');
+  const enablePrSelection = useMemo(
+    () => !isUserRoute && isPrExclusionEnabled,
+    [isPrExclusionEnabled, isUserRoute]
+  );
+
+  useEffect(() => {
+    dispatch(fetchExcludedPrs({ teamId }));
+  }, [dispatch, userId, teamId]);
+
+  return (
+    <PullRequestsTable
+      propPrs={propPrs}
+      selectionMenu={
+        enablePrSelection && (
+          <FlexBox>
+            {Boolean(selectedPrIds.value.length) && (
+              <Button
+                sx={{ p: 1.5 }}
+                variant="outlined"
+                disabled={!selectedPrIds.value.length}
+                onClick={updateExcludedPrsHandler}
+              >
+                Exclude From Team Analytics
+              </Button>
+            )}
+            {Boolean(excludedPrs?.length) &&
+              !Boolean(selectedPrIds.value.length) && (
+                <Button
+                  sx={{ p: 1.5 }}
+                  variant="outlined"
+                  onClick={() => {
+                    addModal({
+                      title: 'PRs Excluded From Team Analytics',
+                      body: (
+                        <ExcludedPrTable onUpdateCallback={onUpdateCallback} />
+                      )
+                    });
+                  }}
+                >
+                  Show Excluded PRs
+                </Button>
+              )}
+          </FlexBox>
+        )
+      }
+      selectedPrIds={selectedPrIds}
+      isPrSelectionEnabled={enablePrSelection}
+    />
+  );
+};
+
+export const ExcludedPrTable: FC<{
+  onUpdateCallback: () => void;
+}> = ({ onUpdateCallback }) => {
+  const dispatch = useDispatch();
+  const { userId } = useAuth();
+  const teamId = useSingleTeamConfig().singleTeamId;
+
+  const excludedPrs = useSelector((s) => s.team.excludedPrs);
+  const selectedPrIds = useEasyState<ID[]>([]);
+
+  const updateExcludedPrsHandler = useCallback(() => {
+    const selectedPrIdsSet = new Set(selectedPrIds.value);
+    const filteredPrs = excludedPrs.filter((p) => !selectedPrIdsSet.has(p.id));
+    dispatch(
+      updateExcludedPrs({
+        userId,
+        teamId,
+        excludedPrs: [...filteredPrs]
+      })
+    ).then(() => onUpdateCallback());
+  }, [
+    dispatch,
+    excludedPrs,
+    onUpdateCallback,
+    selectedPrIds.value,
+    teamId,
+    userId
+  ]);
+
+  return (
+    <FlexBox col gap1>
+      <Divider />
+      {excludedPrs.length ? (
+        <PullRequestsTable
+          propPrs={excludedPrs}
+          selectionMenu={
+            <FlexBox>
+              <Button
+                sx={{
+                  p: 1.5,
+                  '&.Mui-disabled': {
+                    borderColor: 'secondary.light'
+                  }
+                }}
+                variant="outlined"
+                disabled={!selectedPrIds.value.length}
+                onClick={updateExcludedPrsHandler}
+              >
+                Include Back to Team Analytics
+              </Button>
+            </FlexBox>
+          }
+          selectedPrIds={selectedPrIds}
+          isPrSelectionEnabled={true}
+        />
+      ) : (
+        <Line big bold>
+          No excluded PRs
+        </Line>
+      )}
+    </FlexBox>
+  );
+};