fix: update most UI types to account for readonly modifiers

Parkreiner · Parkreiner · commit bade8026f920 · 2024-04-12T18:06:26.000Z
diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -42,7 +42,7 @@ ChartJS.register(
 const USER_LIMIT_DISPLAY_THRESHOLD = 60;
 
 export interface ActiveUserChartProps {
-  data: Array<{ date: string; amount: number }>;
+  data: readonly ({ date: string; amount: number })[];
   interval: "day" | "week";
   userLimit: number | undefined;
 }
diff --git a/site/src/components/Timeline/Timeline.tsx b/site/src/components/Timeline/Timeline.tsx
@@ -4,7 +4,7 @@ import { TimelineDateRow } from "components/Timeline/TimelineDateRow";
 type GetDateFn<TData> = (data: TData) => Date;
 
 const groupByDate = <TData,>(
-  items: TData[],
+  items: readonly TData[],
   getDate: GetDateFn<TData>,
 ): Record<string, TData[]> => {
   const itemsByDate: Record<string, TData[]> = {};
@@ -23,7 +23,7 @@ const groupByDate = <TData,>(
 };
 
 export interface TimelineProps<TData> {
-  items: TData[];
+  items: readonly TData[];
   getDate: GetDateFn<TData>;
   row: (item: TData) => JSX.Element;
 }
diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx
@@ -41,7 +41,7 @@ export interface ProxyContextValue {
   // WorkspaceProxy[] is returned if the user is an admin. WorkspaceProxy extends Region with
   //  more information about the proxy and the status. More information includes the error message if
   //  the proxy is unhealthy.
-  proxies?: Region[] | WorkspaceProxy[];
+  proxies?: readonly Region[] | readonly WorkspaceProxy[];
   // isFetched is true when the 'proxies' api call is complete.
   isFetched: boolean;
   isLoading: boolean;
@@ -117,7 +117,7 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
   });
 
   const { permissions } = useAuthenticated();
-  const query = async (): Promise<Region[]> => {
+  const query = async (): Promise<readonly Region[]> => {
     const endpoint = permissions.editWorkspaceProxies
       ? getWorkspaceProxies
       : getWorkspaceProxyRegions;
@@ -218,7 +218,7 @@ export const useProxy = (): ProxyContextValue => {
  *                  If not, `primary` is always the best default.
  */
 export const getPreferredProxy = (
-  proxies: Region[],
+  proxies: readonly Region[],
   selectedProxy?: Region,
   latencies?: Record<string, ProxyLatencyReport>,
   autoSelectBasedOnLatency = true,
@@ -245,7 +245,7 @@ export const getPreferredProxy = (
 };
 
 const selectByLatency = (
-  proxies: Region[],
+  proxies: readonly Region[],
   latencies?: Record<string, ProxyLatencyReport>,
 ): Region | undefined => {
   if (!latencies) {
diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts
@@ -37,7 +37,7 @@ const proxyLatenciesReducer = (
 };
 
 export const useProxyLatency = (
-  proxies?: Region[],
+  proxies?: readonly Region[],
 ): {
   // Refetch can be called to refetch the proxy latencies.
   // Until the new values are loaded, the old values will still be used.
@@ -265,7 +265,7 @@ const updateStoredLatencies = (action: ProxyLatencyAction): void => {
 // garbageCollectStoredLatencies will remove any latencies that are older then 1 week or latencies of proxies
 // that no longer exist. This is intended to keep the size of local storage down.
 const garbageCollectStoredLatencies = (
-  regions: Region[],
+  regions: readonly Region[],
   maxStored: number,
 ): void => {
   const latencies = loadStoredLatencies();
@@ -282,7 +282,7 @@ const garbageCollectStoredLatencies = (
 
 const cleanupLatencies = (
   stored: Record<string, ProxyLatencyReport[]>,
-  regions: Region[],
+  regions: readonly Region[],
   now: Date,
   maxStored: number,
 ): Record<string, ProxyLatencyReport[]> => {
diff --git a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -27,8 +27,8 @@ const styles = {
 } satisfies Record<string, Interpolation<Theme>>;
 
 export interface LicenseBannerViewProps {
-  errors: string[];
-  warnings: string[];
+  errors: readonly string[];
+  warnings: readonly string[];
 }
 
 export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -15,7 +15,7 @@ import { UserDropdownContent } from "./UserDropdownContent";
 export interface UserDropdownProps {
   user: TypesGen.User;
   buildInfo?: TypesGen.BuildInfoResponse;
-  supportLinks?: TypesGen.LinkConfig[];
+  supportLinks?: readonly TypesGen.LinkConfig[];
   onSignOut: () => void;
   children?: ReactNode;
 }
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -83,7 +83,7 @@ const styles = {
 export interface UserDropdownContentProps {
   user: TypesGen.User;
   buildInfo?: TypesGen.BuildInfoResponse;
-  supportLinks?: TypesGen.LinkConfig[];
+  supportLinks?: readonly TypesGen.LinkConfig[];
   onSignOut: () => void;
 }
 
diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
@@ -20,8 +20,8 @@ type AgentLogsProps = Omit<
   ComponentProps<typeof List>,
   "children" | "itemSize" | "itemCount"
 > & {
-  logs: LineWithID[];
-  sources: WorkspaceAgentLogSource[];
+  logs: readonly LineWithID[];
+  sources: readonly WorkspaceAgentLogSource[];
 };
 
 export const AgentLogs = forwardRef<List, AgentLogsProps>(
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
@@ -116,7 +116,7 @@ const getValidationSchema = (): Yup.AnyObjectSchema =>
   });
 
 interface PortForwardPopoverViewProps extends PortForwardButtonProps {
-  listeningPorts?: WorkspaceAgentListeningPort[];
+  listeningPorts?: readonly WorkspaceAgentListeningPort[];
   portSharingExperimentEnabled: boolean;
   portSharingControlsEnabled: boolean;
 }
diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
@@ -15,7 +15,7 @@ export interface VSCodeDesktopButtonProps {
   workspaceName: string;
   agentName?: string;
   folderPath?: string;
-  displayApps: DisplayApp[];
+  displayApps: readonly DisplayApp[];
 }
 
 type VSCodeVariant = "vscode" | "vscode-insiders";
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -32,7 +32,7 @@ export const Language = {
 };
 
 export interface AuditPageViewProps {
-  auditLogs?: AuditLog[];
+  auditLogs?: readonly AuditLog[];
   isNonInitialPage: boolean;
   isAuditLogVisible: boolean;
   error?: unknown;
diff --git a/site/src/pages/DeploySettingsPage/OptionsTable.tsx b/site/src/pages/DeploySettingsPage/OptionsTable.tsx
@@ -17,8 +17,8 @@ import {
 import { optionValue } from "./optionValue";
 
 interface OptionsTableProps {
-  options: SerpentOption[];
-  additionalValues?: string[];
+  options: readonly SerpentOption[];
+  additionalValues?: readonly string[];
 }
 
 const OptionsTable: FC<OptionsTableProps> = ({ options, additionalValues }) => {
diff --git a/site/src/pages/DeploySettingsPage/optionValue.ts b/site/src/pages/DeploySettingsPage/optionValue.ts
@@ -4,7 +4,7 @@ import type { SerpentOption } from "api/typesGenerated";
 // optionValue is a helper function to format the value of a specific deployment options
 export function optionValue(
   option: SerpentOption,
-  additionalValues?: string[],
+  additionalValues?: readonly string[],
 ) {
   // If option annotations are present, use them to format the value.
   if (option.annotations) {
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
@@ -214,7 +214,7 @@ export const BooleanPill: FC<BooleanPillProps> = ({
   );
 };
 
-type LogsProps = { lines: string[] } & HTMLAttributes<HTMLDivElement>;
+type LogsProps = HTMLAttributes<HTMLDivElement> & { lines: readonly string[] };
 
 export const Logs: FC<LogsProps> = ({ lines, ...divProps }) => {
   const theme = useTheme();
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -296,7 +296,7 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
         {!data && <Loader css={{ height: "100%" }} />}
         {users && users.length === 0 && <NoDataAvailable />}
         {users &&
-          users
+          [...users]
             .sort((a, b) => b.latency_ms.p50 - a.latency_ms.p50)
             .map((row) => (
               <div
@@ -367,7 +367,7 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
         {!data && <Loader css={{ height: "100%" }} />}
         {users && users.length === 0 && <NoDataAvailable />}
         {users &&
-          users
+          [...users]
             .sort((a, b) => b.seconds - a.seconds)
             .map((row) => (
               <div
@@ -405,7 +405,7 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 };
 
 interface TemplateUsagePanelProps extends PanelProps {
-  data: TemplateAppUsage[] | undefined;
+  data: readonly TemplateAppUsage[] | undefined;
 }
 
 const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
@@ -508,7 +508,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 };
 
 interface TemplateParametersUsagePanelProps extends PanelProps {
-  data: TemplateParameterUsage[] | undefined;
+  data: readonly TemplateParameterUsage[] | undefined;
 }
 
 const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
@@ -579,7 +579,7 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
                       <div>Count</div>
                     </Tooltip>
                   </ParameterUsageRow>
-                  {parameter.values
+                  {[...parameter.values]
                     .sort((a, b) => b.count - a.count)
                     .filter((usage) => filterOrphanValues(usage, parameter))
                     .map((usage, usageIndex) => (
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -113,7 +113,7 @@ const ProxyMessagesRow: FC<ProxyMessagesRowProps> = ({ proxy }) => {
 
 interface ProxyMessagesListProps {
   title: ReactNode;
-  messages?: string[];
+  messages?: readonly string[];
 }
 
 const ProxyMessagesList: FC<ProxyMessagesListProps> = ({ title, messages }) => {
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx
@@ -15,7 +15,7 @@ import type { ProxyLatencyReport } from "contexts/useProxyLatency";
 import { ProxyRow } from "./WorkspaceProxyRow";
 
 export interface WorkspaceProxyViewProps {
-  proxies?: Region[];
+  proxies?: readonly Region[];
   proxyLatencies?: Record<string, ProxyLatencyReport>;
   getWorkspaceProxiesError?: unknown;
   isLoading: boolean;
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -9,7 +9,7 @@ import { UsersFilter } from "./UsersFilter";
 import { UsersTable } from "./UsersTable/UsersTable";
 
 export interface UsersPageViewProps {
-  users?: TypesGen.User[];
+  users?: readonly TypesGen.User[];
   roles?: TypesGen.AssignableRoles[];
   isUpdatingUserRoles?: boolean;
   canEditUsers: boolean;
diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
@@ -69,7 +69,7 @@ const Option: FC<OptionProps> = ({
 
 export interface EditRolesButtonProps {
   isLoading: boolean;
-  roles: Role[];
+  roles: readonly Role[];
   selectedRoleNames: Set<string>;
   onChange: (roles: Role["name"][]) => void;
   isDefaultOpen?: boolean;
diff --git a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
@@ -160,7 +160,7 @@ const roleNamesByAccessLevel: readonly string[] = [
   "auditor",
 ];
 
-function sortRolesByAccessLevel(roles: Role[]) {
+function sortRolesByAccessLevel(roles: readonly Role[]): readonly Role[] {
   if (roles.length === 0) {
     return roles;
   }
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTable.tsx b/site/src/pages/UsersPage/UsersTable/UsersTable.tsx
@@ -21,7 +21,7 @@ export const Language = {
 } as const;
 
 export interface UsersTableProps {
-  users: TypesGen.User[] | undefined;
+  users: readonly TypesGen.User[] | undefined;
   roles: TypesGen.AssignableRoles[] | undefined;
   groupsByUserId: GroupsByUserId | undefined;
   isUpdatingUserRoles?: boolean;
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
@@ -36,7 +36,7 @@ import { UserRoleCell } from "./UserRoleCell";
 dayjs.extend(relativeTime);
 
 interface UsersTableBodyProps {
-  users: TypesGen.User[] | undefined;
+  users: readonly TypesGen.User[] | undefined;
   groupsByUserId: GroupsByUserId | undefined;
   authMethods?: TypesGen.AuthMethods;
   roles?: TypesGen.AssignableRoles[];
diff --git a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
@@ -13,7 +13,7 @@ import { getResourceIconPath } from "utils/workspace";
 dayjs.extend(relativeTime);
 
 type BatchDeleteConfirmationProps = {
-  checkedWorkspaces: Workspace[];
+  checkedWorkspaces: readonly Workspace[];
   open: boolean;
   isLoading: boolean;
   onClose: () => void;
@@ -111,7 +111,7 @@ export const BatchDeleteConfirmation: FC<BatchDeleteConfirmationProps> = ({
 };
 
 interface StageProps {
-  workspaces: Workspace[];
+  workspaces: readonly Workspace[];
 }
 
 const Consequences: FC = () => {
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
@@ -18,7 +18,7 @@ import { Stack } from "components/Stack/Stack";
 dayjs.extend(relativeTime);
 
 type BatchUpdateConfirmationProps = {
-  checkedWorkspaces: Workspace[];
+  checkedWorkspaces: readonly Workspace[];
   open: boolean;
   isLoading: boolean;
   onClose: () => void;
@@ -27,7 +27,7 @@ type BatchUpdateConfirmationProps = {
 
 export interface Update extends TemplateVersion {
   template_display_name: string;
-  affected_workspaces: Workspace[];
+  affected_workspaces: readonly Workspace[];
 }
 
 export const BatchUpdateConfirmation: FC<BatchUpdateConfirmationProps> = ({
@@ -401,7 +401,7 @@ const TemplateVersionMessages: FC<TemplateVersionMessagesProps> = ({
 };
 
 interface UsedByProps {
-  workspaces: Workspace[];
+  workspaces: readonly Workspace[];
 }
 
 const UsedBy: FC<UsedByProps> = ({ workspaces }) => {
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -54,7 +54,9 @@ const WorkspacesPage: FC = () => {
   });
 
   const updateWorkspace = useWorkspaceUpdate(queryKey);
-  const [checkedWorkspaces, setCheckedWorkspaces] = useState<Workspace[]>([]);
+  const [checkedWorkspaces, setCheckedWorkspaces] = useState<
+    readonly Workspace[]
+  >([]);
   const [confirmingBatchAction, setConfirmingBatchAction] = useState<
     "delete" | "update" | null
   >(null);
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -44,15 +44,15 @@ type TemplateQuery = UseQueryResult<Template[]>;
 
 export interface WorkspacesPageViewProps {
   error: unknown;
-  workspaces?: Workspace[];
-  checkedWorkspaces: Workspace[];
+  workspaces?: readonly Workspace[];
+  checkedWorkspaces: readonly Workspace[];
   count?: number;
   filterProps: ComponentProps<typeof WorkspacesFilter>;
   page: number;
   limit: number;
   onPageChange: (page: number) => void;
   onUpdateWorkspace: (workspace: Workspace) => void;
-  onCheckChange: (checkedWorkspaces: Workspace[]) => void;
+  onCheckChange: (checkedWorkspaces: readonly Workspace[]) => void;
   isRunningBatchAction: boolean;
   onDeleteAll: () => void;
   onUpdateAll: () => void;
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -30,12 +30,12 @@ import { getDisplayWorkspaceTemplateName } from "utils/workspace";
 import { WorkspacesEmpty } from "./WorkspacesEmpty";
 
 export interface WorkspacesTableProps {
-  workspaces?: Workspace[];
-  checkedWorkspaces: Workspace[];
+  workspaces?: readonly Workspace[];
+  checkedWorkspaces: readonly Workspace[];
   error?: unknown;
   isUsingFilter: boolean;
   onUpdateWorkspace: (workspace: Workspace) => void;
-  onCheckChange: (checkedWorkspaces: Workspace[]) => void;
+  onCheckChange: (checkedWorkspaces: readonly Workspace[]) => void;
   canCheckWorkspaces: boolean;
   templates?: Template[];
   canCreateTemplate: boolean;
diff --git a/site/src/pages/WorkspacesPage/batchActions.tsx b/site/src/pages/WorkspacesPage/batchActions.tsx

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ ChartJS.register(`
`42`	`42`	`const USER_LIMIT_DISPLAY_THRESHOLD = 60;`
`43`	`43`
`44`	`44`	`export interface ActiveUserChartProps {`
`45`		`- data: Array<{ date: string; amount: number }>;`
	`45`	`+ data: readonly ({ date: string; amount: number })[];`
`46`	`46`	`interval: "day" \| "week";`
`47`	`47`	`userLimit: number \| undefined;`
`48`	`48`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,8 +27,8 @@ const styles = {`
`27`	`27`	`} satisfies Record<string, Interpolation<Theme>>;`
`28`	`28`
`29`	`29`	`export interface LicenseBannerViewProps {`
`30`		`- errors: string[];`
`31`		`- warnings: string[];`
	`30`	`+ errors: readonly string[];`
	`31`	`+ warnings: readonly string[];`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`export const LicenseBannerView: FC<LicenseBannerViewProps> = ({`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ import { UserDropdownContent } from "./UserDropdownContent";`
`15`	`15`	`export interface UserDropdownProps {`
`16`	`16`	`user: TypesGen.User;`
`17`	`17`	`buildInfo?: TypesGen.BuildInfoResponse;`
`18`		`- supportLinks?: TypesGen.LinkConfig[];`
	`18`	`+ supportLinks?: readonly TypesGen.LinkConfig[];`
`19`	`19`	`onSignOut: () => void;`
`20`	`20`	`children?: ReactNode;`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,7 @@ const styles = {`
`83`	`83`	`export interface UserDropdownContentProps {`
`84`	`84`	`user: TypesGen.User;`
`85`	`85`	`buildInfo?: TypesGen.BuildInfoResponse;`
`86`		`- supportLinks?: TypesGen.LinkConfig[];`
	`86`	`+ supportLinks?: readonly TypesGen.LinkConfig[];`
`87`	`87`	`onSignOut: () => void;`
`88`	`88`	`}`
`89`	`89`
Original file line number	Diff line number	Diff line change
`@@ -116,7 +116,7 @@ const getValidationSchema = (): Yup.AnyObjectSchema =>`
`116`	`116`	`});`
`117`	`117`
`118`	`118`	`interface PortForwardPopoverViewProps extends PortForwardButtonProps {`
`119`		`- listeningPorts?: WorkspaceAgentListeningPort[];`
	`119`	`+ listeningPorts?: readonly WorkspaceAgentListeningPort[];`
`120`	`120`	`portSharingExperimentEnabled: boolean;`
`121`	`121`	`portSharingControlsEnabled: boolean;`
`122`	`122`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export interface VSCodeDesktopButtonProps {`
`15`	`15`	`workspaceName: string;`
`16`	`16`	`agentName?: string;`
`17`	`17`	`folderPath?: string;`
`18`		`- displayApps: DisplayApp[];`
	`18`	`+ displayApps: readonly DisplayApp[];`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`type VSCodeVariant = "vscode" \| "vscode-insiders";`