@digital-ai/plugin-scaffolder-frontend-module-deploy-app-field/dist/components/DeployApplicationFieldSelector.esm.js

Custom Field Extensions (Frontend Plugin)- List Deploy Application

import React, { useState } from 'react';
import { makeFieldSchema } from '@backstage/plugin-scaffolder-react';
import { useApi, configApiRef, identityApiRef } from '@backstage/core-plugin-api';
import { useAsync } from 'react-use';
import { makeStyles, FormControl, TextField } from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';

const GET_APP_NAME = "deployit/repository/v3/query?page=0&resultsPerPage=-1&type=udm.Application";
const DeployAppSelectorExtensionWithOptionsFieldSchema = makeFieldSchema({
  output: (z) => z.object({
    deployApplication: z.string().describe("Dai Deploy Application")
  })
});
const DeployAppSelectorExtensionWithOptionsSchema = DeployAppSelectorExtensionWithOptionsFieldSchema.schema;
const useStyles = makeStyles({
  option: {
    fontSize: 15,
    "& > span": {
      marginRight: 10,
      fontSize: 18
    }
  }
});
const DeployApplicationFieldExtension = ({
  onChange,
  rawErrors,
  required,
  formData,
  idSchema,
  schema: { description }
}) => {
  const configApi = useApi(configApiRef);
  const identityApi = useApi(identityApiRef);
  const [loading, setLoading] = useState(true);
  const [selectedApp, setSelectedApp] = useState("");
  const [data, setData] = useState([]);
  const backendUrl = configApi.getString("backend.baseUrl");
  const registryApiEndpoint = `${backendUrl}/api/proxy/deploy-app/${GET_APP_NAME}`;
  useAsync(async () => {
    try {
      const { token } = await identityApi.getCredentials();
      const req = await fetch(registryApiEndpoint, {
        headers: { Accept: "application/json", Authorization: `Bearer ${token}` }
      });
      const resp = await req.json();
      const deployApplicationRefs = resp.map((app) => app.ref.split("/").pop() ?? "");
      deployApplicationRefs.sort((a, b) => (a ?? "").localeCompare(b ?? ""));
      setData(deployApplicationRefs);
    } catch (error) {
    } finally {
      setLoading(false);
    }
  }, []);
  const handleDeployApplication = (value) => {
    setSelectedApp(value);
    onChange({
      deployApplication: value ?? ""
    });
  };
  const classes = useStyles();
  return /* @__PURE__ */ React.createElement(
    FormControl,
    {
      margin: "normal",
      required,
      error: rawErrors?.length > 0
    },
    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
      Autocomplete,
      {
        defaultValue: "",
        id: `depApp-selector-${idSchema?.$id}`,
        loading,
        noOptionsText: "No Deploy Application available for selection",
        value: formData?.deployApplication ?? selectedApp,
        classes: { option: classes.option },
        options: data,
        getOptionLabel: (option) => option,
        renderInput: (params) => /* @__PURE__ */ React.createElement(
          TextField,
          {
            ...params,
            label: "Deploy Application",
            variant: "outlined",
            required,
            error: rawErrors?.length > 0 && !formData,
            inputProps: {
              ...params.inputProps,
              autoComplete: "new-password"
            },
            helperText: description
          }
        ),
        onChange: (_, value) => handleDeployApplication(value),
        getOptionSelected: (option, value) => option === value,
        disableClearable: true
      }
    ))
  );
};

export { DeployAppSelectorExtensionWithOptionsSchema, DeployApplicationFieldExtension, GET_APP_NAME };
//# sourceMappingURL=DeployApplicationFieldSelector.esm.js.map