Merge pull request #249 from edlerd/improve-idp-forms

Improve identity provider forms in UI
canonical · Mar 27, 2024 · 76eb985 · 76eb985
2 parents cb918fb + a4acd46
commit 76eb985
Show file tree

Hide file tree

Showing 31 changed files with 408 additions and 233 deletions.
diff --git a/pkg/idp/third_party.go b/pkg/idp/third_party.go
@@ -63,7 +63,7 @@ type Configuration struct {
 
 	// SubjectSource is a flag which controls from which endpoint the subject identifier is taken by microsoft provider.
 	// Can be either `userinfo` or `me`.
-	// If the value is `uerinfo` then the subject identifier is taken from sub field of uderifo standard endpoint response.
+	// If the value is `userinfo` then the subject identifier is taken from sub field of userinfo standard endpoint response.
 	// If the value is `me` then the `id` field of https://graph.microsoft.com/v1.0/me response is taken as subject.
 	// The default is `userinfo`.
 	SubjectSource string `json:"subject_source" yaml:"subject_source"`

diff --git a/ui/.eslintrc.cjs b/ui/.eslintrc.cjs
@@ -35,5 +35,6 @@ module.exports = {
     semi: ["error", "always"],
     "object-curly-spacing": ["error", "always"],
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    "react/react-in-jsx-scope": "off",
   },
 };
diff --git a/ui/package.json b/ui/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@canonical/react-components": "0.51.0",
     "@tanstack/react-query": "^5.28.6",
+    "@use-it/event-listener": "0.1.7",
     "formik": "2.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { FC, Suspense } from "react";
+import { FC, Suspense } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import Loader from "components/Loader";
 import ClientList from "pages/clients/ClientList";

