Frontend/Templates: Atomic PR for all recent commits

charts/headlamp/templates/deployment.yaml

@@ -212,11 +212,11 @@ spec:
             {{- end }}
             {{- if $oidc.useAccessToken }}
             - name: OIDC_USE_ACCESS_TOKEN
-              value: {{ $oidc.useAccessToken }}
+              value: {{ $oidc.useAccessToken | quote }}
             {{- end }}
             {{- if $oidc.usePKCE }}
             - name: OIDC_USE_PKCE
-              value: {{ $oidc.usePKCE }}
+              value: {{ $oidc.usePKCE | quote }}
             {{- end }}
             {{- if $oidc.meUserInfoURL }}
             - name: ME_USER_INFO_URL

charts/headlamp/templates/secret.yaml

@@ -34,5 +34,8 @@ data:
 {{- with .usePKCE }}
   usePKCE: {{ . | toString | b64enc | quote }}
 {{- end }}
+{{- with .meUserInfoURL }}
+  meUserInfoURL: {{ . | b64enc | quote }}
+{{- end }}
 {{- end }}
 {{- end }}

charts/headlamp/tests/expected_templates/me-user-info-url.yaml

@@ -20,6 +20,7 @@ metadata:
   namespace: default
 type: Opaque
 data:
+  meUserInfoURL: "L29hdXRoMi91c2VyaW5mb2N1c3RvbTI="
 ---
 # Source: headlamp/templates/clusterrolebinding.yaml
 apiVersion: rbac.authorization.k8s.io/v1

charts/headlamp/tests/expected_templates/oidc-pkce.yaml

@@ -107,7 +107,7 @@ spec:
             - name: OIDC_SCOPES
               value: testScope
             - name: OIDC_USE_PKCE
-              value: true
+              value: "true"
           args:
             - "-in-cluster"
             - "-plugins-dir=/headlamp/plugins"

charts/headlamp/tests/expected_templates/oidc-validator-overrides.yaml

@@ -111,7 +111,7 @@ spec:
             - name: OIDC_VALIDATOR_ISSUER_URL
               value: overriddenIssuerURL
             - name: OIDC_USE_ACCESS_TOKEN
-              value: true
+              value: "true"
           args:
             - "-in-cluster"
             - "-plugins-dir=/headlamp/plugins"

frontend/src/components/App/RouteSwitcher.tsx

@@ -155,7 +155,7 @@ function AuthRoute(props: AuthRouteProps) {
     computedMatch = {},
     ...other
   } = props;
