Various M2M portal updates

ref DEV-2937
ref DEV-2938
ref DEV-2939
ref DEV-2940

Author: louischan-oursky

portal/src/components/api-resources/ApplicationResourcesList.tsx

@@ -32,7 +32,7 @@ interface ApplicationResourcesListProps {
     isAuthorized: boolean
   ) => void;
   disabledToggleClientIDs?: string[];
-  onManageScopes: (item: ApplicationResourceListItem) => void;
+  onManageScopes?: (item: ApplicationResourceListItem) => void;
 }
 
 export const ApplicationResourcesList: React.FC<ApplicationResourcesListProps> =
@@ -65,54 +65,57 @@ export const ApplicationResourcesList: React.FC<ApplicationResourcesListProps> =
     );
 
     const columns: IColumn[] = useMemo(
-      () => [
-        {
-          key: "resources",
-          name: renderToString("ApplicationResourcesList.columns.resources"),
-          minWidth: 200,
-          maxWidth: 400,
-          isResizable: true,
-          onRender: (item: ApplicationResourceListItem) => {
-            return item.name || item.resourceURI;
+      () =>
+        [
+          {
+            key: "resources",
+            name: renderToString("ApplicationResourcesList.columns.resources"),
+            minWidth: 200,
+            maxWidth: 400,
+            isResizable: true,
+            onRender: (item: ApplicationResourceListItem) => {
+              return item.name || item.resourceURI;
+            },
           },
-        },
-        {
-          key: "authorized",
-          name: renderToString("ApplicationResourcesList.columns.authorized"),
-          minWidth: 150,
-          isResizable: true,
-          onRender: renderAuthorizedToggle,
-        },
-        {
-          key: "actions",
-          name: "",
-          minWidth: 100,
-          maxWidth: 100,
-          isResizable: false,
-          // eslint-disable-next-line react/no-unstable-nested-components
-          onRender: (item: ApplicationResourceListItem) => {
-            if (!item.isAuthorized) {
-              return null;
-            }
-            const handleClick = () => {
-              onManageScopes(item);
-            };
-            return (
-              <ActionButton
-                text={renderToString(
-                  "ApplicationResourcesList.columns.manageScopes"
-                )}
-                styles={{
-                  label: { fontWeight: 600 },
-                  root: { height: "auto" },
-                }}
-                theme={themes.actionButton}
-                onClick={handleClick}
-              />
-            );
+          {
+            key: "authorized",
+            name: renderToString("ApplicationResourcesList.columns.authorized"),
+            minWidth: 150,
+            isResizable: true,
+            onRender: renderAuthorizedToggle,
           },
-        },
-      ],
+          onManageScopes
+            ? {
+                key: "actions",
+                name: "",
+                minWidth: 100,
+                maxWidth: 100,
+                isResizable: false,
+                // eslint-disable-next-line react/no-unstable-nested-components
+                onRender: (item: ApplicationResourceListItem) => {
+                  if (!item.isAuthorized) {
+                    return null;
+                  }
+                  const handleClick = () => {
+                    onManageScopes(item);
+                  };
+                  return (
+                    <ActionButton
+                      text={renderToString(
+                        "ApplicationResourcesList.columns.manageScopes"
+                      )}
+                      styles={{
+                        label: { fontWeight: 600 },
+                        root: { height: "auto" },
+                      }}
+                      theme={themes.actionButton}
+                      onClick={handleClick}
+                    />
+                  );
+                },
+              }
+            : null,
+        ].filter((it) => !!it),
       [
         renderToString,
         renderAuthorizedToggle,

portal/src/components/api-resources/ResourceForm.tsx

@@ -25,9 +25,11 @@ export interface ResourceFormProps {
 }
 
 export function sanitizeFormState(state: ResourceFormState): ResourceFormState {
+  const resourceURI = state.resourceURI.trim();
+
   return {
     name: state.name.trim(),
-    resourceURI: state.resourceURI.trim(),
+    resourceURI: resourceURI ? `https://${resourceURI}` : "",
   };
 }
 
@@ -41,11 +43,16 @@ export const ResourceForm: React.VFC<ResourceFormProps> =
   function ResourceForm({ className, state, setState, mode }) {
     const { renderToString } = useContext(Context);
     const handleNameChange = useCallback(
-      (_e, value) => setState((s) => ({ ...s, name: value ?? "" })),
+      (_e, value?: string) => setState((s) => ({ ...s, name: value ?? "" })),
       [setState]
     );
     const handleResourceURIChange = useCallback(
-      (_e, value) => setState((s) => ({ ...s, resourceURI: value ?? "" })),
+      (_e, value?: string) =>
+        setState((s) => {
+          let resourceURI = value ?? "";
+          resourceURI = resourceURI.replace(/^(\s*)https:\/\//, "");
+          return { ...s, resourceURI: resourceURI };
+        }),
       [setState]
     );
     const { onSubmit, canSave, isUpdating } = useFormContainerBaseContext();
@@ -104,11 +111,9 @@ export const ResourceForm: React.VFC<ResourceFormProps> =
               fieldName="resourceURI"
               parentJSONPointer=""
               type="text"
+              prefix="https://"
               value={state.resourceURI}
               onChange={handleResourceURIChange}
-              placeholder={renderToString(
-                "ResourceForm.resourceURI.placeholder"
-              )}
             />
           )}
         </div>

portal/src/graphql/portal/CreateOAuthClientScreen.module.css

@@ -20,6 +20,7 @@
 
 .buttons {
   display: flex;
-  flex-direction: row-reverse;
   align-items: center;
+  justify-content: flex-start;
+  @apply gap-6;
 }