diff --git a/ui/src/components/CheckboxList.tsx b/ui/src/components/CheckboxList.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { CheckboxInput, Col, Row } from "@canonical/react-components";
 
 interface Props {

diff --git a/ui/src/components/Loader.tsx b/ui/src/components/Loader.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Spinner } from "@canonical/react-components";
 
 interface Props {

diff --git a/ui/src/components/Logo.tsx b/ui/src/components/Logo.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
 const Logo: FC = () => {

diff --git a/ui/src/components/Navigation.tsx b/ui/src/components/Navigation.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { NavLink } from "react-router-dom";
 import { Button, Icon } from "@canonical/react-components";
 import classnames from "classnames";

diff --git a/ui/src/components/NoMatch.tsx b/ui/src/components/NoMatch.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Row, Col } from "@canonical/react-components";
 
 const NoMatch: FC = () => {

diff --git a/ui/src/components/Panels.tsx b/ui/src/components/Panels.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ProviderCreate from "pages/providers/ProviderCreate";
 import usePanelParams, { panels } from "util/usePanelParams";
 import ProviderEdit from "pages/providers/ProviderEdit";

diff --git a/ui/src/components/ScrollableContainer.tsx b/ui/src/components/ScrollableContainer.tsx
@@ -0,0 +1,41 @@
+import { DependencyList, FC, ReactNode, useEffect, useRef } from "react";
+import useEventListener from "@use-it/event-listener";
+import { getAbsoluteHeightBelow, getParentsBottomSpacing } from "util/helpers";
+
+interface Props {
+  children: ReactNode;
+  dependencies: DependencyList;
+  belowId?: string;
+}
+
+const ScrollableContainer: FC<Props> = ({
+  dependencies,
+  children,
+  belowId = "",
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const updateChildContainerHeight = () => {
+    const childContainer = ref.current?.children[0];
+    if (!childContainer) {
+      return;
+    }
+    const above = childContainer.getBoundingClientRect().top + 1;
+    const below = getAbsoluteHeightBelow(belowId);
+    const parentsBottomSpacing = getParentsBottomSpacing(childContainer);
+    const offset = Math.ceil(above + below + parentsBottomSpacing);
+    const style = `height: calc(100vh - ${offset}px); min-height: calc(100vh - ${offset}px)`;
+    childContainer.setAttribute("style", style);
+  };
+
+  useEventListener("resize", updateChildContainerHeight);
+  useEffect(updateChildContainerHeight, [...dependencies, ref]);
+
+  return (
+    <div ref={ref} className="scrollable-container">
+      <div className="content-details">{children}</div>
+    </div>
+  );
+};
+
+export default ScrollableContainer;
diff --git a/ui/src/components/SidePanel.tsx b/ui/src/components/SidePanel.tsx
@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, ReactNode } from "react";
+import { FC, PropsWithChildren, ReactNode } from "react";
 import Loader from "components/Loader";
 import classnames from "classnames";
 import { Spinner } from "@canonical/react-components";

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
 import Navigation from "components/Navigation";

diff --git a/ui/src/pages/clients/ClientCreate.tsx b/ui/src/pages/clients/ClientCreate.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import {
   ActionButton,
   Button,
@@ -14,6 +14,7 @@ import { useNavigate } from "react-router-dom";
 import ClientForm, { ClientFormTypes } from "pages/clients/ClientForm";
 import { createClient } from "api/client";
 import SidePanel from "components/SidePanel";
+import ScrollableContainer from "components/ScrollableContainer";
 
 const ClientCreate: FC = () => {
   const navigate = useNavigate();
@@ -57,31 +58,35 @@ const ClientCreate: FC = () => {
 
   return (
     <SidePanel hasError={false} loading={false} className="p-panel">
-      <SidePanel.Header>
-        <SidePanel.HeaderTitle>Add client</SidePanel.HeaderTitle>
-      </SidePanel.Header>
-      <SidePanel.Content>
-        <Row>
-          <ClientForm formik={formik} />
-        </Row>
-      </SidePanel.Content>
-      <SidePanel.Footer>
-        <Row className="u-align-text--right">
-          <Col size={12}>
-            <Button appearance="base" onClick={() => navigate("/client")}>
-              Cancel
-            </Button>
-            <ActionButton
-              appearance="positive"
-              loading={formik.isSubmitting}
-              disabled={!formik.isValid}
-              onClick={submitForm}
-            >
-              Save
-            </ActionButton>
-          </Col>
-        </Row>
-      </SidePanel.Footer>
+      <ScrollableContainer dependencies={[]} belowId="panel-footer">
+        <SidePanel.Header>
+          <SidePanel.HeaderTitle>Add client</SidePanel.HeaderTitle>
+        </SidePanel.Header>
+        <SidePanel.Content>
+          <Row>
+            <ClientForm formik={formik} />
+          </Row>
+        </SidePanel.Content>
+      </ScrollableContainer>
+      <div id="panel-footer">
+        <SidePanel.Footer>
+          <Row className="u-align-text--right">
+            <Col size={12}>
+              <Button appearance="base" onClick={() => navigate("/client")}>
+                Cancel
+              </Button>
+              <ActionButton
+                appearance="positive"
+                loading={formik.isSubmitting}
+                disabled={!formik.isValid}
+                onClick={submitForm}
+              >
+                Save
+              </ActionButton>
+            </Col>
+          </Row>
+        </SidePanel.Footer>
+      </div>
     </SidePanel>
   );
 };

diff --git a/ui/src/pages/clients/ClientEdit.tsx b/ui/src/pages/clients/ClientEdit.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import {
   ActionButton,
   Button,
@@ -15,6 +15,7 @@ import ClientForm, { ClientFormTypes } from "pages/clients/ClientForm";
 import { fetchClient, updateClient } from "api/client";
 import usePanelParams from "util/usePanelParams";
 import SidePanel from "components/SidePanel";
+import ScrollableContainer from "components/ScrollableContainer";
 
 const ClientEdit: FC = () => {
   const navigate = useNavigate();
@@ -69,36 +70,40 @@ const ClientEdit: FC = () => {
 
   return (
     <SidePanel hasError={false} loading={false} className="p-panel">
-      <SidePanel.Header>
-        <SidePanel.HeaderTitle>Edit client</SidePanel.HeaderTitle>
-      </SidePanel.Header>
-      <SidePanel.Content className="u-no-padding">
-        <Row>
-          <ClientForm formik={formik} />
-        </Row>
-      </SidePanel.Content>
-      <SidePanel.Footer className="u-align--right">
-        <Row>
-          <Col size={12}>
-            <Button
-              appearance="base"
-              className="u-no-margin--bottom u-sv2"
-              onClick={() => navigate(`/client`)}
-            >
-              Cancel
-            </Button>
-            <ActionButton
-              appearance="positive"
-              className="u-no-margin--bottom"
-              loading={formik.isSubmitting}
-              disabled={!formik.isValid}
-              onClick={submitForm}
-            >
-              Update
-            </ActionButton>
-          </Col>
-        </Row>
-      </SidePanel.Footer>
+      <ScrollableContainer dependencies={[]} belowId="panel-footer">
+        <SidePanel.Header>
+          <SidePanel.HeaderTitle>Edit client</SidePanel.HeaderTitle>
+        </SidePanel.Header>
+        <SidePanel.Content className="u-no-padding">
+          <Row>
+            <ClientForm formik={formik} />
+          </Row>
+        </SidePanel.Content>
+      </ScrollableContainer>
+      <div id="panel-footer">
+        <SidePanel.Footer className="u-align--right">
+          <Row>
+            <Col size={12}>
+              <Button
+                appearance="base"
+                className="u-no-margin--bottom u-sv2"
+                onClick={() => navigate(`/client`)}
+              >
+                Cancel
+              </Button>
+              <ActionButton
+                appearance="positive"
+                className="u-no-margin--bottom"
+                loading={formik.isSubmitting}
+                disabled={!formik.isValid}
+                onClick={submitForm}
+              >
+                Update
+              </ActionButton>
+            </Col>
+          </Row>
+        </SidePanel.Footer>
+      </div>
     </SidePanel>
   );
 };

diff --git a/ui/src/pages/clients/ClientForm.tsx b/ui/src/pages/clients/ClientForm.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Form, Input } from "@canonical/react-components";
 import { FormikProps } from "formik";
 import CheckboxList from "components/CheckboxList";
@@ -40,25 +40,40 @@ const ClientForm: FC<Props> = ({ formik }) => {
         required
       />
       <Input
-        id="client_uri"
-        name="client_uri"
+        id="scope"
+        name="scope"
         type="text"
-        label="Client uri"
+        label="Scope"
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
-        value={formik.values.client_uri}
-        error={formik.touched.client_uri ? formik.errors.client_uri : null}
+        value={formik.values.scope}
+        error={formik.touched.scope ? formik.errors.scope : null}
         required
       />
       <Input
-        id="scope"
-        name="scope"
+        id="redirect_uris"
+        name="redirect_uris"
         type="text"
-        label="Scope"
+        label="Redirect uri"
+        onBlur={formik.handleBlur}
+        onChange={(e) =>
+          void formik.setFieldValue("redirect_uris", [e.target.value])
+        }
+        value={formik.values.redirect_uris}
+        error={
+          formik.touched.redirect_uris ? formik.errors.redirect_uris : null
+        }
+        required
+      />
+      <Input
+        id="client_uri"
+        name="client_uri"
+        type="text"
+        label="Client uri"
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
-        value={formik.values.scope}
-        error={formik.touched.scope ? formik.errors.scope : null}
+        value={formik.values.client_uri}
+        error={formik.touched.client_uri ? formik.errors.client_uri : null}
         required
       />
       <Input
@@ -76,21 +91,6 @@ const ClientForm: FC<Props> = ({ formik }) => {
         }
         required
       />
-      <Input
-        id="redirect_uris"
-        name="redirect_uris"
-        type="text"
-        label="Redirect uri"
-        onBlur={formik.handleBlur}
-        onChange={(e) =>
-          void formik.setFieldValue("redirect_uris", [e.target.value])
-        }
-        value={formik.values.redirect_uris}
-        error={
-          formik.touched.redirect_uris ? formik.errors.redirect_uris : null
-        }
-        required
-      />
       <CheckboxList
         label="Grant types"
         values={["authorization_code", "refresh_token"]}

diff --git a/ui/src/pages/clients/ClientList.tsx b/ui/src/pages/clients/ClientList.tsx
@@ -1,8 +1,7 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Button, Col, MainTable, Row } from "@canonical/react-components";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
-import { Link } from "react-router-dom";
 import { NotificationConsumer } from "@canonical/react-components/dist/components/NotificationProvider/NotificationProvider";
 import { fetchClients } from "api/client";
 import { isoTimeToString } from "util/date";

diff --git a/ui/src/pages/clients/DeleteClientBtn.tsx b/ui/src/pages/clients/DeleteClientBtn.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { queryKeys } from "util/queryKeys";
 import { useQueryClient } from "@tanstack/react-query";

diff --git a/ui/src/pages/clients/EditClientBtn.tsx b/ui/src/pages/clients/EditClientBtn.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Button, Icon } from "@canonical/react-components";
 import usePanelParams from "util/usePanelParams";
 

diff --git a/ui/src/pages/providers/DeleteProviderBtn.tsx b/ui/src/pages/providers/DeleteProviderBtn.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { queryKeys } from "util/queryKeys";
 import { useQueryClient } from "@tanstack/react-query";

diff --git a/ui/src/pages/providers/EditProviderBtn.tsx b/ui/src/pages/providers/EditProviderBtn.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Button, Icon } from "@canonical/react-components";
 import usePanelParams from "util/usePanelParams";