-  const redirectRoute = getCluster() ? 'login' : 'chooser';
+  const redirectRoute = getCluster() ? 'token' : 'chooser';
   useSidebarItem(sidebar, computedMatch);
   const cluster = useCluster();
   const query = useQuery({

frontend/src/components/account/Auth.tsx

@@ -25,7 +25,7 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { generatePath, useHistory } from 'react-router-dom';
+import { generatePath, useHistory, useLocation } from 'react-router-dom';
 import { setToken } from '../../lib/auth';
 import { getCluster, getClusterPrefixedPath } from '../../lib/cluster';
 import { useClustersConf } from '../../lib/k8s';
@@ -37,6 +37,7 @@ import HeadlampLink from '../common/Link';
 
 export default function AuthToken() {
   const history = useHistory();
+  const location = useLocation<{ from: { pathname: string; search: string } }>();
   const clusterConf = useClustersConf();
   const [token, setToken] = React.useState('');
   const [showError, setShowError] = React.useState(false);
@@ -45,13 +46,17 @@ export default function AuthToken() {
 
   function onAuthClicked() {
     loginWithToken(token).then(code => {
-      // If successful, redirect.
+      // If successful, redirect
       if (code === 200) {
-        history.replace(
-          generatePath(getClusterPrefixedPath(), {
-            cluster: getCluster() as string,
-          })
-        );
+        if (location.state && location.state.from) {
+          history.replace(location.state.from);
+        } else {
+          history.replace(
+            generatePath(getClusterPrefixedPath(), {
+              cluster: getCluster() as string,
+            })
+          );
+        }
       } else {
         setToken('');
         setShowError(true);

frontend/src/components/common/Resource/EnvVarDisplay.stories.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright 2025 The Kubernetes Authors
+ *
+ * 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 { Meta, StoryFn } from '@storybook/react';
+import { TestContext } from '../../../test';
+import { EnvVarGrid } from './EnvVarDisplay';
+
+export default {
+  title: 'Resource/EnvVarDisplay',
+  component: EnvVarGrid,
+  decorators: [
+    Story => (
+      <TestContext>
+        <Story />
+      </TestContext>
+    ),
+  ],
+  argTypes: {
+    namespace: { control: 'text' },
+    cluster: { control: 'text' },
+  },
+} as Meta;
+
+const Template: StoryFn<React.ComponentProps<typeof EnvVarGrid>> = args => <EnvVarGrid {...args} />;
+
+export const PlainValues = Template.bind({});
+PlainValues.args = {
+  namespace: 'default',
+  cluster: 'minikube',
+  envVars: [
+    { name: 'NODE_ENV', value: 'production' },
+    { name: 'DEBUG', value: 'true' },
+  ],
+};
+
+export const ComplexReferences = Template.bind({});
+ComplexReferences.args = {
+  namespace: 'default',
+  cluster: 'minikube',
+  envVars: [
+    { name: 'DB_HOST', value: '127.0.0.1' },
+    {
+      name: 'API_KEY',
+      valueFrom: {
+        secretKeyRef: { name: 'my-secret', key: 'api-key' },
+      },
+    },
+    {
+      name: 'APP_CONFIG',
+      valueFrom: {
+        configMapKeyRef: { name: 'app-config', key: 'config.json' },
+      },
+    },
+    {
+      name: 'MY_POD_IP',
+      valueFrom: {
+        fieldRef: { fieldPath: 'status.podIP' },
+      },
+    },
+    {
+      name: 'CPU_LIMIT',
+      valueFrom: {
+        resourceFieldRef: { resource: 'limits.cpu' },
+      },
+    },
+  ],
+};
+
+export const ManyVariables = Template.bind({});
+ManyVariables.args = {
+  namespace: 'default',
+  cluster: 'minikube',
+  envVars: Array.from({ length: 35 }, (_, i) => ({
+    name: `VAR_${i}`,
+    value: `value-${i}`,
+  })),
+};

frontend/src/components/common/Resource/EnvVarDisplay.tsx

@@ -0,0 +1,131 @@
+/*
+ * Copyright 2025 The Kubernetes Authors
+ *
+ * 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 { Icon } from '@iconify/react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { Theme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Link from '../Link';
+
+interface EnvVarGridProps {
+  envVars: any[];
+  namespace: string;
+  cluster: string;
+}
+
+export function EnvVarGrid(props: EnvVarGridProps) {
+  const { envVars = [], namespace, cluster } = props;
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = React.useState(false);
+  const defaultNumShown = 20;
+
+  const envEntryStyle = (theme: Theme) => ({
+    color: theme.palette.text.primary,
+    borderRadius: theme.shape.borderRadius + 'px',
+    backgroundColor: theme.palette.background.muted,
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    fontSize: theme.typography.pxToRem(14),
+    padding: '4px 8px',
+    marginRight: theme.spacing(1),
+    whiteSpace: 'nowrap',
+    display: 'inline-block',
+  });
+
+  const renderEnvVar = (envVar: any) => {
+    // Secret Key:
+    if (envVar.valueFrom?.secretKeyRef) {
+      const { name: secretName, key: secretKey } = envVar.valueFrom.secretKeyRef;
+      const secretUrl = `/c/${cluster}/secrets/${namespace}/${secretName}`;
+
+      return (
+        <Typography component="span" sx={envEntryStyle} key={envVar.name}>
+          {envVar.name}:{' '}
+          <Link to={secretUrl} style={{ textDecoration: 'underline', fontWeight: 'bold' }}>
+            Secret: {secretName} (Key: {secretKey})
+          </Link>
+        </Typography>
+      );
+    }
+
+    // Config Map:
+    if (envVar.valueFrom?.configMapKeyRef) {
+      const { name: cmName, key: cmKey } = envVar.valueFrom.configMapKeyRef;
+      const secretUrl = `/c/${cluster}/secrets/${namespace}/${cmName}`;
+      return (
+        <Typography>
+          {envVar.name}:{' '}
+          <Link to={secretUrl} style={{ textDecoration: 'underline', fontWeight: 'bold' }}>
+            ConfigMap: {cmName} (Key: {cmKey})
+          </Link>
+        </Typography>
+      );
+    }
+
+    // FieldRef:
+    if (envVar.valueFrom?.fieldRef) {
+      const { fieldPath } = envVar.valueFrom.fieldRef;
+      return (
+        <Typography component="span" sx={envEntryStyle} key={envVar.name}>
+          {envVar.name}:FieldRef ({fieldPath})
+        </Typography>
+      );
+    }
+
+    // ResourceFieldRef:
+    if (envVar.valueFrom?.resourceFieldRef) {
+      const { resource } = envVar.valueFrom.resourceFieldRef;
+      return (
+        <Typography component="span" sx={envEntryStyle} key={envVar.name}>
+          {envVar.name}: ResourceField ({resource})
+        </Typography>
+      );
+    }
+
+    // Plaintext
+    return (
+      <Typography component="span" sx={envEntryStyle} key={envVar.name}>
+        {envVar.name}: {envVar.value}
+      </Typography>
+    );
+  };
+
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+        {envVars
+          .slice(0, expanded ? envVars.length : defaultNumShown)
+          .map(env => renderEnvVar(env))}
+      </Box>
+      {envVars.length > defaultNumShown && (
+        <Button
+          onClick={() => setExpanded(!expanded)}
+          size="small"
+          startIcon={<Icon icon={expanded ? 'mdi:menu-up' : 'mdi:menu-down'} />}
+        >
+          {!expanded
+            ? t('translation|Show all environment variables (+{{count}} more)', {
+                count: envVars.length - defaultNumShown,
+              })
+            : t('translation|Show fewer')}
+        </Button>
+      )}
+    </Box>
+  );
+}

frontend/src/components/common/Resource/Resource.tsx

@@ -64,6 +64,7 @@ import InnerTable from '../InnerTable';
 import { DateLabel, HoverInfoLabel, StatusLabel, StatusLabelProps, ValueLabel } from '../Label';
 import Link, { LinkProps } from '../Link';
 import { metadataStyles } from '.';
+import { EnvVarGrid } from './EnvVarDisplay';
 import { MainInfoSection, MainInfoSectionProps } from './MainInfoSection/MainInfoSection';
 import { MainInfoHeader } from './MainInfoSection/MainInfoSectionHeader';
 import { MetadataDictGrid, MetadataDisplay } from './MetadataDisplay';
@@ -981,8 +982,14 @@ export function ContainerInfo(props: ContainerInfoProps) {
       },
       {
         name: t('Environment'),
-        value: <MetadataDictGrid dict={env} />,
-        hide: _.isEmpty(env),
+        value: (
+          <EnvVarGrid
+            envVars={container.env || []}
+            namespace={resource?.metadata.namespace || ''}
+            cluster={resource?.cluster || ''}
+          />
+        ),
+        hide: !container.env || container.env?.length === 0,
       },
       {
         name: t('Liveness Probes'),